Change the button text/value on click with javascript

Question

My goal is to include Element.ID within function and then, fetch their value or text. It is important to reduce code lines as well because there are many others buttons with the same rule.

So, I tried the below code and many others to get the appropriate results.

How do I fix it?

var el = document.getElementById("p1");
var id = document.getElementById("p1").id;

el.addEventListener("click", modifyText(id), false);

function modifyText(e) {
  var x = e.value;
  if (x < 40) {
    e.value = 1;
  }
};

<input id="p1" type="button" class="button" value=0>
<input id="pn" type="button" class="button" value=0>

Here it is.. <html> <head> </head> <body> <input id = "p1" type="button" class="button" value=0> <input id = "pn" type="button" class="button" value=0> <MyScript> </body> </html> — hbbz040
– hbbz040, Commented Jul 11, 2017 at 15:03

Scott Marcus · Accepted Answer · 2017-07-11 15:12:18Z

Well, the second argument to .addEventListener() has to be a function reference, not "loose" code to execute. So, if you want to call another function and pass it an argument, the line should be:

el.addEventListener("click", function(){modifyText(id)}, false);

Now, you are making quite a bit out of the element's id, but you really only need the id to get your initial reference to the element. Once you've got that, you can just work with it.

You've got a lot of unnecessary code here. Also, I'm assuming (perhaps incorrectly) that you want both buttons to have the same click behavior, so that's what I'm proceeding with.

// You only need to get a reference to the element in question
var el1 = document.getElementById("p1");
var el2 = document.getElementById("pn");

// Set up each button to use the same click callback function
// The second argument needs to be a function reference
el1.addEventListener("click", modifyText);
el2.addEventListener("click", modifyText);

function modifyText(){
 // When inside of an event handler, "this" refers to the element
 // that triggered the event.
 if (this.value < 40 ) {
  this.value = 1;
 }
}

<input id = "p1" type="button" class="button" value=0> 
<input id = "pn" type="button" class="button" value=0>

Patrick Evans · Accepted Answer · 2017-07-11 15:09:57Z

Event listener callbacks tend to be executed with the execution context of the element (unless otherwise modified, or using Arrow functions). This means you can just use this keyword to refer to the element. So inside the callback you could use this.value / this.innerText (depending on type of element)

function modifyText() {
 var x = this.value;
 if ( x < 40 ) {
  this.value = 1;
 }
}

Also the way you called addEventListener was wrong.

.addEventListener("click", modifyText(id), false);

This will execute modifyText immediately and use the return value of the function as the callback. And since your function doesnt return anything nothing is set as the callback.

If you wanted to pass a variable to an event callback you would do it like the following

el.addEventListener("click", modifyText.bind(el,yourValue),false);

You would then need to modify the function definition

function modifyText(passedValue,event) {

}

Collectives™ on Stack Overflow

Change the button text/value on click with javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related