problems with button added in javascript [duplicate]

Question

The following code successfully adds a button to a form every time I click a button with id "button0". But firebug gives me the error

form1 is null
[Break On This Error]   

form1.appendChild(element);

And the new button will not execute the function "foo()" despite the fact that it's been set to its onclick value. Here's the code

var counter = 0;

function add(){
  counter++;
  var element = document.createElement("input");
  element.type = "button";
  element.value = "test";
  element.name = "button"+counter;
  element.id = "button"+ counter;
  element.onclick="foo()";
  var form1 = document.getElementById("form1");
  var body1 = document.getElementById("b1");
  var header = document.getElementById("header");
  form1.appendChild(element);
  header.innerHTML = "Two Buttons";
};

function foo(){
  var butt =   document.getElementById("button1");
  butt.value = "works";
  console.log("works");
};

add();

I also get a firebug error (undefined) if I use document.form1.appendChild(element);

The funny thing is I DO get the new button every time I click. It's just that the button doesn't work.

Here's my html

<body id = "b1">

<script src = "button-in-code.js"></script>
<h1 id = "header">Buttons</h1>
<form id = "form1" name = "form1">
<input type="button" id = "button0" name="sel" value="Select all" onclick="add()">
</form>

<hr>
<address></address>
<!-- hhmts start -->Last modified: Mon Jul  8 10:07:26 EDT 2013 <!-- hhmts end -->
</body> </html>

Could you add your HTML? Since most of the issue seems to be that it's not finding the element named form1, this may be an html issue. It may also help to set this up on a site like jsfiddle.net or jsbin.com — Scott Mermelstein
– Scott Mermelstein, Commented Jul 8, 2013 at 14:41
Here's my HTML:<body id = "b1"> <script src = "button-in-code.js"></script> <h1 id = "header">Buttons</h1> <form id = "form1" name = "form1"> <input type="button" id = "button0" name="sel" value="Select all" onclick="add()"> </form> <hr> <address></address> Last modified: Mon Jul 8 10:07:26 EDT 2013  </body> </html> — user2534010
– user2534010, Commented Jul 8, 2013 at 14:55
if I remove the quotes around the function in the definition of onclick the code stops working: it doesn't create a new button. — user2534010
– user2534010, Commented Jul 8, 2013 at 15:03

CoursesWeb · Accepted Answer · 2013-07-08 15:15:04Z

0

Try add the <script src = "button-in-code.js"></script> after the html code with <form>...</form>.

Because the add(); function is executed automatically, the javascript code must be added after the html elements which are used in that function.

edited Jul 8, 2013 at 15:15

answered Jul 8, 2013 at 15:09

CoursesWeb

4,2573 gold badges24 silver badges27 bronze badges

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

2 Comments

user2534010 Over a year ago

CoursesWeb's answer fixed the execution of add()! Thanks. The only problem I have left is that the new buttons won't execute foo() when clicked.

MasterAM Over a year ago

The relevant code line should be element.onclick=foo;. Note that this is not the preferred method of attaching event listeners. I would recommend using a JS library to streamline the event handling (among other issues) across browsers.

Collectives™ on Stack Overflow

problems with button added in javascript [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related