How to hide an element depending on a boolean variable?

Question

I have this jsp:

 <table>

                            <% ArrayList<Something> monAM = (ArrayList<Something>) request.getAttribute("monAM");
                               Time t = new Time();

                            for (Prescription p : monAM) {
                                boolean asd= t.lastTaken(p.getDay(), p.getDateLastTaken());

                            %>
                            <tr>

                            <input type="hidden" value="<%=asd%>" name="display"/>
                                <td >
                                    <div >
                                    <input id="nottaken"type="checkbox" name="drinkmed" value="<%=p.getPrescriptionID()%>"
                                           />
                                    <p id="taken" >Taken</p>
                                    </div>
                                </td>

                            </tr>
                            <%}%>

                        </table>

Javascript code:

<script>
        var asd = document.getElementById("display").value;
       $(document).ready(function() {

            if(asd==="true"){
                document.getElementById("taken").style.display="block";
                document.getElementById("nottaken").style.display="none";
            }else{
                document.getElementById("nottaken").style.display="block";
                document.getElementById("taken").style.display="none";
            }

        });

    </script>

The java codes and the methods are working perfectly however I'm having a hard time with displaying the elements using javascript. I want to display the input #nottaken if the boolean asd is false and the

#taken when asd is true.

Answer 1

Since you are checking value of hidden field before document.ready so how value of an element can be read before document.ready.Check value of hidden field in document.ready. Also you should have included Jquery file. Try this

<script>

   $(document).ready(function() {
        var asd = document.getElementById("display").value;
        if(asd==="true"){
            document.getElementById("taken").style.display="block";
            document.getElementById("nottaken").style.display="none";
        }else{
            document.getElementById("nottaken").style.display="block";
            document.getElementById("taken").style.display="none";
        }

    });

</script>