Control HTML DOM with Javascript without inserting calling functions in tags [duplicate]

Question

Both codes below do the same thing, first using Vanilla JS and second using JQuery. JQuery code do not have to insert anything inside html tags, while JS have to insert the caller "onclick="myFunction()"".

How could I modify the JS code so that I have no need to insert anything inside html tags, exactly like JQuery code does?

Vanilla JS Code:

<!DOCTYPE html>
<html>
<body>
<p onclick="myFunction()">Click on this paragraph</button>
<script>
function myFunction() {
  alert("The paragraph was clicked.");
}
</script>
</body>
</html>

JQuery Code:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").click(function(){
        alert("The paragraph was clicked.");
    });
});
</script>
</head>
<body>
<p>Click on this paragraph.</p>
</body>
</html>

JS is perfectly capable of attaching event listeners. Array.from(document.querySelectorAll("p")).forEach(function(p) {p.addEventListener('click',myFunction);}); function myFunction(e) {alert('You clicked on '+this);} — Niet the Dark Absol
– Niet the Dark Absol, Commented May 3, 2018 at 11:19

Zhenya Telegin · Accepted Answer · 2018-05-03 11:19:36Z

5

You can use addEventListener on your p tag.

getElementsByTagName('p')[0] will return array of p tags, in your case you need add listener to single paragraph (its index 0, thats why we have [0])

<!DOCTYPE html>
<html>
<body>
<p>Click on this paragraph</p>
<script>
  document.getElementsByTagName("p")[0].addEventListener("click", function() {
    alert('The paragraph was clicked.')
  });
</script>
</body>
</html>

answered May 3, 2018 at 11:19

Zhenya Telegin

5872 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sergio trajano Over a year ago

Please, what should I change in order to your code works inside an separate .js file? I tried to do that but a got the following error: "Uncaught TypeError: Cannot read property 'addEventListener' of undefined". I thought if the code works internally it should works externally as well, without any changes.

sergio trajano Over a year ago

Found the awswer: we have to add the following code: window.onload = function () { PASTE HERE THE ORIGINAL INTERNAL JS CODE}. Found the awswer here:stackoverflow.com/questions/42341761/…

user9019817 · Accepted Answer · 2018-05-03 11:20:38Z

4

You just need to select the element and assign it to a variable. Then you can use an onclick function or addEventListener.

var pElem = document.querySelector('p');

pElem.onclick = function() {
alert("The paragraph was clicked.");
}

<p>Click on this paragraph</p>

Or if you want to apply it to all paragraph tags you can loop through the elements and assign a click function:

var pElems = document.querySelectorAll('p');
Array.prototype.forEach.call(pElems, function(el, i){

  el.onclick = function() {
  alert("The paragraph was clicked.");
  }

});

<p>Click on this paragraph</p>

<p>Click on this paragraph</p>

<p>Click on this paragraph</p>

answered May 3, 2018 at 11:20

user9019817

Comments

Răzvan T. · Accepted Answer · 2018-05-03 11:19:38Z

2

I think this might be what you are looking for?

 document.getElementById("buttonID").onclick = function() { 
        alert('Button Clicked'); }

Basically this adds the onclick event to the button with buttonID id.

answered May 3, 2018 at 11:19

Răzvan T.

3604 silver badges19 bronze badges

Comments

CodeF0x · Accepted Answer · 2018-05-03 11:19:50Z

2

addEventListener will help you out:

var p = document.getElementsByTagName('p')[0];
p.addEventListener('click', function myFunction() {
  alert("The paragraph was clicked.");
});

<p>Click on this paragraph</p>

answered May 3, 2018 at 11:19

CodeF0x

2,6676 gold badges19 silver badges29 bronze badges

Comments

Cristian S. · Accepted Answer · 2018-05-03 11:24:44Z

2

The thing is that jQuery internally adds the event listener to the selector with the addEventListener. Thats basically what the onclick attribute does in HTML.

const run = () => console.log('Button 3 clicked');

// js
document.getElementById('b1').addEventListener('click', () => {
  console.log('Button 1 clicked');
})

//jquery
$('#b2').on('click', () => {
  console.log('Button 2 clicked');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b1">Click 1</button>

<button id="b2">Click 2</button>

<button onclick="run()">Click 3</button>

edited May 3, 2018 at 11:24

answered May 3, 2018 at 11:18

Cristian S.

9735 silver badges13 bronze badges

Comments

Michael W. Czechowski · Accepted Answer · 2018-05-03 13:49:53Z

2

First, target your specific HTML element with for instance document.querySelector(). So you can access one specific element by its class for example, just like jQuery does.

Second, add an event listener with .addEventListener() and specify it with the event click.

document.querySelector('.mybutton').addEventListener('click', function(){
  alert('Ouch, that hurts!');
});

<button class="mybutton">Click me</button>

edited May 3, 2018 at 13:49

answered May 3, 2018 at 11:21

Michael W. Czechowski

3,4452 gold badges26 silver badges52 bronze badges

Collectives™ on Stack Overflow

Control HTML DOM with Javascript without inserting calling functions in tags [duplicate]

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related