Why does this javascript function activate at the wrong time?

Question

Here's the code I'm currently using

function firstChildAge() { 
    var header = document.createElement('H3');
    var body = document.getElementsByTagName('BODY');
    var textnode = document.createTextNode("WHAT IS THE AGE OF THE FIRST CHILD?");
    var inputChildOne = document.createElement("Input");
    var childOneAgeResponse = inputChildOne.value;
    header.appendChild(textnode);
    document.body.appendChild(header);
    document.body.appendChild(inputChildOne);
}

function submitButton() {
    var btn = document.createElement('Button');
    document.body.appendChild(btn);
    btn.onClick = testFunction_2();
}

function testFunction_2() {
    alert("foo");
}

if (childrenResponse == 1) {
    firstChildAge();
    submitButton(); 
}

As you can see, if childrenResponse (the user's response to a previous query) is equal to 1, both functions are activated. The attempted goal is to create a text node, an input, and a button. The button as of right now, should active testFunction2() which alerts us that it is working. But, testFunction2() activates before the text node or input even shows up. I can find the reason for this, and if anyone can help me out I'd greatly appreciate it. Thank you.

Also, on a side note, how can I add text to the button created in submitButton() ? Thanks!

Jefree Sujit · Answer 1 · 2017-07-22T15:49:04.887

2

You have called the testFunction_2, instead of assigning it. This should work out fine.

function submitButton() {
    var btn = document.createElement('Button');
    btn.onclick = testFunction_2;
    document.body.appendChild(btn);
}

edited Jul 22 '17 at 15:49

answered Jul 22 '17 at 15:41

Jefree Sujit

1,546
5
22
38

score 1 · Accepted Answer · edited Jul 22 '17 at 15:54

You are calling the function testFunction_2() in onClick. You need to add event listener to button as shown below

btn.addEventListener('click', testFunction_2);

To add text to button use

var txt = document.createTextNode("CLICK ME");
btn.appendChild(txt);

Check the snippet below

function firstChildAge() {
  var header = document.createElement('H3');
  var body = document.getElementsByTagName('BODY');
  var textnode = document.createTextNode("WHAT IS THE AGE OF THE FIRST CHILD?");
  var inputChildOne = document.createElement("Input");
  var childOneAgeResponse = inputChildOne.value;
  header.appendChild(textnode);
  document.body.appendChild(header);
  document.body.appendChild(inputChildOne);
}

function submitButton() {
  var btn = document.createElement('Button');
  var txt = document.createTextNode("CLICK ME");
  btn.appendChild(txt);
  document.body.appendChild(btn);
  btn.addEventListener('click', testFunction_2);
}

function testFunction_2() {
  alert("foo");
}

childrenResponse = 1;
if (childrenResponse == 1) {
  firstChildAge();
  submitButton();
}

jmathew · Answer 3 · 2017-07-22T16:02:28.343

There were 2 problems:

onClick should've been onclick.
You were executing the function and assigning the result of that function to the onclick. btn.onClick = testFunction_2(); should be btn.onClick = testFunction_2;

See working snippet below.

function firstChildAge() { 
    var header = document.createElement('H3');
    var body = document.getElementsByTagName('BODY');
    var textnode = document.createTextNode("WHAT IS THE AGE OF THE FIRST CHILD?");
    var inputChildOne = document.createElement("Input");
    var childOneAgeResponse = inputChildOne.value;
    header.appendChild(textnode);
    document.body.appendChild(header);
    document.body.appendChild(inputChildOne);
}
function testFunction_2() {
    alert("foo");
}

function submitButton() {
    var btn = document.createElement('button');
    btn.innerHTML = "Some button name";
    btn.onclick = testFunction_2;
     document.body.appendChild(btn);
}

var childrenResponse = 1;

if (childrenResponse == 1) {
    firstChildAge();
    submitButton(); 
}

In javascript you can use the innerHTML set the button's HTML contents.

See Setting button text via javascript

btn.innerHTML = "This is a button name";

The Mozilla Developer Network is a good resource. Here's two links for the above mentioned snippets.

MDN innerHTML

MDN HTML Button element

The function didn't activate before when I changed it, but it doesn't activate when the button is pressed either. — M. Kaplan, Jul 22 '17 at 15:43
I can't add text to the button like that because it's created in Javascript, not HTML. — M. Kaplan, Jul 22 '17 at 15:44

Ronn Wilder · Answer 4 · 2017-07-22T15:46:22.967

0

You are calling the function testFunction_2 in onClick. You need to provide reference. That also won't work. You need to add event listener to button. And for setting the text, just set innerHTML of button.

var btn = document.createElement('Button');
btn.innerHTML = "click";
btn.addEventListener('click', testFunction_2);
document.body.appendChild(btn);

btn.onclick = testFunction_2; // in place of addEventListener.

// if you want to use onclick. use small case 'c' in onclick.

edited Jul 22 '17 at 15:46

answered Jul 22 '17 at 15:40

Ronn Wilder

1,228
9
13

I supposed you wrote document.body.appendChild(btn). – Ronn Wilder Jul 22 '17 at 15:47

Why does this javascript function activate at the wrong time?

4 Answers4