How to access multiple html file elements from same external javascript file

Question

This is what I want to know if we can access multiple html file elements from the same external javascript file.

Scenario:

one.html

<div id="one" onclick="oneDIV"></div>

two.html

<div id="two" onclick="twoDIV"></div>

script.js

function oneDIV(){
    var instance = document.getElementById("one");
}


function TwoDIV(){
    var instance = document.getElementById("two");
}

The question would be more specific if I ask One JS File for Multiple Pages

Can you expand on your question? How are the html files loaded and how is the script used — Adam Heath
– Adam Heath, Commented Feb 6, 2014 at 8:51

Dropout · Accepted Answer · 2014-02-06 08:53:32Z

1

If I understood your question correctly, you want to have a single function which does something with the clicked DIV.

You can achieve this with the this keyword. this references the DOM object from which the event was triggered in this case.

For example if you want to alert the DIV's content you can do it like this:

<div id='one' onClick='shout()'>foo</div>
<div id='two' onClick='shout()'>bar</div>

<script type='text/javascript'>
    function shout(){
        alert(this.innerHtml());
    }
</script>

answered Feb 6, 2014 at 8:53

Dropout

14k10 gold badges59 silver badges112 bronze badges

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

2 Comments

Dropout Over a year ago

If I didn't understand it correctly, please comment. I will edit it.

Abhishek Over a year ago

Hi, thanks for your reply. What I actually meant was the way I've defined those two functions inside the external script file, is it the right way to do it, because I cannot access the div of one.html file but the div of two.html is working fine and getting accessed.

KevinHaugen · Accepted Answer · 2014-02-06 08:55:48Z

0

not sure but try <script src="script.js" type="text/javascript"></script>
in the <head> tag in one.html and two.html
tell if it worked or not.

answered Feb 6, 2014 at 8:55

KevinHaugen

791 gold badge1 silver badge9 bronze badges

Collectives™ on Stack Overflow

How to access multiple html file elements from same external javascript file

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related