外部JavaScript可以从其他文件访问DOM元素吗？

Question

最近刚开始在Dreamweaver中工作。 我想知道当您使用外部javascript文件时，是否必须传递html元素，或者js文件可以看到其ID？ 例如;

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

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

然后在client.js文件中

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

首先这是行不通的，我知道还有其他错误，但是主要是-client.js文件可以查看和使用getElementById(submit)和getElementById(otherelement)吗？

Answer 1

我建议您不要使用内联JavaScript元素，而应采用其他方式。 我建议使用addEventListener()绑定来自JavaScript的事件。

因此，删除onclick属性，然后执行以下操作：

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

我们将在JavaScript中添加事件。 为此，需要在加载页面（DOM）之后运行脚本。 您可以使用window.onload = function(){}进行此操作，也可以在页面末尾（ </body>之前）加载脚本。

无论如何，在您的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;
});

Answer 2

document.getElementById( id )将id参数作为字符串

采用

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

还要删除</td>因为您的代码中没有<tr>

Answer 3

如果不使用引号来包装你的字符串，JavaScript就试图找到命名变量submit或otherelement 。 尝试像这样添加引号：

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

Answer 4

如果您的HTML元素具有id属性，则JS引擎会自动将其转换为变量。

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

等于您的JS代码中的var submit （考虑到在完全呈现DOM后加载JS文件）。

在每个HTML页面中，元素id都是唯一的，这就是为什么将其转换为变量并且在您决定这样做之前不会将其覆盖的原因。

Answer 5

我想知道当您使用外部javascript文件时，是否必须传递html元素，或者js文件可以看到其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>

外部JavaScript可以从其他文件访问DOM元素吗？

问题描述

5 个解决方案

解决方案1
2 已采纳 2015-12-31 16:40:24

解决方案2
1 2015-12-31 16:29:25

解决方案3
0 2015-12-31 16:28:11

解决方案4
0 2015-12-31 16:28:35

解决方案5
0 2015-12-31 16:37:10

外部JavaScript可以从其他文件访问DOM元素吗？

问题描述

5 个解决方案

解决方案1 2 已采纳 2015-12-31 16:40:24

解决方案2 1 2015-12-31 16:29:25

解决方案3 0 2015-12-31 16:28:11

解决方案4 0 2015-12-31 16:28:35

解决方案5 0 2015-12-31 16:37:10

解决方案1
2 已采纳 2015-12-31 16:40:24

解决方案2
1 2015-12-31 16:29:25

解决方案3
0 2015-12-31 16:28:11

解决方案4
0 2015-12-31 16:28:35

解决方案5
0 2015-12-31 16:37:10