Jump to content

I can't set another value of buttons with JavaScript


DanhBui

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

Link to comment
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

Link to comment
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
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...