Not Able To Hide Div Using Condition In Javascript

I have created a website with quiz, where questions are loaded from database, one at a time. At the end of all questions, score is shown. I have created a timer for like below: var

Solution 1:

Make sure that your javascript is being executed after jQuery is being included.

Try this way:

<?php
    if($number_of_all_questions <= $_POST[ 'next_id']){ // Quiz finished, show results 
    echo "<div>
        <h2>Results:</h2>
        <p>Your score is: {$_SESSION['correct_score']} out of 25</p>
        </div>"; 
    $finished = 1;
    }
?>


    <script>
    // let's store it from php variable to javascript
    var finished = "<?php echo $finished; ?>";
    $(document).ready(function(){
        if(finished === 1) {
           $('.zara').hide();
        }
    });
    </script>

Solution 2:

Your script will never run when you get it as a response from an ajax-call, unless you use some evil eval().

Make a function called hide() and load it with your normal javascript:

function hide{
   $('button[onclick='getPreQuestion()']').hide();
   $('.zara').hide();
}

In your PHP only echo the div:

<?php
if($number_of_all_questions <=$ _POST[ 'next_id']){
 echo "<div>
    <h2>Results:</h2>
    <p>Your score is: {$_SESSION['correct_score']} out of 25</p>
    </div>";
 }

and in your ajax-code look for a clue the game has ended. Something like (I don't know much abouth jQuery, so there could be errors in here):

$.ajax({
  ....,
  success: function(result){
        //search for the word 'Results:'. This will return -1 if not found
        var n = result.search("Results:");
        //If the word is found, run function hide() 
        if(n>=0)hide();
       },
  ....
});

Solution 3:

For goodness sake, learn to simplify questions to only the matter at hand, don't just dump your entire code. Would have made it so much easier and faster for us to answer!

Just change the submit button to your form submission or whatever. I'm not going to sort through all that code myself (sorry). This should serve as a working template

 var inv = document.getElementById('invisiblediv');
 var submitb = document.querySelector('button');
 
 submitb.addEventListener('click',function(){
  alert('Submitted form in time!');
  inv.style.visibility = 'visible';
  clearTimeout(testtimer);
 });
 
 var testtimer = setTimeout(function(){
    alert('Time limit expired, showing results!');
    inv.style.visibility = 'visible';
 }, 8000);

#invisiblediv {
  visibility: hidden;
  border: 1px solid black;
  padding: 2px;
  margin-bottom: 10px;
}

<div id="invisiblediv">Hello world!</div>
<button>Show hidden results</button>