I tried accessing my image source with document.querySelector but unfortunately it throws an error ReferenceError: document is not defined
HTML code :
<body>
<div class="container">
<h1>Refresh !</h1>
<div class="dice">
<p>Player 1</p>
<img src="images/dice1.png" alt="diceimage">
</div>
<div class="dice">
<p>Player 2</p>
<img src="images/dice1.png" alt="diceimage">
</div>
</div>
<script src="index.js" charset="utf-8" type="text/javascript"></script>
</body>
JavaScript code:
//player1
var randomNumber1 = Math.floor(Math.random() * 6) + 1;
var randomImage1 = "images/"+"dice"+randomNumber1+".png";
document.querySelectorAll("img")[0].setAttribute("src",randomImage1);
//player2
var randomNumber2 = Math.floor(Math.random() * 6) + 1;
var randomImage2 = "images/"+"dice"+randomNumber2+".png";
document.querySelectorAll("img")[1].setAttribute("src",randomImage2);
//condition
if (randomNumber1 > randomNumber2) {
document.querySelector("h1").innerHTML = "Player 1 Wins";
} else if (randomNumber1 < randomNumber2){
document.querySelector("h1").innerHTML = "Player 2 Wins";
} else {
document.querySelector("h1").innerHTML = "Draw";
}
Error :
document.querySelectorAll("img")[0].setAttribute("src",randomImage1); ^
ReferenceError: document is not defined at Object. (G:\WebDevelopmentFolder\GITHUB\DiceGame\index.js:5:1)
?[90m at Module._compile (internal/modules/cjs/loader.js:1063:30)?[39m ?[90m at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:1 0)?[39m ?[90m at Module.load (internal/modules/cjs/loader.js:928:32)?[39m ?[90m at Function.Module._load (internal/modules/cjs/loader.js:769:14)?[39m ?[90m at Function.executeUserEntryPoint [as runMain] (internal/modules/run_ma in.js:72:12)?[39m ?[90m at internal/main/run_main_module.js:17:47?[39m
