外部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