Question

我正在开展一项挑战，要求我只使用Javascript（没有jQuery）。我创建了一个带有十二个不同按钮和底部标题的HTML。我想在点击时用按钮文本切换标题但主要收到错误“Uncaught TypeError：无法设置null / undefined的属性'innerHTML'。”

我包含了整个脚本，我知道我的createHTML函数可以使用一些清理，但我只包含它，所以你可以看到我是如何添加点击处理程序的。 switchHeading功能位于底部。

{{1}}

Answer 1

确保您的网页上有h3标记并删除了

中的括号

RButton.onclick = switchHeading();

由于switchHeading（）没有返回值，括号使得函数switchHeading（）立即运行导致未定义的结果。这有效：

<html>
<div class="container"></div>
<h3>Hello</h3>
<script>
function createHTML(){

var container = document.getElementsByClassName("container");

//add div "row"
var row = document.createElement("div");
row.className = "row";
container[0].appendChild(row);

//add div "col"
var col = document.createElement("div");
col.className = "col-md-12";
row.appendChild(col);

//add star button
var starButton = document.createElement("button");
starButton.className = "btn btn-default btn-lg";
starButton.setAttribute("type", "button");
starButton.onclick = switchHeading;
col.appendChild(starButton);
starButton.appendChild(document.createTextNode("Star"));

//add hr
var hr = document.createElement("hr");
col.appendChild(hr);

//add div
var div = document.createElement("div");
col.appendChild(div);

//add btn group
var btnGroup = document.createElement("div");
btnGroup.className = "btn-group";
div.appendChild(btnGroup);

//add num btns
for(var i=1; i<5; i++){
var numButton = document.createElement("button");
numButton.className="btn btn-default";
numButton.setAttribute("type", "button");
numButton.onclick = switchHeading;
btnGroup.appendChild(numButton);
numButton.appendChild(document.createTextNode(i));
}

//add btn group2
var btnGroup2 = document.createElement("div");
btnGroup2.className = "btn-group";
div.appendChild(btnGroup2);

//add some more num buttons
for(var i=5; i<8; i++){
  var numButton = document.createElement("button");
  numButton.className="btn btn-default";
  numButton.setAttribute("type", "button");
  numButton.onclick = switchHeading;
  btnGroup2.appendChild(numButton);
  numButton.appendChild(document.createTextNode(i));
}

//add 8 button
var btnGroup3 = document.createElement("div");
btnGroup3.className ="btn-group";
div.appendChild(btnGroup3);
var ochoButton = document.createElement("button");
ochoButton.className = "btn btn-default";
ochoButton.setAttribute("type", "button");
ochoButton.onclick = switchHeading;
btnGroup3.appendChild(ochoButton);
ochoButton.appendChild(document.createTextNode(8));

//2nd hr
var hr2 = document.createElement("hr");
col.appendChild(hr2);

//Anotha div
var anotherDiv = document.createElement("div");
col.appendChild(anotherDiv);

//last btn group
var btnGroupLg = document.createElement("div");
btnGroupLg.className = "btn-group btn-group-lg";
anotherDiv.appendChild(btnGroupLg);

//LMR buttons
var LButton = document.createElement("button");
LButton.className = "btn btn-default";
LButton.setAttribute("type", "button");
LButton.onclick = switchHeading;
btnGroupLg.appendChild(LButton);
LButton.appendChild(document.createTextNode("Left"));

var MButton = document.createElement("button");
MButton.className = "btn btn-default";
MButton.setAttribute("type", "button");
MButton.onclick = switchHeading;
btnGroupLg.appendChild(MButton);
MButton.appendChild(document.createTextNode("Middle"));

var RButton = document.createElement("button");
RButton.className = "btn btn-default";
RButton.setAttribute("type", "button");
RButton.onclick = switchHeading;
btnGroupLg.appendChild(RButton);
RButton.appendChild(document.createTextNode("Right"));

//add h3
var h3 = document.createElement("h3");
h3.id = "heading";
anotherDiv.appendChild(h3);
h3.appendChild(document.createTextNode("Click a Button!"));

};

createHTML();

function switchHeading() {
   var content = this.innerHTML;
   var h3 = document.getElementsByTagName('h3');
   h3[0].innerHTML = content;
}
</script>
</html>

交换标题按钮文本

1 个答案: