Can anyone help a beginner as to why this simple JS wont work?

Question

this is a simple color change project and on the surface it looks like it should work but either the JS file isn't loading or ive made a simple error, i cant work it out! Any help appreciated! The idea is you press the button ands the BG changes to a random hex color and the text changes to the hex code.

HTML

<!DOCTYPE html>

<hmtl lang="en">
  <head>
    <script src="script.js"></script>
  </head>
  <body>
    <h1 id="text">Background Color</h1>
    <button id="button">Change BG-Color</button>
  </body>
</hmtl>

javascript

let button = document.getElementById('button');
let text = document.getElementById('text');
let body = document.querySelector('body');
let number = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];

button.addEventListener('click', colorChange);

function colorChange() {
  let hex = '#';

  for (let i = 0; i < 6; i++) {
    const index = Math.floor(Math.random() * number.length);
    hex += number[index];
  }
  text.textContent = hex;
  body.style.backgroundColor = hex;
}

In for loop, instead of 1++, you need to write i++, and in addEventListener, replace alert with colorChange. Please read more about forLoops here - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for — Ayush Sharma, Dec 01 '20 at 10:28
always read documentation https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener then fix that loop increament — Girish Sadanandan, Dec 01 '20 at 10:29
thank you, i have changed the 1 to and i (missed it) anf the function name in the event listener. its till not working! is there anyhting else i need to do to link to the page? my post is the entire code — Dan Wilstrop, Dec 01 '20 at 10:34
you will need to learn debugging a program. check your developer console's output (F12 in most browsers) and fix the errors shown there. if there are no errors, either step through your code lines with the debugger or write out some console.logs — Markus Dresch, Dec 01 '20 at 10:39
you mispelled html to hmtl, not sure if it helps but try fix it first — Dimitrij Agal, Dec 01 '20 at 10:55

score 0 · Answer 1 · edited Dec 01 '20 at 10:40

Here for (let i=0; i<6; 1++) change the 1++ to i++. the incremeentation is done on the i variable and will add 1 on the actual value which is 0 it will then pass to 1

Where is the alert function found in addeventlistener

<!DOCTYPE html>

<hmtl lang="en">
    <head>
        <script src="script.js"></script>
    </head>
    <body>
        <h1 id="text">Background Color</h1>
        <button id="button">Change BG-Color</button>


        <script>
            let button = document.getElementById('button');
            let text = document.getElementById('text');
            let body = document.querySelector('body');
            let number = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];

            button.addEventListener('click', colorChange); //<-- not alert

            function colorChange() {
                let hex = '#';

                for (var i = 0; i < 6; i++) { //<-- not 1++
                    const index = Math.floor(Math.random() * number.length);
                    hex += number[index];
                }
                text.textContent = hex;
                body.style.backgroundColor = hex;
            }
        </script>

    </body>
</hmtl>

thank you, again im unsure whats going on as ive copied and pasted that entire working snippet and it fails to work in my browser — Dan Wilstrop, Dec 01 '20 at 11:03

Romaric Aboule · Answer 2 · 2020-12-01T11:24:08.360

you also need to add a class to the body. the snipet down here works pretty well

<!DOCTYPE html>

<hmtl lang="en">
  <head>
    <script src="script.js"></script>
  </head>
  <body class="body">
    <h1 id="text">Background Color</h1>
    <button id="button">Change BG-Color</button>
    <script>
    var button = document.getElementById("button")
var text = document.getElementById("text")
var body = document.querySelector('body')
var number = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F']
button.addEventListener('click', colorChange);
function colorChange() {
    var hex = "#"
    for (var i=0; i<6; i++){
       const index = Math.floor(Math.random()*number.length)
       hex += number[index]
    }
    text.textContent = hex;
  body.style.backgroundColor = hex;
}
</script>
  </body>
</hmtl>

I must be doing something else wrong away from the code, ive just directly copied and pasted both of those working code block and it still doesn't work. Thank you — Dan Wilstrop, Dec 01 '20 at 10:53

score 0 · Answer 3 · answered Dec 01 '20 at 11:13

0

I got this working by using onclick= on the button element of the HTML and grouping the JS into one function. This is a workaround but proves the code does work.

Is there a reason my addEventListener wouldn't directly work with my code above?

answered Dec 01 '20 at 11:13

Dan Wilstrop

355
1
4
12

Welcome to Stack Overflow Dan Wilstrop. However, this does not provide an answer to the question.You can [search for similar questions](//stackoverflow.com/search), or refer to the related and linked questions on the right-hand side of the page to find an answer. If you have a related but different question, [ask a new question](//stackoverflow.com/questions/ask), and include a link to this one to help provide context. See: [Ask questions, get answers, no distractions](//stackoverflow.com/tour) – 4b0 Dec 01 '20 at 12:27

score 0 · Answer 4 · answered Dec 01 '20 at 11:30

the resons why it is not working is because you don't pay to much attension to your code reads your tutorials again. the first code i changed you forgot to add the class to the body but in the javascript you called it with a query selectorand also in the for loop you mistakenly replace the value to increment with 1 and at the end the code i post was not working am sure bucause you copied the javascript code to a javascript file and the html to the html file and forgot to call the javascript into the html file because in my code i didnot do it veryfy your code very well if there is not some errors or if not thing is forgotten before posting it

score 0 · Accepted Answer · answered Dec 01 '20 at 11:36

Initially, as your script is imported in <head>, it's trying to find your button even when it's not rendered yet! So, you need to either take your script down in the body or some mechanism to run your script on document ready.

So, using your script in the body solves your problem -

let button = document.getElementById('button');
let text = document.getElementById('text');
let body = document.querySelector('body');
let number = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];

button.addEventListener('click', colorChange);

function colorChange() {
  let hex = '#';

  for (let i = 0; i < 6; i++) {
    const index = Math.floor(Math.random() * number.length);
    hex += number[index];
  }
  text.textContent = hex;
  body.style.backgroundColor = hex;
}

<!DOCTYPE html>

<html lang="en">

<body>
    <h1 id="text">Background Color</h1>
    <button id="button">Change BG-Color</button>
    <script src="script.js"></script>
</body>

</html>

And, just a minor update in the tag is to make hmtl as html

Here's the more reference about similar context for you.

Can anyone help a beginner as to why this simple JS wont work?

5 Answers5