Jump to content
Killersites Community
BaoDanh

I can't set another value of buttons with JavaScript

Recommended Posts

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:

image.png.3d00442178698f8c9c149c7052ee36b5.png

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

image.png.8f3378fdbcc12b01002e9978f6a38c33.png

image.png.0ca561d8a792c6f834701857a1141108.png

- 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 ();
}

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!"

image.png.a4c3cd55494432cafb39ab87c19b792f.png

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

image.png.ee316994c55f32a57b15a7bbccd46e71.png

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!

image.png.e5b08fcab9cc9f864853bf850095fcff.png => image.png.d8ee350162036bbe5f23156947bed350.png

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

Edited by BaoDanh
I didn't finish my thought

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×