Question

我刚刚为我的一个课程完成了考试，其中一个问题要求我们制作一个简单的HTML文档。我们应该包含一些JavaScript代码，它们会从txtA复制文本并将其放入txtB，但是当我点击按钮时，没有任何反应。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您使用过时的旧DOM表示法来引用专注于name属性而非ID的表单元素。例如，如果将ID更改为name属性，则代码可以工作：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

我高度建议您不要这样做并使用更新的内容，例如：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

将CopyAToB功能更改为：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

您需要使用getElementbyId功能查找文本框;正如j08691指出的那样，你尝试这样做的方式是遗产。

Answer 3

你需要更改你的javascript以明确地选择ID，因为它不起作用的原因是因为txtA未定义，因为Jaromanda X说，dev console是你的朋友。尝试这样的事情：

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将执行相同的工作。请注意我添加了一个前缀form1_到你的id，通过它不需要，我喜欢清楚的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

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

6 个答案: