JavaScript and HTML "dice" program

[l.worboyz]

I am trying to create a JavaScript program that displays a different face of the dice depending on whether the user has entered a number between 1 and 6. I am using this in conjunction with HTML which is supplied to me in a learning interface online.

The different faces of the dice are displayed as links in a URL format. This is a project for University and have very little knowledge into this subject so am seeking some help in order to be able to complete this.

I have attempted the task several times with no success and have been told that I should not be using "if" statements to accomplish this. Here is a copy of my latest attempt:

var textBox = document.getElementById("textbox");
var textBoxValue = textBox.value;

textBoxValue.src = "http://fetlar.kingston.ac.uk/pp/dice" + textBoxValue + ".png";

The above image is the HTML that goes with this Javascript code (HTML) of which i have to extract info from. I can edit this but unfortunately it does not allow the copy and paste option as it is restricted on the site i am using.

This above image is the browser output of the HTML code (original).

The links below are the actual image URL's to each of the 6 faces of a dice.
http://fetlar.kingston.ac.uk/pp/dice1.png
http://fetlar.kingston.ac.uk/pp/dice2.png
http://fetlar.kingston.ac.uk/pp/dice3.png
http://fetlar.kingston.ac.uk/pp/dice4.png
http://fetlar.kingston.ac.uk/pp/dice5.png
http://fetlar.kingston.ac.uk/pp/dice6.png

I hope i have made this relatively clear in order to be able to get some help? Please ask me if there is anything else you need to know in order to be able to help me. Thanks in adavance, i really hope someone can help me out here.

[JorgeM]

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.

[l.worboyz]

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!

[JorgeM]

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.

[l.worboyz]

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

[l.worboyz]

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

[JorgeM]

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>