JavaScript and HTML "dice" program

You should should have two elements, an input (textbox) and image element. In your Javascript code get the value from the textbox and use that value in the src attribute of the image.

Thanks for your feedback, but please could you elaborate a little more as i know almost nothing about this. I have included the second element in the JavaScript

var dicePic = document.getElementById("dice");

is this the correct way of doing that? the line "var textBoxValue = textBox.value;" this gets the value, correct? And the attribute part of the src line... Is that the part before the "attribute.src = ". Sorry to be a pain only just started this subject today so appologies if i am a bit slow!

Ok, so take a look at this quick example i put online. http://jsfiddle.net/khguz/

type in a number 1-6 and click "Roll". However, this example is not complete. I am confident that you need to put in some logic to validate that the only input you will accept is a number between 1 and 6.

Good luck, give it a try and come back when you get stuck.

The help you have given me is more than i ever expected, so thanks so much for that! So to include some logic to validate only numbers between 1 and 6 i could then use an 'if' statement correct?

e.g.

if (textBoxValue <= 6 && textBoxValue >= 1)
{
    return textBoxValue;
}
else
{
    return null or false;  ??
}

I know how i would achieve this in java but not quite sure in terms of JavaScript. Your patience and support is hugely appreciated! Thanks again for your time

Thanks for your kind support i have cracked it now. Perhaps though you could help me with something else? The other thing i am stuck on is a table using HTML.

Here is the HTML for the table:

<table border="1" cellpadding="5">
    <tbody>
        <tr>
            <td id="cell1">1</td>
            <td id="cell2">2</td>
            <td id="cell3">3</td>
        </tr>
        <tr>
            <td id="cell4">4</td>
            <td id="cell5">5</td>
            <td id="cell6">6</td>
        </tr>
        <tr>
            <td id="cell7">7</td>
            <td id="cell8">8</td>
            <td id="cell9">9</td>
        </tr>
    </tbody>
</table>

Here is the JavaScript code i am using to put numbers in order 1 - 9 within it, however i have been told this is wrong and it can be done using a loop and in 7 lines of code or less (between 4 and 7 lines):

document.getElementById("cell1").innerHTML = "1";
document.getElementById("cell2").innerHTML = "2";
document.getElementById("cell3").innerHTML = "3";
document.getElementById("cell4").innerHTML = "4";
document.getElementById("cell5").innerHTML = "5";
document.getElementById("cell6").innerHTML = "6";
document.getElementById("cell7").innerHTML = "7";
document.getElementById("cell8").innerHTML = "8";
document.getElementById("cell9").innerHTML = "9";

I assume i will need to create a for loop that adds these numbers into the table concatenating them into some form of string. But i have no idea as to how i will be able to achieve this?? This is the only other thing i have had troubles with. I think the JavaScript i have supplied is fine and it works too, but i am told this is not the best way to do this. If you can help that would be great, Thanks

Sure, although I'd suggest starting a new thread next time.

Your approach is not optimized because what if you had 100 cells to fill. For the table...you are correct about using a loop. One option is that you can fill in the data using a "For" loop. Here is an example of how you would go about it..

<script>
    for (var x = 1; x < 10; x++) {
        document.getElementById("cell" + x).innerHTML = x;
    }
</script>