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> 

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> 

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.

Answer 3

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;

Answer 4

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 5

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