'How to make div disappear after clicking the button? [duplicate]

Like in the topic. After clicking empty gear (norm) I want to make it change to filled (hov) and show up div (show), but it doesn't work.

Before using ifs everything was working, so there must be something wrong with them.

js:

function list() {

  if (document.getElementById('hov').style.display === 'none') {
    document.getElementById('norm').style.display = 'none';
    document.getElementById('hov').style.display = 'flex';
    document.getElementById('show').style.display = 'grid';      
  }

  if (document.getElementById('hov').style.display === 'flex') {  
    document.getElementById('norm').style.display = 'flex';
    document.getElementById('hov').style.display = 'none';
    document.getElementById('show').style.display = 'none';
  }
}

html:

 <button class="men" onclick="list()"><img id="norm" src="img/gearw.png" height="28px"><img id="hov" src="img/gearwhover.png" height="28px"></button>
javascripthtmlcss


Solution 1:[1]

Did you write link to JQuery?

write <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> into the end of the body, but before body. If it doesn't work, sorry( I can't give another advice

Solution 2:[2]

I think you have a bit of a misunderstanding of what display does (you can read up on it here: https://www.w3schools.com/cssref/pr_class_display.asp). Setting it to none won't make it invisible. Instead, you could use visibility.

For example:

function list() {
    var norm = document.getElementById("norm");
    var hov  = document.getElementById("hov");
    
    if (hov.style.visibility === "hidden") {
        norm.style.visibility = "hidden";
        hov .style.visibility = "visible";
    
    } else if (hov.style.visibility === "visible") {
        norm.style.visibility = "visible";
        hov .style.visibility = "hidden";
    }
}

<button class = "men" onclick = "list()">
    <img id = "norm" src = "img/gearw.png"      height = "28px">
    <img id = "hov"  src = "img/gearwhover.png" height = "28px" style = "visibility: hidden">
</button>

Other than that, your code seems very weird (your JS talks about a "show" element that's not in your HTML document?), and its not quite clear from the question what you're trying to accomplish. There probably is a much more elegant way to do what you want, but without telling us, we can't know.

If I were to guess, I'd say that you were trying to make the image on the button change when the user hovers over it, in which case you'd probably be better off using CSS for that, but again I can't know for sure.

Anyways, I wish you the best of luck in your project!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 AlneX Football
Solution 2

Related Questions