Changing the color of a element with a button using HTML and JavaScript

Question

I want to change the color of the text using the javascript function but nothing happens when I click on the button. The files are in the same folder.

function click() {
  document.getElementById('test').style.color = "red";
  alert("hello");
}

<p id="test">Hello world</p>
<button type="button" onclick="click()">hello</button>

https://stackoverflow.com/questions/4388443/javascript-function-name-cannot-set-as-click - change the function name — Fabrizio Calderan, Apr 16 '21 at 09:36
The main issue that your script acting on the title instead of a button, you need to add the ID to the button, not the title! and then should work also if you use the latest jQuery release use this way $( "button" ).on( "click", function() { console.log( clicked ); }); — Aleksandrs Krasnovskis, Apr 16 '21 at 09:41
@AleksandrsKrasnovskis Erm no. The main issue is the inline use of a function that matches a JS function called click — mplungjan, Apr 16 '21 at 09:52
but you calling id="test" but it's on title not on the button! — Aleksandrs Krasnovskis, Apr 16 '21 at 10:03
He wants to change the color of the text Hello world when he clicks the button. The code works if the function name is changed to clickMe for example — mplungjan, Apr 16 '21 at 10:06

score 0 · Answer 1 · answered Apr 16 '21 at 09:38

0

You had the logic right, but the naming of the javascript function is the problem.
I'm not sure why, but the click() function is reserved for something else and won't actually call your defined function. If you simply rename your function to something like press() it should actually call your function and change the color of your text

answered Apr 16 '21 at 09:38

J0R1AN

583
7
10

See the dupes for expanations – mplungjan Apr 16 '21 at 09:39

Changing the color of a element with a button using HTML and JavaScript

1 Answers1