CODEWITHSUNDEEP
javascripthtmldom
AngelOnFira
AngelOnFira

Reputation: 59

Can external JavaScript access DOM elements from a different file?

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)?

Upvotes: 4

Views: 12383

Answers (5)

gen_Eric
gen_Eric

Reputation: 227200

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

Upvotes: 3

Jonathan
Jonathan

Reputation: 9151

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>

Upvotes: 0

Scarecrow
Scarecrow

Reputation: 4137

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

Upvotes: 1

Hulke
Hulke

Reputation: 857

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.

Upvotes: 0

Freez
Freez

Reputation: 7568

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

Upvotes: 0

Related Questions