为什么我的JavaScript函数不能执行？

我刚刚完成了一门课的考试，其中一个问题要求我们制作一个简单的HTML文档。我们应该包含一些JavaScript代码，将txtA中的文本复制并放入txtB中，但是当我单击按钮时，什么都不会发生。为什么我的JavaScript函数不能执行？

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>

来源

2017-02-17 R. Zwahlen

这就是为什么浏览器都有开发工具的控制台 - 检查你的控制台错误...你会想'document.forms.form1 ... etc' –

，能得到任何异常？没有你注意到页面重新加载？ – Bergi

您正在使用过时的遗留DOM符号来引用表单元素着重于name属性而不是ID。例如，如果您更改ID来命名你的代码的工作属性：

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>

来源

2017-02-17 01:22:13 j08691

尽管对于这个测试问题没有必要，我还建议您学习如何使用[addEventListener]（https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener）来代替'onclick =“function” '如果你打算做任何严肃的JavaScript工作。还有更多的SO阅读在http://stackoverflow.com/questions/6348494 –

更改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指出的那样，你试图去做的方式是遗留下来的。

来源

2017-02-17 01:18:38 bejado

你是什么意思_“你不能直接引用他们”_？ – j08691

你可以，你只需要给他们一个'name'而不是'id'。不过，使用'id'你也可以这样做：var txtA = document.getElementById（“txtA”）。value;'，你不需要额外的行。实际上，你可以这样做：'document.getElementById（“txtB”）。value = document.getElementById（“txtA”）。value;'。这只是一条线;） – myfunkyside

-3

你应该把你的脚本在另一个文件中，并包含你的脚本你只需要做到以下几点

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

源

来源

2017-02-17 01:22:09 CodeManny

这并不能解决OP的问题。 – bejado

虽然我同意这通常是最佳实践，但它不是对问题的回答，也不处理脚本中的任何问题。 – Brian

你需要改变你的javascript来显式选择元素，因为它不工作的原因是因为txtA是未定义的，因为Jaromanda X说，dev console是你的朋友。尝试是这样的：

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

来源

2017-02-17 01:24:38 AlphaDaemon

为什么不让你的最后一行简单地'txtB.value = txtA'？ – bejado

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

来源

2017-02-17 01:35:48

我会附加一个事件监听，而不是按钮，

，并与现代的JavaScript，我们甚至不需要使用document.getElement ......只要我们确保HTML元素的ID对面是独一无二的（例如：no 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>

来源

2017-02-17 01:44:04 user2267175

为什么我的JavaScript函数不能执行？

回答

相关问题