在js中将style更改为空类

Question

我得到了一个没有连接到任何标签的类，我想通过Javascript改变他的属性。该类应该仅在特定情况下(例如，单击按钮)连接到元素。

所以，我得到了这个类azzeccato，随着主题的变化，它的属性背景颜色应该改变，但我得到了一个错误:null变量，因为正如我之前所说，它没有连接到任何元素。

我试着让它成为一个id元素，但我没有找到更多的运气。

代码如下:

let theme = document.querySelectorAll('.theme');
let fc = document.querySelector('.Flist');
let azzeccato = document.querySelector('.azzeccato');
/*CHOOSING THEME FUNCTION DOES (IT IS OK)*/
function themes(e) {
  if (e.target == theme[0] || e.target == theme[0].children[0] || e.target == theme[0].children[1] || e.target == theme[0].children[1].children[0]) {
    theme[0].classList.add('backSelection');
    theme[1].classList.remove('backSelection');
    theme[2].classList.remove('backSelection');
    theme[3].classList.remove('backSelection');
    theme[4].classList.remove('backSelection');
  } else if (e.target == theme[1] || e.target == theme[1].children[0] || e.target == theme[1].children[1] || e.target == theme[1].children[1].children[0]) {
    theme[0].classList.remove('backSelection');
    theme[1].classList.add('backSelection');
    theme[2].classList.remove('backSelection');
    theme[3].classList.remove('backSelection');
    theme[4].classList.remove('backSelection');
  } else if (e.target == theme[2] || e.target == theme[2].children[0] || e.target == theme[2].children[1] || e.target == theme[2].children[1].children[0]) {
    theme[0].classList.remove('backSelection');
    theme[1].classList.remove('backSelection');
    theme[2].classList.add('backSelection');
    theme[3].classList.remove('backSelection');
    theme[4].classList.remove('backSelection');
  } else if (e.target == theme[3] || e.target == theme[3].children[0] || e.target == theme[3].children[1] || e.target == theme[3].children[1].children[0]) {
    theme[0].classList.remove('backSelection');
    theme[1].classList.remove('backSelection');
    theme[2].classList.remove('backSelection');
    theme[3].classList.add('backSelection');
    theme[4].classList.remove('backSelection');
  } else {
    theme[0].classList.remove('backSelection');
    theme[1].classList.remove('backSelection');
    theme[2].classList.remove('backSelection');
    theme[3].classList.remove('backSelection');
    theme[4].classList.add('backSelection');
  }
}
/*HERE IS THE PROBLEM*/
if (theme[0].classList.contains('backSelection')) {
  fc.children[0].style.backgroundColor = '#AAAAAA';
  azzeccato.style.backgroundColor = '#2ECC40'; //null class
} else if (theme[1].classList.contains('backSelection')) {
  fc.children[0].style.backgroundColor = '#283747';
  azzeccato.style.backgroundColor = '#DE354C'; //null class
} else if (theme[2].classList.contains('backSelection')) {
  fc.children[0].style.backgroundColor = '#85144b';
  azzeccato.style.backgroundColor = '#FF4136'; //null class
} else if (theme[3].classList.contains('backSelection')) {
  fc.children[0].style.backgroundColor = '#001f3f';
  azzeccato.style.backgroundColor = '#0074D9'; //null class
} else {
  fc.children[0].style.backgroundColor = '#DDAF94';
  azzeccato.style.backgroundColor = '#266150'; //null class
}

.azzeccato {
  display: block;
  /*actually i put display hoping to make the whole thing work but it is not the case, so it's not necessary*/
  color: white;
  background-color: #2ECC40;
}
.Flist {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background-color: #F3F3F3;
  overflow-y: scroll;
  z-index: 2;
}
.Flist>div {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  background-color: #AAAAAA;
  /*#932432*/
}
.Flist>div>p {
  color: #F3F3F3;
  letter-spacing: 2px;
  margin-top: 25px;
  margin-left: 20px;
  margin-bottom: 25px;
}
.Flist>p {
  padding: 10px;
}
.FlistToggle {
  opacity: 0;
  position: absolute;
  width: 25px;
  height: 25px;
  right: 0;
  bottom: 0;
  cursor: pointer;
}

/*themes DOES NOT CHECK THIS PART IS JUST STYLE*/
.themes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  margin-left: 20px;
}
.theme {
  cursor: pointer;
  display: flex;
  flex: 1 0 21%;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
  padding: 5px;
}
.theme>p {
  font-size: 1.5em;
}
.themeRoll {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-left: 20px;
}
.backSelection {
  border-radius: 50px;
  background-color: rgba(0, 0, 0, 0.7);
}
.mezzo {
  position: absolute;
  width: 25px;
  height: 50px;
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
}
.green-apple {
  background-color: #AAAAAA;
}
.green-apple>div {
  background-color: #2ECC40;
}
.strawberry {
  background-color: #283747;
}
.strawberry>div {
  background-color: #DE354C;
}
.maroon {
  background-color: #FFDC00;
}
.maroon>div {
  background-color: #85144b;
}
.blue-sky {
  background-color: #0074D9;
}
.blue-sky>div {
  background-color: #001f3f;
}
.tin-olive {
  background-color: #266150;
}
.tin-olive>div {
  background-color: #DDAF94;
}

<html>
<body>
  <div class="themes">
    <div class="theme backSelection" onclick="themes(event)">
      <p>Green Apple</p>
      <div class="themeRoll green-apple">
        <div class="mezzo"></div>
      </div>
    </div>
    <div class="theme" onclick="themes(event)">
      <p>Strawberry</p>
      <div class="themeRoll strawberry">
        <div class="mezzo"></div>
      </div>
    </div>
    <div class="theme" onclick="themes(event)">
      <p>Maroon</p>
      <div class="themeRoll maroon">
        <div class="mezzo"></div>
      </div>
    </div>
    <div class="theme" onclick="themes(event)">
      <p>Blue sky</p>
      <div class="themeRoll blue-sky">
        <div class="mezzo"></div>
      </div>
    </div>
    <div class="theme" onclick="themes(event)">
      <p>Tin Olive</p>
      <div class="themeRoll tin-olive">
        <div class="mezzo"></div>
      </div>
    </div>
  </div>
  <div class="Flist">
    <div>
      <p>COLORS</p>
    </div>
    <p>a</p>
    <p>b</p>
    <p>c</p>
    <p>d</p>
  </div>
  <button style="position:absolute; top:0;left:0;" onclick="fc.children[1].classList.add('azzeccato');">add color</button>
</body>
</html>

你知道如何修改这个类吗?

Answer 1

您最初为.azzecato选择了文档，但是您需要查询何时触发事件。最初，没有元素有这个类，变量为null，但在事件触发后，同样的queryselector应该返回一个元素。

移动let azzeccato = document.querySelector('.azzeccato');到themes函数。