爲什麼.setAttribute（）和.removeAttribute方法在我的JavaScript代碼中不起作用？

Question

我創建了一個小遊戲燒錄卡如下圖所示：「正確的」

用戶輸入在文本框中輸入一個正確的答案後，單詞應該以粗體顯示爲綠色，然後CSS屬性應該稍後會被移除。下面是輸入區域中的HTML：

<div> 
    <input type="text" id="answer" style="width: 80%; height: 30px;" placeholder="Enter your answer..." onkeyup="checkAnswer(this,event);" autofocus><br> 
</div> 

這是應該執行的操作如以上所描述的相應的javascript：

function checkAnswer(input, event){ 
    if(event.keyCode == 13){ 
     var answer = document.getElementById("answer").value.toLowerCase(); 
     var answer_style = document.getElementById("answer"); 
     for(var i = 0; i<qs.length; i++){ 
      if(answer == qs[cardIndex]["a"].toLowerCase()){ 
       **input.setAttribute("style", "color:green; font-weight:bold;");** 
       input.value = "Correct!"; 
       setTimeout(function(){input.value="";},1000); 
       **input.removeAttribute("style");** 
      }else{ 
       input.value = "Incorrect!"; 
       setTimeout(function(){input.value="";},1000) 
      } 
     } 
     if(input.value == "Correct!"){ 
      nextCard(); 
     } 
    } 
} 

一切工作在checkAnswer功能除外的setAttribute和的removeAttribute已在代碼片段中加星標的方法。我已經嘗試在for循環之後放置removeAttribute方法，並且不起作用。如果我不包含removeAttribute方法，則setAttribute方法可以工作，但我不希望文本保持綠色。

如果有人能幫助我，這將是偉大的！

如果您需要更多的信息來了解這個問題，請不要猶豫，問問！

謝謝！

Answer 1

您在添加後立即刪除style屬性。移除需要安排在稍後（即，將轉換爲，將該功能轉移至setTimeout），就像input.value="";一樣。

if(answer == qs[cardIndex]["a"].toLowerCase()){ 
    input.setAttribute("style", "color:green; font-weight:bold;");** 
    input.value = "Correct!"; 
} else{ 
    input.value = "Incorrect!"; 
} 
setTimeout(function(){ 
    input.value = ""; 
    input.removeAttribute("style"); 
}, 1000); 

Answer 2

您正在設置該屬性並在同一時刻將其刪除。如果目標是要把它一秒鐘的延遲後取出，然後是這樣的：

setTimeout(function(){ 
    input.value=""; 
    input.removeAttribute("style"); 
},1000); 

Answer 3

把input.removeAttribute中的setTimeout的函數中：

  setTimeout(function(){input.value="";input.removeAttribute("style");},1000); 

稍後將刪除該樣式1秒。

Answer 4

我認爲input.removeAttribute("style");是刪除原來設置的整個樣式。我建議的另一個更簡單的方法是分配一些CSS類並根據類定義樣式。使用setAttribute和removeAttribute方法可能沒有用，但可以提供相同的功能。