如何制作一个当两个元素的类相等时执行的函数？

Question

我正在尝试创建一个包含 2 个段落的网页，并且我给了它们 2 个不同的类。使用 JavaScript，我创建了一个函数，单击时会将它们的类更改为相同的类。我想执行一个函数，当单击后两个段落的类变得相同时，该函数将更改一个段落的文本。

var firstPara = document.getElementById('firstPara');
var secondPara = document.getElementById('secondPara');

function changeClass1() {
firstPara.classList.remove("class1");
firstPara.classList.add("sameClass");
}

function changeClass2() {
secondPara.classList.remove("class2");
secondPara.classList.add("sameClass");
}

var class1 = firstPara.className;
var class2 = secondPara.className;

function changeText() {
   if (class1 === class2) {
   firstPara.innerHTML = "The text is changed!";
 }
}
changeText();

<p id="firstPara" class="class1" onClick="changeClass1()"> This is first Paragraph. </p>
<p id="secondPara" class="class2" onClick="changeClass2()"> This is second Paragraph. </p>

为了知道段落的类已更改，我使用 CSS 为所有类赋予了不同的文本颜色。当我单击段落时，它们的颜色会发生变化，即它们的类会发生变化，但是当我单击两个段落时，它们的颜色会变得相同，即它们会获得相同的类，最后一个更改文本的函数不会执行。我是JavaScript的初学者，对它了解不多。谁能告诉我这个问题的解决方案，为什么该函数没有执行？

Answer 1

您需要在每个 onClick 事件后调用 ChangeText 函数以查看是否进行了某些更改。此外，存储类名的变量应该位于函数内。

示例：

var firstPara = document.getElementById('firstPara');
var secondPara = document.getElementById('secondPara');

function changeClass1() {
  firstPara.classList.remove("class1");
  firstPara.classList.add("sameClass");
  changeText();
}

function changeClass2() {
  secondPara.classList.remove("class2");
  secondPara.classList.add("sameClass");
  changeText();
}

function changeText() {
  const className1 = firstPara.className;
  const className2 = secondPara.className;

  if (className1 === className2) {
    firstPara.innerHTML = "The text is changed!";
  }
}

<p id="firstPara" class="class1" onClick="changeClass1()"> This is first Paragraph. </p>
<p id="secondPara" class="class2" onClick="changeClass2()"> This is second Paragraph. </p>