CODEWITHSUNDEEP
javascript
Sophile
Sophile

Reputation: 307

How to reuse the same javascript code in a single blog?

I have a simple javascript question and answer section on my blog. When the user selects an option, if the option is correct, it turns green , else the selected answer turns red and the answer is revealed by making it green. Finally the explanation division is shown

 <h2>Questions</h2>
    
    <div id="Q&A" style="background:white;">
    
    <p>1. If we increase the frequency of oscillation, the velocity of the wave... </p>
    
    
    <div id="W1box" style="background:white; font-size:20px;padding:10px;border: 2px solid black;" >
    <input id="W1input" name="option" type=radio value="wrong" onclick="showwrong1()"> 
    Increases </input>
    </div>
    
    <div id="W2box" style="background:white; font-size:20px;padding:10px;border: 2px solid black;" >
    <input id="W2input" name="option" type=radio value="wrong" onclick="showwrong2()"> 
    Decreases </input>
    </div>
    
    <div id="C1box" style="background:white; font-size:20px;padding:10px;border: 2px solid black;" >
    <input id="C1input" name="option" type=radio value="optionA" onclick="showcorrect()"> 
    Does not change </input>
    </div>
    
    
    
    
    <div  id="correctexp" style="background:white; display:none; "  >
    Correct!<br>
      $v=f\lambda$ does not mean that velocity is directly proportional to frequency.<br>
    When we increase frequency($f$), waves are closer-hence the wavelength($\lambda$)  decreases keeping the velocity unchanged ($v=f\lambda$).<br>
      Velocity only depends upon the material property of the medium of propagation.<br>
      For example sound waves in water moves faster than in air because water has higher density.
      <br>But the speed of sound waves does not change if we speak in higher frequency.
    </div>
    
    <div  id="wrongexp" style="background:white; display:none; "  >
    
      $v=f\lambda$ does not mean that velocity is directly proportional to frequency.<br>
    When we increase frequency($f$), waves are closer-hence the wavelength($\lambda$)  decreases keeping the velocity unchanged ($v=f\lambda$).<br>
      Velocity only depends upon the material property of the medium of propagation.<br>
      For example sound waves in water moves faster than in air because water has higher density.
      <br>But the speed of sound waves does not change if we speak in higher frequency.
    </div>
    
    
    
    
    </div>
        
    <script type="text/javascript" language="javascript" charset="utf-8">
    
    function showcorrect()
      {
        
      var correct = document.getElementById("C1input");
      var x = document.getElementById("correctexp");  
       if(correct.checked==true)
          document.getElementById("C1box").style.backgroundColor="PaleGreen";
       if (x.style.display === "none") {
        x.style.display = "block";}
      }
          
     
            
    function showwrong1()
      {
      var wrong = document.getElementById("W1input");
      var x = document.getElementById("wrongexp");   
        if(wrong.checked==true)
        document.getElementById("W1box").style.backgroundColor="#FAA0A0";
        document.getElementById("C1box").style.backgroundColor="PaleGreen";
       
        if (x.style.display === "none") {
        x.style.display = "block";}
      
        
      }    
      
    function showwrong2()
      {
      var wrong = document.getElementById("W2input");
        if(wrong.checked==true)
        document.getElementById("W2box").style.backgroundColor="#FAA0A0";
        document.getElementById("C1box").style.backgroundColor="PaleGreen";
        
        var x = document.getElementById("wrongexp");  
        if (x.style.display === "none") {
        x.style.display = "block";}
      
      
      }      
      
      
      
    </script>

But i want to add another question below this. But when i copy and paste this code, it gives errors like when I click the option in the second question, the box in the first question turns red and so on.

I know that I can change the id and name of the functions, But is there a more efficient way to do this because I might have to include many questions like this?

Upvotes: 0

Views: 63

Answers (1)

Kumar Swapnil
Kumar Swapnil

Reputation: 190

Write reusable function something like:

function showwrong(v1, v2, v3)
      {
      var wrong = document.getElementById(v1);
      var x = document.getElementById("wrongexp");   
        if(wrong.checked==true)
        document.getElementById(v2).style.backgroundColor="#FAA0A0";
        document.getElementById(v3).style.backgroundColor="PaleGreen";
       
        if (x.style.display === "none") {
        x.style.display = "block";}
      
        
      }

and then you can simply call it with appropriate arguments, like:

showwrong("W1input", "W1box", "C1box")

Upvotes: 1

Related Questions