Toggle dropdown-menu only if..

[thorny yacht]

..at least one of the images inside it has a source that's not "1.png". If not, the button won't work and the dropdown menu won't be triggered.

HTML

  <div class="overview" id="overview">
        <button class="overview-btn" onclick="toggleOverview()">Overview</button>
        <div class="overview-assets" id="overviewAssets">
            <img src="1.png" id="ov-explore">
            <img src="1.png" id="ov-style">
            <img src="1.png" id="ov-you">
            <img src="1.png" id="ov-create">
        </div>
    </div>

JS

function toggleOverview() {
         var overviewAssets = document.getElementById("overviewAssets");
         
          if (overviewAssets.style.display === "block") {
                overviewAssets.style.display = "none";
          } else {
                overviewAssets.style.display = "block";
          }
}

JS (MISSION FAILED) :

function toggleOverview() {
          var overviewAssets = document.getElementById("overviewAssets");
          var images = overviewAssets.getElementsByTagName("img");
          var atLeastOneImage = false;
      
          for (var i = 0; i < images.length; i++) {
              if (images[i].src.trim().endsWith("1.png")) {
                  atLeastOneImage = true;
                  break;
              }
          }
      
          if (atLeastOneImage) {
              overviewAssets.style.display = (overviewAssets.style.display === "block") ? "none" : "block";
          }
}

[tardy geode]

The problem in this code is attempting to access the value of overviewAssets.style.display. The initial value of this is an empty string and not block. Your code relies on the fact that the default display value of a div is block, but accessing the style property directly on an element only returns styles explicitly set in JS. It does not return default styles and it also does not return styles applied via CSS. The proper way to access the current style is by using window.getComputedStyle(). So your code should be comparing the value of getComputedStyle(overviewAssets).display instead of the value of overviewAssets.style.disply.

[thorny yacht]

function toggleOverview() {
    var overviewAssets = document.getElementById("overviewAssets");
    var images = overviewAssets.getElementsByTagName("img");
    var atLeastOneImage = false;

    for (var i = 0; i < images.length; i++) {
        if (images[i].src.trim().endsWith("1.png")) {
            atLeastOneImage = true;
            break;
        }
    }

    if (atLeastOneImage) {
        var computedStyle = window.getComputedStyle(overviewAssets);
        overviewAssets.style.display = (computedStyle.display === "block") ? "none" : "block";
    }
}

[tardy geode]

That should work.

That code allows toggling, but your value of atLeastOneImage is based on the presence of at least one image that IS ending in 1.png, but your description indicates that you want at least one that IS NOT 1.png.

[thorny yacht]

oh okay i got it mixed up

now i can't close the dropdown menu because non of the images has the source "1.png"

[tardy geode]

Examine this part of your code:

if (images[i].src.trim().endsWith("1.png")) {
  atLeastOneImage = true;
  break;
}

[thorny yacht]

forgot the " ! "

thanks for the hint

it's working now

[bleak drift]

It seems like your JavaScript code is not working as expected. The issue lies in the condition inside the for loop where you are checking if the image source ends with "1.png". Since all your images have a source of "1.png", the condition will always be true, and the atLeastOneImage variable will be set to true regardless of the actual image sources.

To fix this, you should modify the condition to check if the image source is not equal to "1.png". Here's the corrected code:

function toggleOverview() {
var overviewAssets = document.getElementById("overviewAssets");
var images = overviewAssets.getElementsByTagName("img");
var atLeastOneImage = false;

for (var i = 0; i < images.length; i++) {
    if (images[i].src.trim() !== "1.png") {
        atLeastOneImage = true;
        break;
    }
}

if (atLeastOneImage) {
    overviewAssets.style.display = (overviewAssets.style.display === "block") ? "none" : "block";
}

}

Now, the condition checks if the image source is not equal to "1.png", ensuring that at least one image has a source different from "1.png" for the button to work and trigger the dropdown menu.

[thorny yacht]

Thanks. I have a followup question if that's okay.. I have this button that I only want to appear if the img src is NOT "1.png".. It's an undo button and there's no need for it to be displayed if you haven't picked an image yet to actually undo

function undoExplore() {
    // Get the image elements
    var explore = document.getElementById("explore");
    var ovExplore = document.getElementById("ov-explore");
    var undoExploreButton = document.getElementById("undo-explore");

    // Set the source of the images to their original sources
    explore.src = ovExplore.originalSrc;
    ovExplore.src = ovExplore.originalSrc;

    // Check if the source is not "1.png" and display the button
    if (ovExplore.src !== "1.png") {
        undoExploreButton.style.display = "block";
    }

}

[bleak drift]

let me see

[thorny yacht]

 <img src="1.png" id="ov-explore">
 <button class="undo" id="undo-explore" onclick="undoExplore()">Undo</button>

#undo-explore{
    display: none;
}

the undobutton will only appear if the images changes to show the glasses

[bleak drift]

Your current code checks the source of ovExplore and displays the undo button if the source is not equal to "1.png". However, in your current code, both explore.src and ovExplore.src are set to ovExplore.originalSrc before checking the condition. Since both are set to the same value, the condition will always evaluate to false, and therefore, the undo button will not be displayed.

[thorny yacht]

(1.png is just a white image)

ooooooh

[bleak drift]

it is ad ahahahahhahahaha

[thorny yacht]

yeah haha maybe

var exploresrc = document.getElementById("ov-explore").src;

   if (exploresrc !== "1.png") {
        undoExploreButton.style.display = "block";
    }

why can't this work?

" if the source is not 1.png, display the button "

full code:

function undoExplore() {
    // Get the image elements
    var explore = document.getElementById("explore");
    var ovExplore = document.getElementById("ov-explore");
    
    var exploresrc = document.getElementById("ov-explore").src;
    var undoExploreButton = document.getElementById("undo-explore");

    if (exploresrc !== "1.png") {
        undoExploreButton.style.display = "block";
    }
    
    explore.src = ovExplore.originalSrc;
    ovExplore.src = ovExplore.originalSrc;
}