Trying to randomize dice image by setting an HTML attribute in my JS

JavaScript
1

Hello everyone. Any clue why the following JS code isn’t going to work for randomizing the dice image by file name? The image file names are formatted dice1.png, dice2.png, etc, all the way through 6. The initial state of the image source links to dice6.png in my file path and appears correctly in the browser. I’m getting a syntax error saying that the variable randomNumber1 was already declared, but I only see this being done once in my code and I’ve done a hard reload in the browser just in case. The same image is continually shown in the browser upon refreshing, but the intent of the code is to randomize the numbers 1-6 in my file name (using string interpolation) and set that randomized value equal to the image source, thereby updating the image that appears on the page. I am brand new at DOM manipulation, so I would appreciate any input that can be provided.

JS:

let randomNumber1 = Math.floor(Math.random()*6) + 1;
document.querySelector(".dice, .img1").setAttribute("src", `C:...path...images\dice${randomNumber1}.png`);

Relevant HTML:

  <body>
    <div class="container">
      <h1>Refresh Me</h1>
      <div class="dice">
        <p>Player 1</p>
        <img class="img1" src="C:...pathToFile...\images\dice6.png">
      </div>
      <div class="dice">
        <p>Player 2</p>
        <img class="img2" src="C:...pathToFile...\images\dice6.png">
      </div>
    </div>
2

I think your selector is wrong. Try to remove comma.

1 Like
3

On what condition should the dice be rerolled?

4

He is also selecting for two different classes which I do not think works, but I believe that he really only needs to be selecting for the image as is.

1 Like
5

If he removes comma, then he’ll be selecting .img1 inside .dice. With comma, I’m not sure what he’s actually searching for :man_shrugging:

2 Likes
6

Removing the comma does make sense. I didn’t include this initially but a comment in another forum seemed to indicate it should be there. I intended to select the img1 class within the dice class. However, now I am getting Uncaught TypeError: Cannot read property ‘setAttribute’ of null. When I check the getAttribute, I see the full path and the variable properly interpolated into the string text spelling out the path.

7

How does your selector look?

<div class="parent">
  <img class="img" src="" alt="">
</div>

const img = document.querySelector('.parent .img')

img.setAttribute('src', 'https://via.placeholder.com/80')
1 Like
8

As of now, this is my JS code:

let randomNumber1 = Math.floor(Math.random()*6) + 1;
document.querySelector(".dice .img1").setAttribute("src", `C:...path...images\dice${randomNumber1}.png`);
9

How are you running the JS? Where is it loaded in the HTML?

You need to make sure the DOM is ready. If you try to select an element before the DOM is ready you will not get the element.

Some options:

  1. Load the script at the bottom of the HTML before the closing </body> tag.

  2. Or, use the defer attribute.

  3. Or, wrap your code inside a DOMContentLoaded handler.

If you create a Codepen or Codesandbox with your code we can better help. If you use Codepen you will not be able to use file paths to the images so just use some online image placeholder instead.

1 Like
10

Thanks for taking the time. I can’t access the full body of code from my current location, but I can tell you that the script tag is at the bottom of the body. I made sure of that.

11

We do not have enough of your code.

As far as I can tell, there is nothing in the current code you have posted that should prevent you from getting the image element or changing the source of it.

https://jsfiddle.net/fvq3pg8o/

1 Like
12

I appreciate everyone taking the time. It turns out my file path was referencing the full path (C:\Users...images/dice${}.png), but when I reduced it to simply images/dice${randomNumber1}.png the issue went away. I still haven’t figured out why this is, but I’m going to make note and do some research on linking to local files. Thanks again for everything you did, and thanks lasjorg for making the jsfiddle code for me to compare.

13

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.