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>

that's why browsers have DEVELOPER tools console - check your console for errors ... you'll want document.forms.form1...etc — Jaromanda X
– Jaromanda X, Commented Feb 17, 2017 at 1:17
Are you getting any exception? Does the page reload without you noticing it? — Bergi
– Bergi, Commented Feb 17, 2017 at 2:05

j08691 · Accepted Answer · 2017-02-17 01:22:13Z

5

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>

answered Feb 17, 2017 at 1:22

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stephen P Over a year ago

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

bejado · Accepted Answer · 2017-02-17 01:25:02Z

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.

edited Feb 17, 2017 at 1:25

answered Feb 17, 2017 at 1:18

bejado

1,45812 silver badges19 bronze badges

2 Comments

j08691 Over a year ago

What do you mean by "you cannot refer to them directly"?

myfunkyside Over a year ago

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

Huiquan LU · Accepted Answer · 2017-02-17 01:35:48Z

0

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

answered Feb 17, 2017 at 1:35

Huiquan LU

11 bronze badge

Comments

user2267175 · Accepted Answer · 2017-02-17 01:44:04Z

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>

alphadmon · Accepted Answer · 2017-02-17 04:26:49Z

0

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;

edited Feb 17, 2017 at 4:26

answered Feb 17, 2017 at 1:24

alphadmon

4465 silver badges22 bronze badges

1 Comment

bejado Over a year ago

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

CodeManny · Accepted Answer · 2017-02-17 01:22:09Z

-3

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

answered Feb 17, 2017 at 1:22

CodeManny

203 bronze badges

1 Comment

Brian Over a year ago

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.

Collectives™ on Stack Overflow

Why won't my JavaScript function execute?

6 Answers 6

1 Comment

2 Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

2 Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related