为什么我的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