JavaScript在末尾添加css文本

我的代碼正常工作，我只需要收音機未檢查然後按繼續，在問題結束時它將顯示require。我不知道如何使用JavaScript來做到這一點。JavaScript在末尾添加css文本

我也曾嘗試questions[j].className = "highlight";

HTML：

<form> 
    <div class="str_Radio"> 
    <p> 1. </p> 
    <label> I cant make this work. </label> 
    <div class="strQuestion"> 
     <input type="radio" name="Dq[1]" value="1">1 
     <input type="radio" name="Dq[1]" value="2">2 
     <input type="radio" name="Dq[1]" value="3">3 
     <input type="radio" name="Dq[1]" value="4">4 
     <input type="radio" name="Dq[1]" value="5">5 
     <input type="radio" name="Dq[1]" value="6">6 
     <input type="radio" name="Dq[1]" value="7">7 
     <input type="radio" name="Dq[1]" value="8">8 
     <input type="radio" name="Dq[1]" value="9">9 
     <input type="radio" name="Dq[1]" value="10">10 
     </div> 
     </div><!-- 11 --> 

     <div class="str_Radio"> 
     <p> 2. </p> 
     <label> this will not work 2. </label> 
     <div class="strQuestion"> 
     <input type="radio" name="iq[1]" value="1">1 
     <input type="radio" name="iq[1]" value="2">2 
     <input type="radio" name="iq[1]" value="3">3 
     <input type="radio" name="iq[1]" value="4">4 
     <input type="radio" name="iq[1]" value="5">5 
     <input type="radio" name="iq[1]" value="6">6 
     <input type="radio" name="iq[1]" value="7">7 
     <input type="radio" name="iq[1]" value="8">8 
     <input type="radio" name="iq[1]" value="9">9 
     <input type="radio" name="iq[1]" value="10">10 
     </div> 
     </div><!-- 22 --> 

    <button id="link" name="data" type="button" onclick="return validateForm('strQuestion');">Continue</button> 
</form>

CSS：

.highlight{ 
    content: "*"; 
    color:red; 
}

的JavaScript：

function validateForm(cname) { 
     var questions = document.getElementsByClassName(cname); 
      formValid = true; 
     for(var j=0; j<questions.length; j++) { 
      if(!isOneInputChecked(questions[j], "radio")) { 
       formValid = false; 

       questions[j].style.border = "2px solid red"; 
       // i use loop to target each question here i change css. 

      } 
     } 
     return formValid; 
} 

function isOneInputChecked(sel) { 
     var inputs = sel.getElementsByTagName('input'); 
     for (var k=0; k<inputs.length; k++) { 
      if(inputs[k].checked) 
       return true; 
     } 
     // End of the loop, return false 
     return false; 
}

和我的代碼返回秀真的werid，它不會針對那些不再被檢查的人。我要如何完成這個？謝謝。

來源

2015-01-21 user3233074

使用CSS :: after僞元素可以做到這一點。

在僞元素here之前的::之後，CSS-Tricks有很好的寫法。

.highlight::after { 
 
    content: "* require"; 
 
    color:red; 
 
}

<html> 
 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
<script type="text/javascript"> 
 

 
function validateForm(cname) { 
 
     var questions = document.getElementsByClassName(cname); 
 
      formValid = true; 
 
     for(var j=0; j<questions.length; j++) { 
 
      if(!isOneInputChecked(questions[j], "radio")) { 
 
       formValid = false; 
 

 
       questions[j].style.border = "2px solid red"; 
 
       questions[j].className = "highlight"; 
 
       // i use loop to target each question here i change css. 
 

 
      } 
 
     } 
 
     return formValid; 
 
} 
 

 
function isOneInputChecked(sel) { 
 
     var inputs = sel.getElementsByTagName('input'); 
 
     for (var k=0; k<inputs.length; k++) { 
 
      if(inputs[k].checked) 
 
       return true; 
 
     } 
 
     // End of the loop, return false 
 
     return false; 
 
} 
 
</script> 
 
</head> 
 
<body> 
 
<form> 
 
       <div class="str_Radio"> 
 
       <p> 1. </p> 
 
       <label> I cant make this work. </label> 
 
       <div class="strQuestion"> 
 
       <input type="radio" name="Dq[1]" value="1">1 
 
       <input type="radio" name="Dq[1]" value="2">2 
 
       <input type="radio" name="Dq[1]" value="3">3 
 
       <input type="radio" name="Dq[1]" value="4">4 
 
       <input type="radio" name="Dq[1]" value="5">5 
 
       <input type="radio" name="Dq[1]" value="6">6 
 
       <input type="radio" name="Dq[1]" value="7">7 
 
       <input type="radio" name="Dq[1]" value="8">8 
 
       <input type="radio" name="Dq[1]" value="9">9 
 
       <input type="radio" name="Dq[1]" value="10">10 
 
       </div> 
 
       </div><!-- 11 --> 
 

 
       <button id="link" name="data" type="button" onclick="return validateForm('strQuestion');">Continue</button> 
 
</form> 
 
</body> 
 
</html>

來源

2015-01-21 04:23:19 Mike

我tryied是 – user3233074 2015-01-21 05:15:46

可以嘗試重新之前粘貼我的代碼？一旦我有2個問題，它不會再工作了。 – user3233074 2015-01-21 05:16:53

什麼不起作用？請確保您包含問題[j] .className =「highlight」，它不在您最初發布的代碼中。它的工作原理是 – Mike 2015-01-21 05:22:16

JavaScript在末尾添加css文本

回答

相關問題