программа, чтобы бросить кости с картинкой вместо числа, используя JavaScript - PullRequest
Новая
       12

программа, чтобы бросить кости с картинкой вместо числа, используя JavaScript

0 голосов
/ 18 декабря 2018

Я пытаюсь распечатать изображения на кубике, а не только на номер.Но когда я использую 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 ]

0 голосов
/ 18 декабря 2018

Используйте коробку с картинками и измените ее источник 

<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');
0 голосов
/ 18 декабря 2018

Вы должны установить 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) + '" />

Надеюсь, это поможет!

0 голосов
/ 18 декабря 2018

Вы должны быть в состоянии достичь этого с 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>
...