program to Roll a dice with picture instead number using javascript

Question

I am trying to print out images on the dice, instead of just the number. But when i am using document.write, it just opens a new tab, and shows the picture. What should i use to print it out, with the button i have?

<div id="roll-dice">
    <button type="button" value="Trow dice" onclick="rolldice()">Roll dice</button>
    <span id="roll-result"></span>
</div>

var rollResult = Math.floor(Math.random() * 6) + 1;
        if (rollResult == 1) document.write('<img src="1.jpg">');
else if (rollResult == 2) document.write('<img src="2.jpg">');
else if (rollResult == 3) document.write('<img src="3.jpg">');
else if (rollResult == 4) document.write('<img src="4.jpg">');
else if (rollResult == 5) document.write('<img src="5.jpg">');
else  document.write('<img src="6.jpg">');

That was to remove redundant code rather than writing a bunch of `if ... else` statements. — phuzi, Dec 18 '18 at 11:49

Varghese Mathai · Answer 1 · 2018-12-18T11:56:13.380

2

Use a picturebox and modify its source

<img src="" id="pic-result"/>

javascript code :

var rollResult = Math.floor(Math.random() * 6) + 1;
var pic = document.getElementById("pic-result");
 if (rollResult == 1) pic.setAttribute('src', '1.jpg');
else if (rollResult == 2) pic.setAttribute('src', '2.jpg');
else if (rollResult == 3) pic.setAttribute('src', '3.jpg');
else if (rollResult == 4) pic.setAttribute('src', '4.jpg');
else if (rollResult == 5) pic.setAttribute('src', '5.jpg>');
else  pic.setAttribute('src', '6.jpg');

edited Dec 18 '18 at 11:56

answered Dec 18 '18 at 11:48

Varghese Mathai

411
3
11

1

the src you modify is not correct. Either use the source directly ie `"2.jpg"` or create a new element `` BUT NOT BOTH. It is wrong – Nikos M. Dec 18 '18 at 11:55
1

Thanks pointing it out. I had modified the source code in the question :) – Varghese Mathai Dec 18 '18 at 11:56

score 1 · Answer 2 · answered Dec 18 '18 at 11:47

You should be able to achieve this with innerHTML on #roll-result:

var diceResult = document.querySelector('#roll-result');

function rolldice() {
var rollResult = Math.floor(Math.random() * 6) + 1;
diceResult.innerHTML = '<img src="' + rollResult + '.jpg">';
}

<div id="roll-dice">
    <button type="button" value="Trow dice" onclick="rolldice()">Roll dice</button>
    <span id="roll-result"></span>
</div>

score 0 · Answer 3 · answered Dec 18 '18 at 11:58

You should set the innerHTML of a parent element rather than writing the element onto the page:

<div id="roll-dice">
    <button type="button" value="Trow dice" onclick="rolldice()">Roll dice</button>
    <span id="roll-result"></span>
</div>

JS:

var rollResult = Math.floor(Math.random() * 6) + 1;
var imageContainer = document.getElementById("roll-result");
if (rollResult == 1) imageContainer.innerHTML = '<img src="1.jpg">';
else if (rollResult == 2) imageContainer.innerHTML = '<img src="2.jpg">';
else if (rollResult == 3) imageContainer.innerHTML = '<img src="3.jpg">';
else if (rollResult == 4) imageContainer.innerHTML = '<img src="4.jpg">';
else if (rollResult == 5) imageContainer.innerHTML = '<img src="5.jpg">';
else  imageContainer.innerHTML = '<img src="6.jpg">';

And you can even bypass all the if statements and just use this code, which does exactly the same thing as the above except it is one line long:

document.getElementById("roll-result").innerHTML = '<img src="' + (Math.floor(Math.random() * 6) + 1) + '" />

Hopefully this helps!

program to Roll a dice with picture instead number using javascript

3 Answers3