Использование javascript для динамического создания кнопок при загрузке

Так что у меня проблемы с пониманием того, что я здесь делаю не так.

Большая картина, которую я пытаюсь реализовать, - это страница с iframe, управляемая кнопками, которые меняют источник iframe при нажатии. Кнопки будут динамически создаваться из структуры данных, размер которой я не знаю, а это значит, что мне нужно было реализовать ее как цикл.

Пока я просто добавил предварительно заполненный объект и попытался реализовать динамическое создание кнопок на HTML-странице, но я не могу создать кнопки.

Код, который я пытаюсь запустить,

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

Кроме того, не кажется ли это хорошим подходом к решению такого рода проблем? (Попытка добавить кнопки динамически) или мой следующий шаг окажется сложным с моим текущим подходом (заставить кнопки управлять iframe на странице)?

foobar = / = fooBar
Chris G 11.04.2018 12:21

Полный пример: jsfiddle.net/khrismuc/wfkgws6u

Chris G 11.04.2018 12:29
1
2
1 076
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Основная проблема здесь в этой строке:

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

Поскольку JS чувствителен к регистру, он должен быть:

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

При отладке подобных вещей обращайте особое внимание на консоль. Это ошибка, которую вы должны увидеть в исходном коде:

Uncaught TypeError: Cannot read property 'appendChild' of null

Кроме того, тип элемента должен быть input в зависимости от вашего использования, а не button. См. ниже.

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>

пожалуйста, проверьте

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

К

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

Другие вопросы по теме