外部JavaScript可以从其他文件访问DOM元素吗？
[英]Can external JavaScript access DOM elements from a different file?
问题描述
Just started working in Dreamweaver recently. 
最近刚开始在Dreamweaver中工作。 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? 我想知道当您使用外部javascript文件时，是否必须传递html元素，或者js文件可以看到其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 然后在client.js文件中
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) ? 首先这是行不通的，我知道还有其他错误，但是主要是-client.js文件可以查看和使用getElementById(submit)和getElementById(otherelement)吗？
5 个解决方案
解决方案1
2 已采纳 2015-12-31 16:40:24
I would suggest shying away from using inline JavaScript elements, and doing things differently. 我建议您不要使用内联JavaScript元素，而应采用其他方式。 I'd suggest using addEventListener() to bind events from JavaScript. 我建议使用addEventListener()绑定来自JavaScript的事件。
So, remove the onclick attribute, and just do: 因此，删除onclick属性，然后执行以下操作：
<input type="submit" name="submit" id="submit" value="Submit">
We will be adding the event in JavaScript. 我们将在JavaScript中添加事件。 For this to work, the script needs to be ran after the page (DOM) is loaded. 为此，需要在加载页面（DOM） 之后运行脚本。 You can use window.onload = function(){} to do this or you can load the script at the end of the page (before </body> ). 您可以使用window.onload = function(){}进行此操作，也可以在页面末尾（ </body>之前）加载脚本。
Anyway, in your JavaScript, you want to use: 无论如何，在您的JavaScript中，您要使用：
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;
});
解决方案2
1 2015-12-31 16:29:25
document.getElementById( id ) takes id param as string document.getElementById( id )将id参数作为字符串
Use 采用
document.getElementById("otherelement");
document.getElementById("submit");
also remove the </td> as there is no <tr> in your code 还要删除</td>因为您的代码中没有<tr>
解决方案3
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 . 如果不使用引号来包装你的字符串，JavaScript就试图找到命名变量submit或otherelement 。 Try adding quotes like that : 尝试像这样添加引号：
function getValue() {
"use strict";
document.getElementById("submit").value = document.getElementById("otherelement").value;
}
解决方案4
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.. 如果您的HTML元素具有id属性，则JS引擎会自动将其转换为变量。
eg <input type="submit" name="submit" id="submit" onclick="getValue()" value="Submit"></td> 例如<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). 等于您的JS代码中的var submit （考虑到在完全呈现DOM后加载JS文件）。
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. 在每个HTML页面中，元素id都是唯一的，这就是为什么将其转换为变量并且在您决定这样做之前不会将其覆盖的原因。
解决方案5
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: 是的，您可以看到ID：
function whoAmI(e) { document.getElementById('output').textContent = e.target.id; }
<button id='Hiii' onclick='whoAmI(event)'>Check ID</button> <p id='output'></p>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.