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> 

Answer 1

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> 

Answer 2

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) {

}