使用javascript掷带有图片而非数字的骰子的程序
使用javascript掷带有图片而非数字的骰子的程序
提问于 2018-12-18 19:43:02
我试着在骰子上打印出图像，而不仅仅是数字。但当我使用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">');Stack Overflow用户
发布于 2018-12-18 19:58:39
您应该设置父元素的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) + '" />希望这能有所帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53832287
复制相关文章
相似问题
腾讯云开发者
