0

I am building a dice game and I am trying to insert an image containing text in the image src through JavaScript

Here is my JavaScript Code:

var randomNumber = 6;

//      Player 1
var p1 = () => {
    var randomNo1 = Math.floor((Math.random()*randomNumber)+1);
    return randomNo1;
}
var diceP1 = p1();

var test1 = document.getElementsByClassName("img1").src = `./images/dice${diceP1}.png`;
console.log(test1);


//      Player 2
var p2 = () => {
    var randomNo2 = Math.floor((Math.random()*randomNumber)+1);
    return randomNo2;
}
var diceP2 = p2();

var test2 = document.getElementsByClassName("img2").src = "./images/dice"+diceP2+".png";
console.log(test2);

//      Output
if(diceP1 > diceP2){
    var result = "Player 1 wins";
    console.log(result);
} else if(diceP1 < diceP2){
    var result = "Player 2 wins";
    console.log(result);;
} else{
    var result = "Game drawn";
    console.log(result);;
}

Here is my HTML Code:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Dicee</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Lobster" rel="stylesheet">

  </head>
  <body>

    <div class="container">
      <h1>Refresh Me</h1>

      <div class="dice">
        <p>Player 1</p>
        <img class="img1" src="">
      </div>

      <div class="dice">
        <p>Player 2</p>
        <img class="img2" src="">
      </div>

    </div>


  </body>

  <footer>
    www  Dice Game  com
  </footer>

  <script src="index.js"></script>
</html>

Whenever I start Live Server it doesn't do anything and when I am just running JavaScript file to see the output of the following line:

var test2 = document.getElementsByClassName("img2").src = "./images/dice"+diceP2+".png";

The system gives the following ERROR:

$ node index.js
/home/ahmed/Tutorials/Dicee Challenge - Starting Files/index.js:10
var test1 = document.getElementsByClassName("img1").src = `./images/dice${diceP1}.png`;
            ^

ReferenceError: document is not defined
    at Object.<anonymous> (/home/ahmed/Tutorials/Dicee Challenge - Starting Files/index.js:10:13)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:23:47

Node.js v18.12.1
Dai
  • 141,631
  • 28
  • 261
  • 374
Ahmed Hassan
  • 47
  • 4
  • I've retitled your question because you aren't actually setting any _text_, but actually images-containing-text, which is different. – Dai Feb 05 '23 at 19:10
  • The error (at the end of your post) is that you're running **client-side** JavaScript (that uses `document`) within a **server-side** context (i.e. within NodeJS). That won't work: you cannot manipulate the DOM server-side for what (I hope) should be obvious reasons. – Dai Feb 05 '23 at 19:11
  • The main problem is that your code incorrectly assumes `getElementsByClassName` returns a single element. It doesn't. It returns a collection that you need to navigate through in order to get a single (or multiple...) elements out of. Note how the name is `getElement**s**ByClassName` and not `getElementByClassName`. – Dai Feb 05 '23 at 19:13

0 Answers0