How to hide image based on variable value using JavaScript?

Question

I am trying to hide image in my HTML page using JavaScript. I have defined a function hide1() which is called as soon as page loads using onload in body tag. Function hide1() checks value of filename and based on that it hides image particular tag based on its id. The code is working fine till one of the if function is not satisfied.
For example, it will hide first 2 image if filename1 and filename 2 is null but if filename 3 not null and again filename 4 is null than it will not hide image 4.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<link href="css/lightbox.min.css" rel="stylesheet">

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Audit Evidence</title>
</head>
<body onload="hide1()">


<%String filename1 = (String)request.getAttribute("filename1"); %>
<%String filename2 = (String)request.getAttribute("filename2"); %>
<%String filename3 = (String)request.getAttribute("filename3"); %>
<%String filename4 = (String)request.getAttribute("filename4"); %>
<%String filename5 = (String)request.getAttribute("filename5"); %>
<%String filename6 = (String)request.getAttribute("filename6"); %>
<%String filename7 = (String)request.getAttribute("filename7"); %>
<%String filename8 = (String)request.getAttribute("filename8"); %>
<%String filename9 = (String)request.getAttribute("filename9"); %>
<%String filename10 = (String)request.getAttribute("filename10"); %>
<%String filename11 = (String)request.getAttribute("filename11"); %>
<%String filename12 = (String)request.getAttribute("filename12"); %>
<%-- 
<img src="/AuditEvidenceImages/<%=filename1%>" ><BR>
<%=filename1%><BR><BR>

<img src="/AuditEvidenceImages/<%=filename2%>" ><BR>
<%=filename2%><BR><BR>

<img src="/AuditEvidenceImages/<%=filename3%>" ><BR>
<%=filename3%><BR><BR> 

<img id="imgZoom" src="/AuditEvidenceImages/<%=filename1%>"><BR> --%>

<a href="/AuditEvidenceImages/<%=filename1%>" data-lightbox="AuditEvidence" data-title="first image"><img id="filename1" class="Evidence" src="/AuditEvidenceImages/<%=filename1%>" alt="" height="150px" width="150px"  /></a>
<a href="/AuditEvidenceImages/<%=filename2%>" data-lightbox="AuditEvidence" data-title="second image"><img id="filename2" class="Evidence" src="/AuditEvidenceImages/<%=filename2%>" alt="" height="150px" width="150px"/></a>
<a href="/AuditEvidenceImages/<%=filename3%>" data-lightbox="AuditEvidence" data-title="third image"><img id="filename3"  class="Evidence" src="/AuditEvidenceImages/<%=filename3%>" alt="" height="150px" width="150px"/></a>
<a href="/AuditEvidenceImages/<%=filename4%>" data-lightbox="AuditEvidence" data-title="fourth image"><img id="filename4" class="Evidence" src="/AuditEvidenceImages/<%=filename4%>" alt="" height="150px" width="150px"/></a>
<a href="/AuditEvidenceImages/<%=filename5%>" data-lightbox="AuditEvidence" data-title="fifth image"><img id="filename5" class="Evidence" src="/AuditEvidenceImages/<%=filename5%>" alt="" height="150px" width="150px"/></a>
<a href="/AuditEvidenceImages/<%=filename6%>" data-lightbox="AuditEvidence" data-title="sixth image"><img id="filename6" class="Evidence" src="/AuditEvidenceImages/<%=filename6%>" alt="" height="150px" width="150px"/></a>
<a href="/AuditEvidenceImages/<%=filename7%>" data-lightbox="AuditEvidence" data-title="seventh image"><img id="filename7" class="Evidence" src="/AuditEvidenceImages/<%=filename7%>" alt="" height="150px" width="150px"/></a>
<a href="/AuditEvidenceImages/<%=filename8%>" data-lightbox="AuditEvidence" data-title="eighth image"><img id="filename8" class="Evidence" src="/AuditEvidenceImages/<%=filename8%>" alt="" height="150px" width="150px"/></a>
<a href="/AuditEvidenceImages/<%=filename9%>" data-lightbox="AuditEvidence" data-title="ninth image"><img id="filename9" class="Evidence" src="/AuditEvidenceImages/<%=filename9%>" alt="" height="150px" width="150px"/></a>
<a href="/AuditEvidenceImages/<%=filename10%>" data-lightbox="AuditEvidence" data-title="tenth image"><img id="filename10" class="Evidence" src="/AuditEvidenceImages/<%=filename10%>" alt="" height="150px" width="150px"/></a>
<a href="/AuditEvidenceImages/<%=filename11%>" data-lightbox="AuditEvidence" data-title="eleventh image"><img id="filename11" class="Evidence" src="/AuditEvidenceImages/<%=filename11%>" alt="" height="150px" width="150px"/></a>
<a href="/AuditEvidenceImages/<%=filename12%>" data-lightbox="AuditEvidence" data-title="twelveth image"><img id="filename12" class="Evidence" src="/AuditEvidenceImages/<%=filename12%>" alt="" height="150px" width="150px"/></a>


<script src="js/lightbox-plus-jquery.min.js"></script>
   <script>


   function hide1() {


        if (<%=filename1%> == null) {
            document.getElementById("filename1").style.visibility = "hidden"; 
        }


        if (<%=filename2%> == null) {
            document.getElementById("filename2").style.visibility = "hidden";
        }


        if (<%=filename3%> == null) {
            document.getElementById("filename3").style.visibility = "hidden";
        }


        if (<%=filename4%> == null) {
            document.getElementById("filename4").style.visibility = "hidden";
        }


        if (<%=filename5%> == null) {
            document.getElementById("filename5").style.visibility = "hidden";
        }


        if (<%=filename6%> == null) {
            document.getElementById("filename6").style.visibility = "hidden";
        }


        if (<%=filename7%> == null) {
            document.getElementById("filename7").style.visibility = "hidden";
        }


        if (<%=filename8%> == null) {
            document.getElementById("filename8").style.visibility = "hidden";
        }


        if (<%=filename9%> == null) {
            document.getElementById("filename9").style.visibility = "hidden";
        }


        if (<%=filename10%> == null) {
            document.getElementById("filename10").style.visibility = "hidden";
        }


        if (<%=filename11%> == null) {
            document.getElementById("filename11").style.visibility = "hidden";
        }


        if (<%=filename12%> == null) {
            document.getElementById("filename12").style.visibility = "hidden";
        }
    }

    </script> 
</body>
</html>

Filter the elements you want to hide and then execute hide()? — Dimitar
– Dimitar, Commented Mar 30, 2018 at 11:53

tarzen chugh · Accepted Answer · 2018-03-30 12:04:05Z

1

This approach has lot of duplicate code. You could create an array of fileNames:-

var fileArray = [fileName1, fileName2,...]

Iterate over the array and each for each element call below method:-

function setImageVisibility(id) {
  var img = document.getElementById(id);
  img.style.visibility = (img == null) ? 'hidden' : 'visible';
}

Or Better

1) Iterate over fileArray

2) If fileName is null - Don't create anchor link

This will reduce the code a lot.

answered Mar 30, 2018 at 12:04

tarzen chugh

11.4k4 gold badges22 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to hide image based on variable value using JavaScript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related