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) ?
5 answers
solution1
2 ACCPTED 2015-12-31 16:40:24
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;
});
solution2
1 2015-12-31 16:29:25
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
solution3
0 2015-12-31 16:28:11
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;
}
solution4
0 2015-12-31 16:28:35
If you have an HTML element with an id attribute, The JS engine automatically converts it to a variable..
eg <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.
solution5
0 2015-12-31 16:37:10
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.