title: Change the button text/value on click with javascript
body: <p><strong>My goal</strong> is to include <em>Element.ID</em> 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.</p>
  
  <p>So, I tried the below code and many others to get the appropriate results.</p>
  
  <p>How do I fix it? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &lt; 40) {
      e.value = 1;
    }
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="p1" type="button" class="button" value=0&gt;
  &lt;input id="pn" type="button" class="button" value=0&gt;</code></pre>
  </div>
  </div>
  </p>