javascript - Replacing onClick() with addEventListener()

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

Before with onclick() working Perfectly:

html code

<!DOCTYPE html>
<html>
<head>

<title>Splitting number</title>

<script type="text/javascript" src="script.js">
</script>
</head>
<body>
  <form id="myForm" action="" name="myForm">
  <table border="1">
    <tr>
      <td>Enter a phone number<br> [in the form (555) 555-5555]</td>
      <td><input name="input" type="text" size="40"></td>
    </tr>
    <tr>
      <td><input type="button" value="Split" onclick="parseNumber()"></td>
    </tr>
    <tr>
      <td>Area code:</td>
      <td><input name="areaCode" type="text" size="5"></td>
    </tr>
    <tr>
      <td>Number:</td>
      <td><input name="number" type="text" size="8"></td>
    </tr>
  </table>
</form>
</body>
</html>

javascript code:

function parseNumber() {

var myForm = document.getElementById( "myForm" );

myForm.areaCode.value = "";

myForm.number.value = "";

var pleteNumber = myForm.input.value.replace(/\s/g, '');

var areaCode = pleteNumber.substr(1,3);

var tokens2 = pleteNumber.substr(5).split( "-" );

myForm.areaCode.value = areaCode;

myForm.number.value = tokens2[0] + "-" + tokens2[1];

}

after, Not working:

html code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Splitting number</title>

<script type="text/javascript" src="script.js"></script>
</head>
<body>
  Enter a phone number: in the form (555) 555-5555]
  <input name="input" type="text" size="40" id="number" ><br>
  <input type="button" value="Split" id="myBtn"><br><br>

  Area code: <input name="areaCode" type="text" size="5" id="areaCode"><br>

  Number: <input name="number" type="text" size="8" id="anotherNumber">
</body>
</html>

javascript code

var pleteNumber = document.getElementById("number");
x = document.getElementById( "myBtn" );
function parseNumber() {


  x.addEventListener("click", parseNumber);
  pleteNumber.replace(/\s/g, '');
  var areaCode = pleteNumber.substr(1,3);

  var tokens2 = pleteNumber.substr(5).split( "-" );

  document.getElementById("areaCode").innerHTML = areaCode.toString();

  document.getElementById("anotherNumber").innerHTML = tokens2[0].toString() + "-" + tokens2[1].toString();

}

Before with onclick() working Perfectly:

html code

<!DOCTYPE html>
<html>
<head>

<title>Splitting number</title>

<script type="text/javascript" src="script.js">
</script>
</head>
<body>
  <form id="myForm" action="" name="myForm">
  <table border="1">
    <tr>
      <td>Enter a phone number<br> [in the form (555) 555-5555]</td>
      <td><input name="input" type="text" size="40"></td>
    </tr>
    <tr>
      <td><input type="button" value="Split" onclick="parseNumber()"></td>
    </tr>
    <tr>
      <td>Area code:</td>
      <td><input name="areaCode" type="text" size="5"></td>
    </tr>
    <tr>
      <td>Number:</td>
      <td><input name="number" type="text" size="8"></td>
    </tr>
  </table>
</form>
</body>
</html>

javascript code:

function parseNumber() {

var myForm = document.getElementById( "myForm" );

myForm.areaCode.value = "";

myForm.number.value = "";

var pleteNumber = myForm.input.value.replace(/\s/g, '');

var areaCode = pleteNumber.substr(1,3);

var tokens2 = pleteNumber.substr(5).split( "-" );

myForm.areaCode.value = areaCode;

myForm.number.value = tokens2[0] + "-" + tokens2[1];

}

after, Not working:

html code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Splitting number</title>

<script type="text/javascript" src="script.js"></script>
</head>
<body>
  Enter a phone number: in the form (555) 555-5555]
  <input name="input" type="text" size="40" id="number" ><br>
  <input type="button" value="Split" id="myBtn"><br><br>

  Area code: <input name="areaCode" type="text" size="5" id="areaCode"><br>

  Number: <input name="number" type="text" size="8" id="anotherNumber">
</body>
</html>

javascript code

var pleteNumber = document.getElementById("number");
x = document.getElementById( "myBtn" );
function parseNumber() {


  x.addEventListener("click", parseNumber);
  pleteNumber.replace(/\s/g, '');
  var areaCode = pleteNumber.substr(1,3);

  var tokens2 = pleteNumber.substr(5).split( "-" );

  document.getElementById("areaCode").innerHTML = areaCode.toString();

  document.getElementById("anotherNumber").innerHTML = tokens2[0].toString() + "-" + tokens2[1].toString();

}

Share Improve this question edited Sep 23, 2017 at 14:53 kyun 10.3k9 gold badges35 silver badges79 bronze badges asked Sep 23, 2017 at 14:23 Abuzar Manzoor 4095 silver badges14 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 2

You need to add the `event listener` outside the `function`.

The listener is listening (clues in the name) for a mouse 'click' event on that element. When the event happens i.e you click on the element, it calls the function that it is assigned, in your case: parseNumber.

So since you are adding the event listener inside the function, it never gets added (as the function never gets called).

It should all work if you move the lines:

var x = document.getElementById( "myBtn" );
x.addEventListener("click", parseNumber);

outside the function. :)

I thnik no one actually read the question, if you already had a working example then changing onclick to eventListener is no problem:

var parseNum = document.getElementById('parse-number');

function parseNumber() {

  var myForm = document.getElementById( "myForm" );

  myForm.areaCode.value = "";

  myForm.number.value = "";

  var pleteNumber = myForm.input.value.replace(/\s/g, '');

  var areaCode = pleteNumber.substr(1,3);

  var tokens2 = pleteNumber.substr(5).split( "-" );

  myForm.areaCode.value = areaCode;

  myForm.number.value = tokens2[0] + "-" + tokens2[1];

}
    
parseNum.addEventListener("click", parseNumber);

<form id="myForm" action="" name="myForm">
  <table border="1">
  <tr>
    <td>Enter a phone number<br> [in the form (555) 555-5555]</td>
    <td><input name="input" type="text" size="40"></td>
  </tr>
  <tr>
    <td><input type="button" value="Split" id="parse-number"></td>
  </tr>
  <tr>
    <td>Area code:</td>
    <td><input name="areaCode" type="text" size="5"></td>
  </tr>
  <tr>
    <td>Number:</td>
    <td><input name="number" type="text" size="8"></td>
  </tr>
  </table>
</form>

Change your code to this where eventListener is added outside the bounded function. Otherwise it will repeatedly bind an eventListener to the button.

Also place your script.js on the bottom of the HTML page. Because when the script executed the DOM element is not found since the DOM is not rendered at the script execution time.

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Splitting number</title> 
</head>
<body>
Enter a phone number: in the form (555) 555-5555]
<input name="input" type="text" size="40" id="number" ><br>
<input type="button" value="Split" id="myBtn"><br><br>

Area code: <input name="areaCode" type="text" size="5" id="areaCode"><br>

Number: <input name="number" type="text" size="8" id="anotherNumber">

<script type="text/javascript" src="script.js"></script>

</body>
</html>

JavaScript

var pleteNumber = document.getElementById("number");
var x = document.getElementById( "myBtn" );

function parseNumber() {

pleteNumber.replace(/\s/g, '');
var areaCode = pleteNumber.substr(1,3);

var tokens2 = pleteNumber.substr(5).split( "-" );

document.getElementById("areaCode").innerHTML = areaCode.toString();

document.getElementById("anotherNumber").innerHTML = tokens2[0].toString() + "-" + tokens2[1].toString();

}

x.addEventListener("click", parseNumber);

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Replacing onClick() with addEventListener() - Stack Overflow

3 Answers 3

You need to add the `event listener` outside the `function`.

与本文相关的文章

评论列表(0)

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

3 Answers 3

You need to add the event listener outside the function.

与本文相关的文章

评论列表(0)

You need to add the `event listener` outside the `function`.