使用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">');回答 3
Stack Overflow用户
发布于 2018-12-18 19:48:13
使用图片框并修改其源
<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');Stack Overflow用户
发布于 2018-12-18 19:47:57
您应该能够通过#roll-result上的innerHTML实现这一点
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>
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
复制相关文章
相似问题
腾讯云开发者
