Using Javascript to dynamically create buttons onload

Question

So I'm having troubles understanding what I'm doing wrong here.

The big picture I'm trying to implement is a page with an iframe that is controlled with buttons that change the source of the iframe when pressed. The buttons would be dynamically created from a data structure that I wouldn't know the size of, which means that I needed to implement it as a loop.

So far I just added a pre-populated object and tried to implement the dynamic creation of the buttons to the HTML page, but I'm unable to create the buttons.

The code I'm trying to run is

<HEAD>
<TITLE>Testing stuff</TITLE>
</HEAD>
<BODY onload="script();">
<FORM>
<H2>Dynamically add button to form.</H2>

<span id="fooBar">&nbsp;</span>

</FORM>
</BODY>
<script>

var URLobj = {
url1 : "https://www.lipsum.com/",
url2 : "https://www.cnet.com/news/",
url3 : "https://stackoverflow.com/"
};


function add(name, URL) {

	//Create an input type dynamically.
	var element = document.createElement("BUTTON");

	//Assign different attributes to the element.
	element.setAttribute("type", "button");
	element.setAttribute("value", URL);
	element.setAttribute("name", name);

 alert(name);
	var foo = document.getElementById("foobar");

	//Append the element in page (in span).
  alert('i can reach here');
	foo.appendChild(element);
  alert('i can not reach here');
}
window.onload = function iterator()
{

for (var key in URLobj) {
    if (URLobj.hasOwnProperty(key)) {
			add(key, URLobj[key])
    }
}
}
</script>

Also, does this seem like any good of an approach for this kind of a problem? (Trying to add buttons dynamically) or will my next step prove to be tricky with my current approach (making the buttons control an iframe in the page)?

foobar =/= fooBar

user5734311
– user5734311

2018-04-11 10:21:56 +00:00
Commented Apr 11, 2018 at 10:21 — user5734311
– user5734311, Commented Apr 11, 2018 at 10:21
Full example: jsfiddle.net/khrismuc/wfkgws6u

user5734311
– user5734311

2018-04-11 10:29:46 +00:00
Commented Apr 11, 2018 at 10:29 — user5734311
– user5734311, Commented Apr 11, 2018 at 10:29

James Hill · Accepted Answer · 2018-04-11 10:23:51Z

The main issue here is this line:

var foo = document.getElementById("foobar");

As JS is case sensitive, it should be:

var foo = document.getElementById("fooBar");

Pay close attention to the console when debugging stuff like this. This is the error you should see with your original code:

Uncaught TypeError: Cannot read property 'appendChild' of null

Also, the element type should be input based on your usage, not button. See below.

var URLobj = {
  url1: "https://www.lipsum.com/",
  url2: "https://www.cnet.com/news/",
  url3: "https://stackoverflow.com/"
};


function add(name, URL) {

  //Create an input type dynamically.
  var element = document.createElement("input");

  //Assign different attributes to the element.
  element.setAttribute("type", "button");
  element.setAttribute("value", URL);
  element.setAttribute("name", name);

  var foo = document.getElementById("fooBar");

  //Append the element in page (in span).
  foo.appendChild(element);
}
window.onload = function iterator() {

  for (var key in URLobj) {
    if (URLobj.hasOwnProperty(key)) {
      add(key, URLobj[key])
    }
  }
}

<HEAD>
  <TITLE>Testing stuff</TITLE>
</HEAD>

<BODY onload="script();">
  <FORM>
    <H2>Dynamically add button to form.</H2>

    <span id="fooBar">&nbsp;</span>

  </FORM>
</BODY>

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

Please check

var foo = document.getElementById("foobar");

To

var foo = document.getElementById("fooBar");

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 11, 2018 at 10:29

sunny bhadania

4233 silver badges5 bronze badges

Collectives™ on Stack Overflow

Using Javascript to dynamically create buttons onload

2 Answers 2

Comments

Please check

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Please check

Comments

Your Answer

Sign up or log in

Post as a guest

Related