Can external JavaScript access DOM elements from a different file?

javascript html dom

10,506

Solution 1

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

Solution 2

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

10,506

Author by

AngelOnFira

Comp sci student at Carleton University, specifically game dev. Love video games, youtube and the likes. I also make short films and did "Let's plays" for a while.

Updated on June 16, 2022

Comments

AngelOnFira almost 2 years
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)?
gen_Eric over 8 years

I wouldn't suggest using this feature. I'm not sure if modern browsers still do it anymore. See: stackoverflow.com/q/3434278
Pointy over 8 years

@RocketHazmat even Firefox does now :( It's so dumb.
Admin over 8 years

@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).
AngelOnFira over 8 years

Cheers, this makes a lot of aspects make sense
taveras over 8 years

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 */ });