title: Replacing onClick() with addEventListener()
body: <p>Converting oclick() with addEventListener(), i have tried multiple times, But no Success. Can anyone help please. i have read in the book, that onlick() is not w3 standard, Any help will highly be aprreciated </p>
  
  <p>Before with onclick() working Perfectly:</p>
  
  <p><strong>html code</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;title&gt;Splitting number&lt;/title&gt;
  
  &lt;script type="text/javascript" src="script.js"&gt;
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;form id="myForm" action="" name="myForm"&gt;
    &lt;table border="1"&gt;
      &lt;tr&gt;
        &lt;td&gt;Enter a phone number&lt;br&gt; [in the form (555) 555-5555]&lt;/td&gt;
        &lt;td&gt;&lt;input name="input" type="text" size="40"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;input type="button" value="Split" onclick="parseNumber()"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Area code:&lt;/td&gt;
        &lt;td&gt;&lt;input name="areaCode" type="text" size="5"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Number:&lt;/td&gt;
        &lt;td&gt;&lt;input name="number" type="text" size="8"&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>javascript code:</strong></p>
  
  <p>function parseNumber() {</p>
  
  <pre><code>var myForm = document.getElementById( "myForm" );
  
  myForm.areaCode.value = "";
  
  myForm.number.value = "";
  
  var completeNumber = myForm.input.value.replace(/\s/g, '');
  
  var areaCode = completeNumber.substr(1,3);
  
  var tokens2 = completeNumber.substr(5).split( "-" );
  
  myForm.areaCode.value = areaCode;
  
  myForm.number.value = tokens2[0] + "-" + tokens2[1];
  
  }
  </code></pre>
  
  <p><strong>after, Not working:</strong></p>
  
  <p><strong>html code:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Splitting number&lt;/title&gt;
  
  &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    Enter a phone number: in the form (555) 555-5555]
    &lt;input name="input" type="text" size="40" id="number" &gt;&lt;br&gt;
    &lt;input type="button" value="Split" id="myBtn"&gt;&lt;br&gt;&lt;br&gt;
  
    Area code: &lt;input name="areaCode" type="text" size="5" id="areaCode"&gt;&lt;br&gt;
  
    Number: &lt;input name="number" type="text" size="8" id="anotherNumber"&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>javascript code</strong></p>
  
  <pre><code>var completeNumber = document.getElementById("number");
  x = document.getElementById( "myBtn" );
  function parseNumber() {
  
  
    x.addEventListener("click", parseNumber);
    completeNumber.replace(/\s/g, '');
    var areaCode = completeNumber.substr(1,3);
  
    var tokens2 = completeNumber.substr(5).split( "-" );
  
    document.getElementById("areaCode").innerHTML = areaCode.toString();
  
    document.getElementById("anotherNumber").innerHTML = tokens2[0].toString() + "-" + tokens2[1].toString();
  
  }
  </code></pre>