Warum wird meine JavaScript-Funktion nicht ausgeführt?

Question

Ich habe gerade eine Prüfung für eine meiner Klassen abgeschlossen, und eine der Fragen erforderte uns, ein einfaches HTML-Dokument zu erstellen. Wir sollten etwas JavaScript-Code einfügen, der den Text von txtA kopieren und in txtB einfügen würde, aber wenn ich auf den Button klicke, passiert nichts.

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

Sie verwenden veraltete Legacy-DOM tun, um sich auf die Formularelemente, die auf das name-Attribut statt auf die ID fokussieren. Zum Beispiel funktioniert der Code, wenn Sie die IDs Namen ändern Attribute:

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>

Ich würde sehr empfehlen, dass Sie das nicht tun und etwas mehr verwenden auf dem neuesten Stand wie:

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

ändern CopyAToB Funktion:

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>

Sie benötigen die getElementbyId Funktion verwenden, um die Textfelder zu finden; Die Art und Weise, wie Sie es versuchen, ist Vermächtnis, wie j08691 herausstellte.

Answer 3

Sie sollten das Skript in einer anderen Datei platzieren und das Skript schließen Sie müssen nur die folgenden

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

Quelle Notation

Answer 4

Sie müssen Ihr Javascript ändern, um das Element nach ID explizit auszuwählen, weil der Grund, warum es nicht funktioniert, ist, weil txtA undefiniert ist, wie Jaromanda X sagte, ist dev-Konsole Ihr Freund. Probieren Sie etwas wie folgt aus:

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

Sie können die HTML-Element wählen document.getElementById() verwenden. w3schools hat einige großartige Tutorials für HTML/Javascript Anfänger. https://www.w3schools.com/jsref/met_document_getelementbyid.asp

Answer 6

ich eine eventlistener auf die Schaltfläche stattdessen befestigen würde,

und mit modernen Javascript brauchen wir nicht einmal document.getElement verwenden ... solange wir sicherstellen, dass die ID des HTML-Element ist über einzigartige sowohl html als auch javascript (zB nein var form1_txtA = "etwas nicht verwandt";) dann ist die ID alles was wir brauchen,

form1_txtB.value wird den gleichen Job machen. Notiz Ich habe ein Präfix, Form1_, zu Ihrer ID hinzugefügt, alles durch, es ist nicht erforderlich, ich mag klare IDs, die erzählt, was und wo es herkommt.

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>