程序使用javascript滚动骰子与图片而不是数字

Question

我试图在骰子上打印出图像，而不仅仅是数字。但是当我使用document.write时，它只是打开一个新选项卡，并显示图片。我应该用什么按钮打印出来？

<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">');

Answer 1

使用图片框并修改其来源

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

javascript代码：

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');

Answer 2

你应该能够用innerHTML上的#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>

Answer 3

您应该设置父元素的innerHTML，而不是将元素写入页面：

<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">';

你甚至可以绕过所有的if语句，只使用这个代码，它与上面的代码完全相同，只不过它只有一行：

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

希望这有帮助！