CODEWITHSUNDEEP
javascripthtml
Abuzar Manzoor
Abuzar Manzoor

Reputation: 409

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 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];

}

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 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();

}

Upvotes: 1

Views: 5466

Answers (3)

Fuross
Fuross

Reputation: 518

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 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];

}
    
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>

Upvotes: 2

Thusitha
Thusitha

Reputation: 3511

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 completeNumber = document.getElementById("number");
var x = document.getElementById( "myBtn" );

function 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();

}

x.addEventListener("click", parseNumber);

Upvotes: 1

Joe Iddon
Joe Iddon

Reputation: 20414

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. :)

Upvotes: 2

Related Questions