Can external JavaScript access DOM elements from a different file?

Question

Just started working in Dreamweaver recently. I was wondering if when you are working with external javascript files, do you have to pass in html elements or can the js file see their id? For example;

<body>
<script src="client.js"></script>

<input type="submit" name="submit" id="submit" onclick="getValue()" value="Submit"></td>

And then in the client.js file

function getValue() {
  "use strict";
  document.getElementById(submit).value = document.getElementById(otherelement).value;
}

This isn't working in the first place and I understand that there are other errors, but mainly - can the client.js file see and use getElementById(submit) and getElementById(otherelement)?

`document.getElementById("submit")` - you have to pass in a *string*. — Pointy, Dec 31 '15 at 16:21
And be certain that your script executes after the document has finished loading. — TbWill4321, Dec 31 '15 at 16:22
May I suggest ***not*** using inline JavaScript/events? I suggest using `document.getElementById("submit").addEventListener('click', function(){});`. — gen_Eric, Dec 31 '15 at 16:27
@Pointy - Technically you don't *have* to pass in a string; a variable is perfectly valid. But obviously that's not what the OP is attempting. — j08691, Dec 31 '15 at 16:29
When you use `onclick="getValue()"`, the code in the attribute is executed in the *global context*, so the `getValue()` function has no idea it was called *from* an event. So, you need to either use `document.getElementById("submit")` in `getValue()`, or pass `this` to it: `onclick="getValue(this)"` (then do `function getVaue(e){}`). — gen_Eric, Dec 31 '15 at 16:29
In an effort to answer your actual question - Yes, the client.js script should be able to "see and use" the html elements on the page. There is no scope issue here. Once the browser is done parsing the DOM (HTML elements), then they can be referenced by the JavaScript code in the client.js file because the js file is included at the top of the HTML page in script tags. — Andrew Tomlinson, Dec 31 '15 at 16:31
@j08691 yes of course, but in this case it was pretty clear that there wasn't a variable called "submit" floating around. (Well I guess there was, and that variable would have been the global reference to the element being looked for!) — Pointy, Dec 31 '15 at 16:33
Cheers for the quick answers, Pointy I changed it to a string, which does make a lot of sense, but looks like it needs some more tweaking, thanks for the advice, TbWill4321 looked into that, that makes sense too, and @Rocket Hazmat, does that mean it watches from the script to see if anything happened? Does placement of the script (In head/body or beginning/end) matter? Or as long as its run after the document completes, it will work? Cheers all! — AngelOnFira, Dec 31 '15 at 16:33
If you're clicking on it, the the document loading is most likely complete. Since you're fetching the element being clicked, you can shorten it by passing `this` into the function. `onclick="getValue(this)"` and then define a parameter for your function: `function getValue(elem) {...` and use that parameter to set the value: `elem.value = ...` — , Dec 31 '15 at 16:37
@squint So what if I pass in "this" button, but want to grab the value of a text field? Would I pass that in as well or refer to it by id? — AngelOnFira, Dec 31 '15 at 16:39
You'd fetch it by id. `this.value = document.getElementById("otherelement").value;` — , Dec 31 '15 at 16:42

score 3 · Accepted Answer · answered Dec 31 '15 at 16:40

I would suggest shying away from using inline JavaScript elements, and doing things differently. I'd suggest using addEventListener() to bind events from JavaScript.

So, remove the onclick attribute, and just do:

<input type="submit" name="submit" id="submit" value="Submit">

We will be adding the event in JavaScript. For this to work, the script needs to be ran after the page (DOM) is loaded. You can use window.onload = function(){} to do this or you can load the script at the end of the page (before </body>).

Anyway, in your JavaScript, you want to use:

document.getElementById("submit").addEventListener('click', function(event){
    // NOTE: You are clicking a submit button.  After this function runs,
    // then the form will be submitted.  If you want to *stop* that, you can
    // use the following:
    // event.preventDefault();

    // In here `this` will be the element that was clicked, the submit button
    this.value = document.getElementById('otherelement').value;
});

Don't forget to add this code code into an event listener for when the document is ready, otherwise the element with ID 'submit' may not yet be in the DOM tree: `document.addEventListener('DOMContentLoaded', function() { /* attach events here */ });` — taveras, Dec 31 '15 at 17:12

score 1 · Answer 2 · answered Dec 31 '15 at 16:29

1

document.getElementById( id ) takes id param as string

Use

document.getElementById("otherelement");
document.getElementById("submit");

also remove the </td> as there is no <tr> in your code

answered Dec 31 '15 at 16:29

Scarecrow

4,057
3
30
56

score 0 · Answer 3 · answered Dec 31 '15 at 16:28

If you don't use quotes to wrap your strings, javascript will try to find variables named submit or otherelement. Try adding quotes like that :

function getValue() {
   "use strict";
   document.getElementById("submit").value = document.getElementById("otherelement").value;
}

score 0 · Answer 4 · answered Dec 31 '15 at 16:28

0

If you have an HTML element with an id attribute, The JS engine automatically converts it to a variable..

e.g. <input type="submit" name="submit" id="submit" onclick="getValue()" value="Submit"></td>

equals to the var submit in your JS code (considering you load your JS file when the DOM is fully rendered).

In every HTML page an element id is unique and that's why it is converted to a variable and wll not be overwritten until you decide so.

answered Dec 31 '15 at 16:28

Hulke

847
5
22

I wouldn't suggest using this feature. I'm not sure if modern browsers still do it anymore. See: http://stackoverflow.com/q/3434278 – gen_Eric Dec 31 '15 at 16:31
@RocketHazmat even Firefox does now :( It's so dumb. – Pointy Dec 31 '15 at 16:34
@RocketHazmat: I think it was added to the HTML5 spec, so all browsers moving forward should start to support it (if I'm right about that). – Dec 31 '15 at 16:38

score 0 · Answer 5 · answered Dec 31 '15 at 16:37

I was wondering if when you are working with external javascript files, do you have to pass in html elements or can the js file see their id

Yes you can see the ID:

function whoAmI(e) {
  document.getElementById('output').textContent = e.target.id;
}

<button id='Hiii' onclick='whoAmI(event)'>Check ID</button>
<p id='output'></p>

Can external JavaScript access DOM elements from a different file?

5 Answers5

Linked