Why won't my JavaScript function execute?

Question

I just finished an exam for one of my classes, and one of the questions required us to make a simple HTML document. We were supposed to include some JavaScript code that would copy the text from txtA and put it into txtB, but when I click the button, nothing happens.

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>

• Jaromanda X: that's why browsers have DEVELOPER tools console - check your console for errors ... you'll want document.forms.form1...etc
• Bergi: Are you getting any exception? Does the page reload without you noticing it?

Answer 1

You're using outdated legacy DOM notation to refer to the form elements which focuses on the name attribute instead of the ID. For example your code works if you change the IDs to name attributes:

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>

I would highly recommend that you don't do that and use something more up to date like:

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>

• Stephen P: Although not necessary for this test problem, I further recommend you learn how to use addEventListener in place of onclick="function" if you are ever going to do any serious javascript work. There's further SO reading at stackoverflow.com/questions/6348494

Answer 2

Change your CopyAToB function to:

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>

You need to use the getElementbyId function to find the text boxes; the way you're trying to do it is legacy, as j08691 pointed out.

• j08691: What do you mean by "you cannot refer to them directly"?
• myfunkyside: You can, you just have to give them a name instead of an id. Still, with id you can also do this: var txtA = document.getElementById("txtA").value;, you don't need the extra line. In fact, you can probably just do this: document.getElementById("txtB").value = document.getElementById("txtA").value;. That's only one line;)

Answer 3

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

You can select the html element using document.getElementById( ). w3schools has some great tutorials for html/javascript beginner. https://www.w3schools.com/jsref/met_document_getelementbyid.asp

Answer 4

I would attach an eventListener to the button instead,

and with modern javascript we don't even need to use document.getElement... as long as we make sure the HTML element's ID is unique across both html and javascript (e.g. no var form1_txtA = "something unrelated";) then the ID is all we need,

form1_txtB.value will do the same job. note i added a prefix, form1_, to your id's, allthrough it isn't needed, i like clear id's that tells what and where it's from.

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 5

You need to change your javascript to select the element by ID explicitly because the reason why it isn't working is because txtA is undefined as Jaromanda X said, dev console is your friend. Try something like this:

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

• bejado: Why not make your last line simply txtB.value = txtA?

Answer 6

You should place your script in another file and to include your script you just need to do the following

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

source https://www.w3schools.com/tags/att_script_src.asp

• Brian: Whilst I agree this is usually best practice it isn't an answer to the question and addresses none of the issues in the script.