字符串與標籤文本的比較javascript

Question

我創建了一個webiste，我基本上需要查看字符串是否匹配以便將結果標記爲正確（綠色）或錯誤（紅色）。

我遇到的問題是它總是變成紅色，即使字符串都是相同的，我不知道我出錯的地方。

下面是代碼

var checkedButton = getCheckedRadio(document.getElementsByName("answer")); 
     var id = checkedButton.id; 
     if(id=="answer1"){ 
      var answer1 = document.getElementById("answer1text"); 
      if(rightAnswer == answer1.innerHTML){ 
        answer1.style.color = "#33FF00"; 
      } 
      else{ 
        answer1.style.color = "red"; 
      } 

     } 
     else if(id=="answer2"){... 

我已經檢查rightAnswer，並且answer1.innerHTML與alert()，它給相同的結果，但是當我嘗試對它們進行比較......還與===運營商嘗試它不工作，同樣的事情...

HTML代碼編輯

<form> 
      <div id="left"> 
       <div id="a1"> 
        <input type="radio" name="answer" value="" checked id="answer1"> 
        <label id="answer1text">Odgovor na prvo pitanje</label> 
       </div> 
       <div id="a2"> 
        <input type="radio" name="answer" value="" id="answer2"> 
        <label id="answer2text">Odgovor na prvo pitanje</label> 
       </div> 
      </div> 
      <div id="right"> 
       <div id="a3"> 
        <input type="radio" name="answer" value="" id="answer3"> 
        <label id="answer3text">Odgovor na prvo pitanje</label> 
       </div> 
       <div id="a4"> 
        <input type="radio" name="answer" value="" id="answer4"> 
        <label id="answer4text">Odgovor na prvo pitanje</label> 
       </div> 
      </div>... 

EDIT 2 - 所有的Javascript

 <script language="javascript" type="text/javascript"> 
    var counter = 1; 
    var split; 
    var rightAnswer; 
    function potvrdi(){ 
      counter = getCookie("counter"); 

      if(counter == "")counter = 1; 

      var potvrdi = document.getElementById("gmedu").innerHTML; 
      if(potvrdi == "Potvrdi"){ 
       checkAnswer(); 
       document.getElementById("gmedu").innerHTML = "Dalje"; 

      } 
      else{ 
       alert(counter); 
       setCookie("counter",(parseInt(counter)+1)); 
       doSplit(); 
       document.getElementById("gmedu").innerHTML = "Potvrdi"; 
       document.getElementById("answer1text").style.color = "black"; 
       document.getElementById("answer2text").style.color = "black"; 
       document.getElementById("answer3text").style.color = "black"; 
       document.getElementById("answer4text").style.color = "black"; 
      } 

     return false; 
    } 
    function setCookie(cname, cvalue) { 
     document.cookie = cname + "=" + cvalue + "; "; 
    } 
    function getCookie(cname) { 
     var name = cname + "="; 
     var ca = document.cookie.split(';'); 
     for(var i=0; i<ca.length; i++) { 
      var c = ca[i]; 
      while (c.charAt(0)==' ') c = c.substring(1); 
      if (c.indexOf(name) == 0) return c.substring(name.length,c.length); 
     } 
     return ""; 
    } 
    function doSplit(){ 
     var text = "1.\r\n"+...\\here is a huge string of text 
     split = text.split(/\b\d+\./); 
     var split1 = split[counter].split(/\n\w+\)/); 
     rightAnswer = split1[1]; 
     split1 = randomizeAnswers(split1); 
     document.getElementById("question").innerHTML = split1[0]; 
     document.getElementById("answer1text").innerHTML = split1[1]; 
     document.getElementById("answer2text").innerHTML = split1[2]; 
     if(split1.length > 3){ 
      document.getElementById("answer3text").innerHTML = split1[3]; 
      document.getElementById("a3").style.visibility = "visible"; 
      } 
     else 
      document.getElementById("a3").style.visibility = "hidden"; 
     if(split1.length > 4){ 
      document.getElementById("answer4text").innerHTML = split1[4]; 
      document.getElementById("a4").style.visibility = "visible"; 
     } 
     else 
      document.getElementById("a4").style.visibility = "hidden"; 
} 
    function randomizeAnswers(split1){ 
     var length = split1.length-1; 
     var random = (parseInt(Math.random()*length))+1; 
     var tmp = split1[1]; 
     split1[1] = split1[random]; 
     split1[random] = tmp; 
     return split1; 
    } 
    function checkAnswer(){ 
     var checkedButton = getCheckedRadio(document.getElementsByName("answer")); 
     var id = checkedButton.id; 
     if(id=="answer1"){ 
      var answer1 = document.getElementById("answer1text"); 
      console.log(answer1.innerHTML) 
      console.log(rightAnswer) 
      if(rightAnswer === document.getElementById("answer1text").value){ 
        answer1.style.color = "#33FF00"; 
        alert("TACNO!"); 
      } 
      else{ 
        answer1.style.color = "red"; 
        alert("NETACNO!"); 
      } 

     } 
     else if(id=="answer2"){ 
      var answer2 = document.getElementById("answer2text"); 
      if(rightAnswer == (answer2.innerHTML)) 
       answer2.style.color = "#33FF00"; 
      else  
       answer2.style.color = "red"; 
     } 
     else if(id=="answer3"){ 
      var answer3 = document.getElementById("answer3text"); 
      if(rightAnswer == (answer3.innerHTML)) 
       answer3.style.color = "#33FF00"; 
      else  
       answer3.style.color = "red"; 
     } 
     else if(id=="answer4"){ 
      var answer4 = document.getElementById("answer4text"); 
      if(rightAnswer == (answer4.innerHTML)) 
       answer4.style.color = "#33FF00"; 
      else  
       answer4.style.color = "red"; 
     } 
    } 
    function getCheckedRadio(radio_group) { 
     for (var i = 0; i < radio_group.length; i++) { 
      var button = radio_group[i]; 
      if (button.checked) { 
       return button; 
      } 
     } 
     return undefined; 
    } 

</script> 

Answer 1

依我之見，這種兩線

var text = "1.\r\n"+...\\here is a huge string of text 
split = text.split(/\b\d+\./); 

在split[1]不只是文本拆分後您的問題，但文字以\r\n開頭，
但是！在html中的間隔符號縮小到只有一個，在你的情況下innerHTML將開始whith \n，這就是爲什麼你的比較錯誤。

我看到修復此

1. 變化分裂表達至少兩種方式，

   split = text.split(/\b\d+\.\r\n/); 
   

2. 比較

   rightAnswer.replace(/\r|\n/g,"") == answer1.innerHTML.replace(/\r|\n/g,"") 
   

Answer 2

嘗試使用textContent獲得標籤的文本，而不是innerHTML：

if(rightAnswer == answer1.textContent){ 
    answer1.style.color = "#33FF00"; 
}else{ 
    answer1.style.color = "red"; 
} 

注：也許問題是rightAnswer你應該告訴我們從哪裏獲得這個價值。

希望這會有所幫助。

Answer 3

我認爲你應該使用textContent代替innerHTML和trim它：

if(rightAnswer == answer1.textContent.trim()){ 
... 
}