Teshtek Teshtek - 1 month ago 7
CSS Question

CSS - Show element by clicking button

How can I show/hide the image by clicking the button, in my case

PROBLEM 551
, using css?

SHOW/HIDE

<body>
<div>
<button onclick="problem551()" >PROBLEM 551</button>
<img src="PROBLEM551.png">
<p id="p551"></p>
</div>
</body>


UPDATE :

I edited the code so this is :

<head>
<script>
document.write("<h1>\"Benvenuto nel programma\"</h1>\n<h3>Qui imparerò ad usare JavaScript facendo i problemi di Eulero</h3>");

function problem(){
var img = document.getElementById('problemi');
return img.style.display = img.style.display === 'block' ? 'none' : 'block';
}

function problem551(){
problem();
.............
}


</script>

</head>

<body>
<div>
<button onclick="problem551()" >PROBLEM 551</button>
<img id="problemi" src="PROBLEM551.png">
<p id="p551"></p>
</div>
</body>

<style>
img {....


But I've always, when I open the program, the image shown..How can I hide it ?

UPDATE :

I found the solution :

<img id="problemi" src="PROBLEM551.png" style="display: none;">

Answer
<body>
    <script>
        function problem551() {
            var img = document.getElementById('img551');
            img.style.display = img.style.display === 'block' ? 'none' : 'block'; 
        }
    </script>
    <div>
        <button onclick="problem551()" >PROBLEM 551</button>
        <img src="PROBLEM551.png" id="img551">
        <p id="p551"></p>
    </div>
</body>
Comments