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, Feb 17 '17 at 01:17
Are you getting any exception? Does the page reload without you noticing it? — Bergi, Feb 17 '17 at 02:05

score 5 · Accepted Answer · answered Feb 17 '17 at 01:22

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>

Although not necessary for this test problem, I further recommend you learn how to use [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) in place of `onclick="function"` if you are ever going to do any serious javascript work. There's further SO reading at http://stackoverflow.com/questions/6348494 — Stephen P, Feb 17 '17 at 01:41

bejado · Answer 2 · 2017-02-17T01:25:02.460

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 '17 at 01:25

answered Feb 17 '17 at 01:18

bejado

1,430
12
19

What do you mean by _"you cannot refer to them directly"_? – j08691 Feb 17 '17 at 01:23
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;) – myfunkyside Feb 17 '17 at 01:23

alphadmon · Answer 3 · 2017-02-17T04:26:49.860

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 '17 at 04:26

answered Feb 17 '17 at 01:24

alphadmon

396
4
17

1

Why not make your last line simply `txtB.value = txtA`? – bejado Feb 17 '17 at 01:26

score 0 · Answer 4 · answered Feb 17 '17 at 01:35

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

score 0 · Answer 5 · answered Feb 17 '17 at 01:44

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>

score -3 · Answer 6 · answered Feb 17 '17 at 01:22

-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 '17 at 01:22

CodeManny

43
3

3

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. – Brian Feb 17 '17 at 01:23

Why won't my JavaScript function execute?

6 Answers6