Question

当我加载页面时，切换到绿色按钮显示当我点击该按钮时，切换到紫色按钮显示。

但是当我再次点击按钮（基于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/

我错过了什么？

Answer 1

您的逻辑是错误的，这样，只要click发生更改，您就需要重新附加innerHTML事件，每次发生时都会导致无限循环附加click事件单击按钮。

这里最好的方法是将if blocks逻辑包装在事件回调中：

MyElement.addEventListener('click', function() {
  if (MyElement.innerHTML === twoColumnText) {
    twoGreen();
  } else if (MyElement.innerHTML === oneColumnText) {
    onePurple();
  }
});

<强>演示：

＆＃13;

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();
  }

});

＆＃13;

.existing-class li {
  color: red;
}

.existing-class.two li {
  color: green;
}

.existing-class.one li {
  color: purple;
}

＆＃13;

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

＆＃13;

这是您的updated working Fiddle。

Answer 2

＆＃13;

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.remove("one");
    document.querySelector(".existing-class").classList.add("two");
    MyElement.innerHTML = oneColumnText;
    MyElement.removeEventListener('click',twoGreen,false);
    MyElement.addEventListener('click', onePurple);
    
}

function onePurple() {
    console.log("onePurple function")
    document.querySelector(".existing-class").classList.remove("two");
    document.querySelector(".existing-class").classList.add("one");
    MyElement.innerHTML = twoColumnText;
    MyElement.removeEventListener('click',onePurple,false);
		MyElement.addEventListener('click', twoGreen);

}



// window.onload = function() {
if (MyElement.innerHTML === twoColumnText) {
    MyElement.addEventListener('click', twoGreen);
}
if (MyElement.innerHTML === oneColumnText) {
    MyElement.addEventListener('click', onePurple);
}

＆＃13;

.existing-class li {
    color: red;
}

.existing-class.two li {
    color: green;
}

.existing-class.one li {
    color: purple;
}

＆＃13;

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

＆＃13;

在窗口加载时附加功能后，您需要在点击时更新此功能。请尝试以下方法：

function twoGreen() {
console.log("twoGreen function")
document.querySelector(".existing-class").classList.add("two");
MyElement.innerHTML = oneColumnText;

MyElement.addEventListener('click', onePurple);

}

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', twoGreen);

}

基于innherHTML触发点击事件的不同功能

2 个答案: