I can't set another value of buttons with JavaScript

[DanhBui 0]

Hello everybody, I'm taking Stef's "Beginners JavaScript" course and saw how he set different text that appears inside the buttons. However when I tried it myself, nothing happened. I've checked many times but still couldn't find out what I did wrong. Below is my code, please help me fix it. Thank you very much!

- Here's the image version (to make the code less boring and easier to read compared to the text version)

• Here's the code in my html file:

• Here's the code in my external js file:

- And here's the text version in case you need to copy:

<button id="functionExperiment">Do it!</button>

function functionExperiment () {
    var functionEx = document.getElementById("functionExperiment");
    functionEx.value = "Oh Yeah!";
    alert(document.title);
}

document.getElementById("functionExperiment").onclick = function () {
    functionExperiment ();
}

[administrator 460]

Hi,

You made a couple of mistakes, see the fixed code below:

function functionExperiment () {
    var functionEx = document.getElementById("functionExperiment");
    functionEx.value = "Oh Yeah!";
    alert(functionEx.value);
}

document.getElementById("functionExperiment").onclick = function () {
    functionExperiment ();
}

<button id="functionExperiment" onClick="functionExperiment()">Do it!</button>

1. In your you were calling alert for the documents/page's title, where I think you wanted the button's value.

2. You did not have an onClick event-handler on your button. I used inline event-handler call to keep it simple. Later on in the course, I should you a better way.

Stef

[DanhBui 0]

Hi Stef, I'm very happy that you answered me directly. But I think you misunderstood what I meant because I didn't say it very clearly. I watched you reseting the value of the button in Chapter 7 - lesson 3 of the course and this is what happened when I run your code:

At first, the text in the button was "Do it again!"

After I clicked on the button, in turned into "Done looping!" like this:

But I knew what I did wrong. I just took a good look at your code and found out that you used "input", not "button", and you set the value of the "input" tag to "Do it again!".

What I did was using the "button" tag and then set the text to "Do it!" and then reset its value, what didn't exist. Even if it did existed, it couldn't appear on the surface of the button. I tried again and got the result I wanted!

 => 

Sorry for the "alert" thing. I just put it there with no reason.

Edited October 23, 2017 by BaoDanh
I didn't finish my thought

[administrator 460]

Ahh ... well, at least you figured it out!

Stef