為什么我的JavaScript函數不執行？

Question

我剛剛完成了其中一個課程的考試，其中一個問題要求我們制作一個簡單的HTML文檔。 我們應該包括一些JavaScript代碼，該代碼將從txtA復制文本並將其放入txtB，但是當我單擊按鈕時，什么也沒有發生。

 function CopyAToB() { var a = document.form1.txtA.value; document.form1.txtB.value = a; } 

 div { text-align: center; color: red; font-size: 42px; } 

 <div>The University of Akron</div> <form id="form1"> <input type="text" id="txtA" /> <input type="text" id="txtB" /> <input type="button" value="Copy" onclick="CopyAToB();" /> </form> 

Answer 1

您使用的是過時的舊版DOM表示法，是指着重於name屬性而不是ID的表單元素。 例如，如果您將ID更改為name屬性，則您的代碼有效：

 function CopyAToB() { var a = document.form1.txtA.value; document.form1.txtB.value = a; } 

 div { text-align: center; color: red; font-size: 42px; } 

 <div>The University of Akron</div> <form name="form1"> <input type="text" name="txtA" /> <input type="text" name="txtB" /> <input type="button" value="Copy" onclick="CopyAToB();" /> </form> 

我強烈建議您不要這樣做，而應使用更多最新的東西，例如：

 function CopyAToB() { var a = document.getElementById('txtA').value; document.getElementById('txtB').value = a; } 

 div { text-align: center; color: red; font-size: 42px; } 

 <div>The University of Akron</div> <form id="form1"> <input type="text" id="txtA" /> <input type="text" id="txtB" /> <input type="button" value="Copy" onclick="CopyAToB();" /> </form> 

Answer 2

將您的CopyAToB函數更改為：

 function CopyAToB() { var txtA = document.getElementById("txtA"); var a = txtA.value; var txtB = document.getElementById("txtB"); txtB.value = a; } 

 div { text-align: center; color: red; font-size: 42px; } 

 <div>The University of Akron</div> <form id="form1"> <input type="text" id="txtA" /> <input type="text" id="txtB" /> <input type="button" value="Copy" onclick="CopyAToB();" /> </form> 

您需要使用getElementbyId函數來查找文本框。 正如j08691所指出的，您嘗試執行此操作的方法是遺留的。

Answer 3

您需要更改JavaScript來通過ID明確選擇元素，因為它不起作用的原因是因為Jaromanda X說txtA未定義，開發者控制台是您的朋友。 嘗試這樣的事情：

var txtA = document.getElementById("txtA").value;
var txtB = document.getElementById("txtB");
txtB.value = txtA;

Answer 4

function CopyAToB() {
    var a = document.getElementById('txtA');
    var b = document.getElementById('txtB');
    b.value = a.value;
}

您可以使用document.getElementById（）選擇html元素。 w3schools為html / javascript初學者提供了一些很棒的教程。 https://www.w3schools.com/jsref/met_document_getelementbyid.asp

Answer 5

我可以將eventListener附加到按鈕上，

並且使用現代javascript，我們甚至不需要使用document.getElement ...，只要我們確保HTML元素的ID在html和javascript中都是唯一的即可（例如，無var form1_txtA =“不相關的事物”；），那么ID是我們所需要的

form1_txtB.value將執行相同的工作。 請注意，我在您的ID之前添加了一個前綴form1_，因為不需要它，我喜歡清晰的ID來告訴它來自何處。

 form1_button.addEventListener('click', CopyAToB); function CopyAToB() { form1_txtB.value = form1_txtA.value; } 

 div { text-align: center; color: red; font-size: 42px; } 

 <div>The University of Akron</div> <form id="form1"> <input type="text" id="form1_txtA" /> <input type="text" id="form1_txtB" /> <input type="button" id="form1_button" value="Copy"/> </form> 

Answer 6

您應該將腳本放置在另一個文件中，並且要包含腳本，只需執行以下操作

<script src="nameofscript.js"></script>

來源https://www.w3schools.com/tags/att_script_src.asp