当我加载页面时，更改为绿色按钮显示。
当我单击该按钮时，显示更改为紫色按钮。
但是当我再次单击按钮时(基于innherHTML)，预期函数(onePurple())没有被触发，但是twoGreen()被触发。
我正在尝试执行基于innerHTML的代码，但看起来它没有发生。
这是 html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ul class="existing-class">
<li>This is li</li>
</ul>
<button id="MyElement">Change to two column - green</button>
<p>red - default</p>
<p>green - two columns</p>
</body>
</html>
<script src="script.js"></script>
这是js
const myButton = document.querySelector("#MyElement");
const oneColumnText = `Change to one column - purple`;
const twoColumnText = `Change to two column - green`;
var myClass = document.querySelector(".existing-class");
function twoGreen() {
console.log("twoGreen function")
myClass.classList.add("two");
myButton.innerHTML = oneColumnText;
}
function onePurple() {
console.log("onePurple function")
myClass.classList.remove("two");
myClass.classList.add("one");
myButton.innerHTML = twoColumnText;
}
// window.onload = function() {
if (myButton.innerHTML === twoColumnText) {
myButton.addEventListener('click', twoGreen, false);
}
if (myButton.innerHTML === oneColumnText) {
myButton.addEventListener('click', onePurple, false);
}
// }
CSS:
.existing-class li {
color: red;
}
.existing-class.two li {
color: green;
}
.existing-class.one li {
color: purple;
}
这是 jsfillde: https://jsfiddle.net/jsfiddleuser2018/etkjv6x6/
我错过了什么？
最佳答案
你的逻辑是错误的，这样每当innerHTML发生变化时，你都需要重新附加click事件，这将导致附加的无限循环每次单击按钮时 >click 事件。
这里最好的方法是将 if block 逻辑包装在事件回调中:
MyElement.addEventListener('click', function() {
if (MyElement.innerHTML === twoColumnText) {
twoGreen();
} else if (MyElement.innerHTML === oneColumnText) {
onePurple();
}
});
演示:
var MyElement = document.querySelector("#MyElement");
const oneColumnText = `Change to one column - purple`;
const twoColumnText = `Change to two column - green`;
function twoGreen() {
console.log("twoGreen function")
document.querySelector(".existing-class").classList.add("two");
document.querySelector(".existing-class").classList.remove("one");
MyElement.innerHTML = oneColumnText;
}
function onePurple() {
console.log("onePurple function")
document.querySelector(".existing-class").classList.remove("two");
document.querySelector(".existing-class").classList.add("one");
MyElement.innerHTML = twoColumnText;
}
MyElement.addEventListener('click', function() {
if (MyElement.innerHTML === twoColumnText) {
twoGreen();
} else if (MyElement.innerHTML === oneColumnText) {
onePurple();
}
});.existing-class li {
color: red;
}
.existing-class.two li {
color: green;
}
.existing-class.one li {
color: purple;
}<ul class="existing-class">
<li>This is li</li>
</ul>
<button id="MyElement">Change to two column - green</button>
<p>red - default</p>
<p>green - two columns</p>这是您的updated working Fiddle .
关于javascript - 基于innherHTML点击事件触发不同的功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48586866/