JavaScript image sorting function fails to sort multiple ID elements that match

Currently, I am working on a project to develop an image sorter using toggle buttons. However, I have encountered an issue where my function is only effective for the first image ID and not any others.

Below is the JavaScript function in question:

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

Here is the HTML button code snippet:

<button onclick=kitchen()>Kitchen</button>
<img src="https://picsum.photos/200/?" id="kitchen">
<img src="https://picsum.photos/200/?" id="kitchen">

The desired outcome is for the display block to toggle on all images with the ID "kitchen", but unfortunately, it is only affecting the first image currently.

javascript

Answer №1

Here is an example of how it could potentially look.

function kitchenSetup() {
  var images = document.getElementsByClassName("kitchen");
  for (var j = 0, imgFromList; imgFromList = images[j]; ++j) {
    imgFromList.style.display = imgFromList.style.display == 'none' ? 'block' : 'none';
  }
}
<button onclick="kitchenSetup()">Kitchen Layout</button>
<img style="display:none" src="https://example.com/kitchen-image/1" class="kitchen">
<img src="https://example.com/kitchen-image/2" class="kitchen">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to create optional sections within a reusable component's template in a Vue 3 application?

Recently, I've been immersed in developing a Single Page Application (SPA) using the powerful combination of Vue 3, TypeScript, and integrating The Movie Database (TMDB) API. One interesting challenge I encountered was with my versatile movie card co ...

javascriptvue.jsvuejs3

IE10 has a problem with the height being set to 100%, but it seems to work fine in Quirks mode in IE and all

Check out this page for reference: I've noticed an issue with scrolling in Internet Explorer, while other browsers seem to be fine. Can you help me understand why IE is causing the scroll and how I can fix it? Thank you, Judson Here's the cod ...

javascripthtmlcss

Improper headings can prevent Chrome from continuously playing HTML5 audio

Recently, I encountered a peculiar and unlikely issue. I created a custom python server using SimpleHTTPServer, where I had to set my own headers. This server was used to serve .wav files, but I faced an unusual problem. While the files would play in an ...

javascripthtmlgoogle-chromeaudiowebserver

Which Web Browsers Support Canvas and HTML5?

Currently working on a project that involves using the HTML5 Canvas element. I am curious about which major browsers (including specific versions) actually support the Canvas tag. I am not interested in hearing about IE. In this tutorial Drawing shapes - M ...

javascripthtmlcanvascross-browser

Angular Material: div not being filled by layout-fill

<!-- Container Div --> <div layout-fill> <!-- Image Div --> <div layout="column" layout-align="center center" class="coverImage" layout-fill> <md-content class="md-padding"> Sample Text Here ...

javascriptcssangularjsflexboxmaterial-design

Utilize jQuery to create a dynamic image swapping and div showing/hiding feature

I'm having trouble implementing a toggle functionality for an image and another div simultaneously. Currently, when the image is clicked, it switches to display the other div, but clicking again does not switch it back. Can someone please advise on wh ...

javascriptjqueryhtmlcss

Troubleshooting the malfunctioning of the Bootstrap slide animation

I've been attempting to implement scroll animation on a div, but for some reason, it's not working as intended. I must have made a mistake somewhere, but I can't figure out where. Any help in resolving this issue would be greatly appreciated ...

javascriptjqueryhtmlcsstwitter-bootstrap

Refresh gif without having to reload it in Internet Explorer 11

I'm attempting to create a feature where a gif restarts when clicked by the user, without needing to reload it (due to the heavy size of the gif which is preloaded for my application). The current code functions flawlessly on Chrome and other "modern ...

javascripthtmlinternet-explorergif

Book Roulette: Your Next Random Read

I created a code for a random quote generator and now I want to create something similar, but with images this time. I am looking to add a feature on my page where it can recommend a book by displaying its cover image when a button is clicked. For the pre ...

javascripthtmlcss

Observing the occurrences of JavaScript events

Is there a way to track all JavaScript events in the browser? Such as, identifying the functions that have been executed and the parameters that have been passed in each JS file? I'm dealing with some obfuscated code and I'm looking to determine ...

javascriptfirebug

What is the best way to replicate the content of the textarea exactly as it is (with all line breaks and special characters)?

Below is the Laravel form I have, and I need to extract the text in a way that retains its original format: <style type="text/css" media="screen"> #editor { position: absolute; top: 150px; right: 150px; bottom: 15 ...

javascriptlaravelace-editor

What is the best way to ensure the parent element adjusts to fit its floated children, without exceeding the width of the window?

I am attempting to center a group of floating elements, but due to them being displayed in masonry style, I cannot set them as inline. It is clear that a container is necessary, but I have been unable to find information on how to achieve this: Please dis ...

javascriptjqueryhtmlcss

Guide to automatically loading a default child route in Angular 1.5 using ui-router

Hello, I am looking to set a default child route to load as soon as the page loads. Below is the code snippet: $stateProvider.state('userlist', { url: '/users', component: 'users', data:{"name":"abhi"}, resolv ...

javascriptangularjsangular-ui-routerangular1.6

Having trouble with the npx create-next-app command? Encounter the ENOENT error message?

When attempting to run the command, I encountered an error that is insisting on using yarn even though I am using npx. Npx works perfectly fine for other projects, such as react apps. I expect it to give me the next application starter in line. ...

javascriptnode.jsreactjsnext.jsnpx

Delving into the World of ES6 Symbols

Throughout my experience with various programming languages, from C# to Lisp to Scala to Haskell, symbols have consistently behaved as singleton objects. This means that any two symbols with the same name are guaranteed to be identical. In Racket: (equal? ...

javascriptecmascript-6symbols

The user score tracking database, cataloging personal scoring history

In my database, I have a table called User. Each user in this table has a field named score. I am looking to display how the score of each user has evolved over time. My dilemma is whether to store this score separately. Should I create a new database t ...

javascriptnode.jsmongodbdatabase

Struggling to get Angular to properly sanitize inputs using ng-bind-html

I've been struggling to figure out the issue in my code for an entire day with no success. At this point, I'm reaching out for help. My problem arises when trying to utilize ng-bind-html-unsafe within a template. As a newcomer to Angular, it&apos ...

javascriptangularjssanitize

"Upon pressing the submit button in the router.post function, a null value appears

In my form, I am attempting to redirect the page to the home URL after clicking the submit button. However, using res.redirect('/home') is not achieving the desired result. I have also tried using console.log("testing");, but that is not working ...

javascriptnode.jsformsexpresscontact-form

Concentrate on the HTML element once it becomes active

I am facing a challenge where I need to focus on a specific input element. However, there is a spinner that appears on page load and remains hidden until certain http requests are completed. All inputs are disabled until the requests are finished. The setu ...

javascriptjqueryhtmlcssangularjs

Ways to set the base URL on the development server for a call to react-scripts start

I am facing an issue with configuring my primary PHP server to run the ReactJS dev server created using yarn start within a directory named /reactive on the PHP site (using nginx proxy_pass). The problem is that I cannot set the root of the node server to ...

javascriptreactjsnginx