HTML图像没有变化

Question

我正在创建一个小型游戏，需要在单击事件时更改图像，但是 我无法更改图片

我尝试使用querySelector更改HTML元素

document.querySelector(".rolling").addEventListener('click',function()
{

// 1.Random Number
dice=Math.floor(Math.random()*6+1);

// 2.Display the Result
var diceDOM=document.querySelector('.dice');
diceDOM.style.display="block";
diceDOM.src="../images/"+dice+".jpg";


//3.Update the roundScore

});

Answer 1

我建议您在关闭body标签之前放置脚本，以防DOM操作脚本编写。 因为在加载脚本之前，尝试使用queryselector查找元素，所以它返回null

查看此

document.querySelector(".rolling").addEventListener('click',function()
{

// 1.Random Number
dice=Math.floor(Math.random()*6+1);

/*  change querySelectorAll to queryselector if you want to use all you have to iterate loop  */
var diceDOM=document.querySelector('.dice');
diceDOM.style.display="block";
diceDOM.src="../images/"+dice+".jpg";


//3.Update the roundScore

});

});

我希望这会对您有所帮助