0
我正在處理一個挑戰，需要我只使用JavaScript（不jQuery）。我用十二個不同的按鈕創建了一個HTML，並在底部標題。我想在點擊時用按鈕文本切換標題，但大多會收到錯誤「Uncaught TypeError：無法設置屬性'innerHTML'爲null/undefined。」我包括了整個腳本，我知道我的createHTML函數可以使用一些清理，但我只包含它，所以你可以看到我如何添加點擊處理程序。 switchHeading函數位於底部。交換標題與按鈕文字
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;
}
此代碼需要for循環來生成所有這些按鈕。 –