Почему моя функция 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 вместо идентификатора. Например ваш код работает, если изменить идентификаторы имени атрибуты:

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

Вы должны поместить скрипт в другой файл и включить скрипт вам просто нужно сделать источник сигнала после

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

Answer 4

Вам нужно изменить свой javascript, чтобы явно выбрать элемент по идентификатору, потому что причина, по которой он не работает, заключается в том, что txtA не определено, поскольку Jaromanda X сказал: dev console - ваш друг. Попробуйте что-то вроде этого:

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

Answer 5

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

Вы можете выбрать HTML элемент, используя document.getElementById(). В w3schools есть несколько отличных уроков для html/javascript beginner. https://www.w3schools.com/jsref/met_document_getelementbyid.asp

Answer 6

Я бы прикрепить EventListener к кнопке вместо этого,

и с современной JavaScript мы даже не нужно использовать document.getElement ... до тех пор, пока мы уверены, идентификатор элемента HTML является уникальным по как html, так и javascript (например, нет var form1_txtA = "что-то несвязанное";) , тогда идентификатор - это все, что нам нужно,

form1_txtB.value будет выполнять ту же работу. Заметьте, я добавил префикс, form1_, к вашим идентификаторам, все это не нужно, мне нравится четкий идентификатор, который сообщает, что и где он.

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>