Question

我正在尝试通过单击两个按钮来更改同一div的文本。因为每次打印的文本都应该不同，所以我想到了更改按钮ID的想法。如您所见，每次点击后，我都会分配一个新的ID： chA.id = ("a1A");，但似乎无法正常工作。单击Button A或Button B之后，转弯次数停止计数，并且文字不会更改为我期望的样子。我该怎么办？

 
turncount = 0;
chA = document.getElementById("ButtonA");
chB = document.getElementById("ButtonB");
PrnKey = "Intro";
hideButtons.onclick = () => {
	bint.style.display = 'none';
}
showButtons.onclick = () => {
	bint.style.display = 'inline';
	
}
DivTextBox.onclick = () => {
        bint.style.display = 'inline';
};


document.getElementById("ButtonA").onclick = function () {
	document.getElementById("DivTextBox").innerHTML = "<br><br><br><br><br><br><br>Text explaining Option A<br><br><br><br><br><br><br>";
	turncount ++;
	bint.style.display = 'none';

	ButtonA.innerText = `Option A turn ${turncount}`;
	ButtonB.innerText = `Option B turn ${turncount}`;
	chA.id = ("a1A");
	chB.id = ("a1B");
};
	
document.getElementById("a1A").onclick = function () {
	document.getElementById("DivTextBox").innerHTML = "<br><br><br><br><br><br><br>Text explaining Option a1A<br><br><br><br><br><br><br>";
	turncount ++;
	bint.style.display = 'none';
	a1A.innerText = `Option A turn ${turncount}`;
	a1B.innerText = `Option B turn ${turncount}`;
	chA.id = ("a2A");
	chB.id = ("a2B");
};
	
	document.getElementById("a1B").onclick = function () {
	document.getElementById("DivTextBox").innerHTML = "<br><br><br><br><br><br><br>Text explaining Option a1B<br><br><br><br><br><br><br>";
	turncount ++;
	bint.style.display = 'none';
	a1A.innerText = `Option bA turn ${turncount}`;
	a1B.innerText = `Option bB turn ${turncount}`;
	chA.id = ("b2A");
	chB.id = ("b2B");
};
	

document.getElementById("ButtonB").onclick = function () {
	bint.style.display = 'none';
	document.getElementById("DivTextBox").innerHTML = "<br><br><br><br><br><br><br>Text explaining Option B<br><br><br><br><br><br><br>";
	turncount ++;
	ButtonA.innerText = `Option bA turn ${turncount}`;
	ButtonB.innerText = `Option bB turn ${turncount}`;
	chA.id = ("b1A");
	chB.id = ("b1B");
};
	

	document.getElementById("b1A").onclick = function () {
	document.getElementById("DivTextBox").innerHTML = "<br><br><br><br><br><br><br>Text explaining Option a1B<br><br><br><br><br><br><br>";
	turncount ++;
	bint.style.display = 'none';
	b1A.innerText = `Option b1A turn ${turncount}`;
	b1B.innerText = `Option b1B turn ${turncount}`;
	chA.id = ("b2A");
	chB.id = ("b2B");
};

<div id="DivTextBox">Here is Intro <br><br><br><br><br><br><br> T <br><br><br><br><br><br><br></div>

<div id="bint">
<button id="ButtonA">
Option A
</button>
<button id="ButtonB">
Option B
</button>
</div>
<button id="hideButtons">
 Hide Buttons
 </button>
 <button id="showButtons">
 Show Buttons
 </button>

Answer 1

当您的代码运行时附加了a1A和a1B的点击处理程序时，这些元素尚不存在，因此您的代码将引发错误Cannot set property 'onclick' of null。如果您使用html文件进行开发，并在Chrome之类的浏览器中查看结果，请按F12键打开开发者控制台并查看这些错误。

您应该延迟附加这些处理程序，直到这些元素实际存在为止。大致符合以下条件：

document.getElementById("ButtonA").onclick = function () {
    bint.style.display = 'none';

    ButtonA.innerText = `Option A turn ${turncount}`;
    ButtonB.innerText = `Option B turn ${turncount}`;
    chA.id = ("a1A");
    chB.id = ("a1B");
    //only attach handlers, once those elements actually exist
    attachEventHandlers();
};

//wrap into function for re-use if neede.
function attachEventHandlers() {

  document.getElementById("a1A").onclick = function () {
        turncount++;
      bint.style.display = 'none';
      a1A.innerText = `Option A turn ${turncount}`;
      a1B.innerText = `Option B turn ${turncount}`;
  };

  document.getElementById("a1B").onclick = function () {
    turncount++;
    bint.style.display = 'none';
    a1A.innerText = `Option bA turn ${turncount}`;
    a1B.innerText = `Option bB turn ${turncount}`;
    };
}

我只为buttonA完成了此操作，因此您将获得图片。这是一个玩弄的小提琴：http://jsfiddle.net/apg10hr3/6/

更改按钮ID的Javascript无法正常工作

1 个答案: