[FIXED] Why is the imagine not displayed while beeing "inline". js/html

Issue

I want to show and hide a picture by using one button. when it's clicked, the picture is displayed and a variable is set to 1. so that when you press the button the next time, the picture will be hidden again. After the button is pressed, I console.log the value of set variable + if the picture is displayed or not. Console says that the Picture is "inline". But the picture is not on my screen. I think all you need is the js function. If you need more information. just comment. thank's!

    <script>
       
       function showHideM(){
            let open;
            open = 0
            if (open == 0){
                open = 1;
                document.getElementById("melmanId").style.display = "inline"; 
                console.log(open)
                console.log(document.getElementById("melmanId").style.display)
return;
            }
            if (open == 1){
                    open = 0;
                    document.getElementById("melmanId").style.display = "none";
            }
        }
    
    </script>

Solution

You don't really need flags to maintain the state of the image's visibility. You can use classList's toggle method to toggle a class on/off or, in this case, visible/hidden, which makes things a little easier.

// Cache the elements, and add an event listener
// to the button
const img = document.querySelector('img');
const button = document.querySelector('button');
button.addEventListener('click', handleClick);

// Toggle the "hidden" class
function handleClick() {
  img.classList.toggle('hidden');
}

.hidden { visibility: hidden; }
img { display: block; margin-bottom: 1em; }
button:hover { cursor: pointer; background-color: #fffff0; }

<img class="hidden" src="https://dummyimage.com/100x100/000/fff">
<button>Click</button>

Additional documentation

• addEventListener

• querySelector

Answered By - Andy

Answer Checked By - Marie Seifert (PHPFixing Admin)