CODEWITHSUNDEEP
javascripthtml
V I J E S H
V I J E S H

Reputation: 7594

image not getting displayed dynamically

I am hidding one image in my html page using hidden property. but i am not able to make it visible through java script by document.getElementById("check").style.visibility="visible"; my code is

   <html>
<head>
<style type="text/css">
</style><script type="text/javascript">
function myFunction()
{
document.getElementById("check").style.visibility="visible";
}
</script>
</head>
<body>
<table> 
<img class="hide" src="check.jpg" id="check" hidden="true" height="300" width="400">
<tr>
<td>
<img src="1.jpeg" onclick="myFunction()">
</td>

Upvotes: 0

Views: 130

Answers (4)

Nag Chowtipalli
Nag Chowtipalli

Reputation: 1

<html>
<head>      
    <script type="text/javascript">
        function myFunction()
        {
            document.getElementById("check").style.visibility="visible";
        }
    </script>
</head>
<body>
    <table> 
        <img  src="check.jpg" id="check" hidden="true" height="300" width="400" style="visibility:hidden;"/>    
        <tr>
            <td>
                <img src="1.jpeg" onclick="myFunction()">
            </td>
        </tr>
    </table>
</body>

Upvotes: 0

Martin.
Martin.

Reputation: 10539

You actually forget to assign something to that variable in your function

function myFunction() {
    document.getElementById("check").style.visibility = "visible";
}

You also have to remove hidden attribute and to delete your "hide" class

function hasClass(ele,cls) {
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
function removeClass(ele,cls) {
    if (hasClass(ele,cls)) {
    var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
    ele.className = ele.className.replace(reg,' ');
}
function myFunction() {
    var ele = document.getElementById("check");
    ele.style.visibility = "visible";
    ele.hidden = "";
    removeClass(ele, "hide");

}

Upvotes: 2

Jim O&#39;Brien
Jim O&#39;Brien

Reputation: 2552

If you are setting hidden="true" to hide it, then you will need to unset this property to display the element again.

<html>
<head>
<style type="text/css">
</style><script type="text/javascript">
function myFunction()
{
    document.getElementById("check").hidden = '';
}
</script>
</head>
<body>
<table> 
<img class="hide" src="check.jpg" id="check" hidden="true" height="300" width="400">
<tr>
<td>
<img src="1.jpeg" onclick="myFunction()">
</td>

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167250

You need to change and apply the visibility CSS.

function myFunction()
{
    document.getElementById("check").style.visibility = "visible";
}

It is better to set the visibility on load using script.

document.getElementById("check").style.visibility = "hidden";

As sometimes, when you define in CSS, it doesn't work.

Upvotes: 0

Related Questions