JavaScript-在滿足if / elseif條件時更改類

Question

我正在研究一個腳本，該腳本讀取文本文件並根據.txt文件的內容更改div中的文本。
但這不是我的問題。 我不只是純文本，背景顏色應該根據滿足if / elseif / else函數的條件而改變。

 var client = new XMLHttpRequest(); client.open('GET', 'text.txt'); client.onreadystatechange = function checktxt() { if(client.responseText =='not') { document.getElementById("response").innerHTML="Connect is working"; var boxgreen = document.querySelector("#response"); boxgreen.classList.add("green"); } else if (client.responseText =='younger') { document.getElementById("response").innerHTML="Connect is working"; var boxgreen = document.querySelector("#response"); boxgreen.classList.add("green"); } else { document.getElementById("response").innerHTML="Connect isn't working!"; var boxred = document.querySelector("#response"); boxred.classList.add("red"); } } client.send(); 

 .green { width: 140px; height: 140px; background: #68B267; color: white; } .red { width: 140px; height: 140px; background: #ec4f3e; color: white; } 

 <div id="response"></div> 

我的第一個嘗試是在if / else函數中添加一個“ classList.add”，但是即使滿足“ if”條件，它也會將該類更改為“ red”，因為最后已對其進行了設置。
我對javascript很陌生，沒有使用ajax或jquery的經驗，但是也許這就是我想要的。

Answer 1

如果代碼已經運行，則需要刪除已添加的類。 client.onreadystatechange =函數checktxt（）{

有了您的代碼，您就可以調用

boxgreen.classList.remove("red");  //or green for the other case

並且它將起作用。

或者，您可以使用切換按鈕並簡化代碼，以免重復出現相同的行。

client.onreadystatechange = function() {

  var isValid = client.responseText == 'not' || client.responseText == 'younger',
      text = isValid ? "Connect is working" : "Connect isn't working!",
      box = document.querySelector("#response");

  box.innerHTML = text;
  box.classList.toggle("green", isValid);
  box.classList.toggle("red", !isValid);

}