Onclick function error, function isn't defined

Question

Over the recent days I've been trying to make buttons that changes a text's color by using

document.querySelector.('class name').style.color

in a function while using onclick to put that function in the button, but it always says my function changeColor isn't defined. Could some of you help me please? It also says there's an unexpected token, please help me with that as well!

<body>
    <div class="box">
      <h1> Hello</h1>
    </div>
       <script>
function changeColor(){
  document.querySelector.('.box').style.color = 'pink';
}
    </script>
    <button class="pink">Pink</button>
  </body>
</html>

You have an extra dot in `querySelector.('.box')`, should be `document.querySelector('.box').style.color = 'pink';` and you never attacth a listener so your function is never triggered. — pilchard, May 20 '22 at 16:55
Does this answer your question? [How to add javascript onclick event listener to container div?](https://stackoverflow.com/questions/69859249/how-to-add-javascript-onclick-event-listener-to-container-div) — snnsnn, May 20 '22 at 16:57

Scott Marcus · Answer 1 · 2022-05-20T17:00:51.693

Well, there's nothing in your code here that would even try to call your function so I can't say for sure what your issue is, but to hook up the click event of the button to your function, you use: .addEventListener().

Now, you do have a typo:

document.querySelector.('.box') // <-- The dot before ( is wrong

And your script element should be the last thing before you close the body tag so that by the time the script runs, all the HTML will have been parsed into memory.

<div class="box">
  <h1> Hello</h1>
</div>
<button class="pink">Pink</button>
 
<script>
  document.querySelector("button.pink").addEventListener("click", changeColor);
  function changeColor(){
    document.querySelector('.box').style.color = 'pink';
  }
</script>

And while this works, inline styles should be avoided whenever possible because they are the hardest type of CSS styling to override and lead to duplication of code. Instead, use CSS classes whenever you can (almost always) as shown here:

.pinkText { color:pink; }

<div class="box">
  <h1> Hello</h1>
</div>
<button class="pink">Pink</button>
 
<script>
  // Get your DOM element references just once, not every time the function runs:
  const box = document.querySelector('.box');
  document.querySelector("button.pink").addEventListener("click", changeColor);
  function changeColor(){
    box.classList.add('pinkText');
  }
</script>

score 0 · Answer 2 · answered May 20 '22 at 17:04

0

<!DOCTYPE html>
<html>
<body>
    <div class="box">
      <h1> Hello</h1>
    </div>
    <button class="pink" onclick="changeColor()">Pink</button>
  </body>
       <script>
function changeColor(){
  document.querySelector('.box h1').style.color = 'pink';
}
    </script>
</html>

answered May 20 '22 at 17:04

Radhey

1
1

Please don't just provide code for your answer. What about your post answers the question, and why? – Lee Taylor May 20 '22 at 21:59

score 0 · Answer 3 · answered May 21 '23 at 02:46

There are two simple mistakes in your code that can be easily fixed.

There is an extra dot before the parenthesis in your function. Since querySelector is a function, the parenthesis with the attributes come directly after it, as shown below.

document.querySelector('.box').style.color = 'pink';

There isn't anything to trigger the onclick event. The simplest way to fix this is to add an onclick attribute to your button, as shown below:

<button class="pink" onclick="changeColor()">Pink</button>

I hope that this can help.

Onclick function error, function isn't defined

3 Answers3