请检查

Question

所以我很难理解我在这里做错了什么。

我试图实现的大图是一个带有iframe的页面，该iframe由按钮控制，按下按钮时会更改iframe的来源。按钮将从我不知道其大小的数据结构动态创建，这意味着我需要将其实现为循环。

到目前为止，我刚刚添加了一个预先填充的对象，并尝试在HTML页面上实现动态创建按钮，但我无法创建按钮。

我试图运行的代码是

＆＃13;

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

＆＃13;

另外，对于这种问题，这看起来有什么好处吗？（尝试动态添加按钮）或者我的下一步将使用我当前的方法（使按钮控制页面中的iframe）变得棘手？

Answer 1

这里的主要问题是这一行：

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

由于JS区分大小写，因此应该是：

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

调试这样的东西时要密切注意控制台。这是您应该在原始代码中看到的错误：

未捕获的TypeError：无法读取null
的属性'appendChild'

此外，根据您的使用情况，元素类型应为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>

Answer 2

请检查

var foo = document.getElementById（“foobar”）;

到

var foo = document.getElementById（“fooBar”）;

使用Javascript动态创建按钮on

2 个答案:

请检查