Looking for a better way to change an image with multiple images onclick

Question

So I'm curious if there is a better way to change a single img src with multiple a href images

I am using multiple onclick functions but I am mostly curious if I can create one single function to do this

 x = document.getElementById("myImages-1").src = "<img src='https://i.stack.imgur.com/L7Iwr.png'>"; function imageChange() { document.getElementById("mySlides").innerHTML = x; } y = document.getElementById("myImages-2").src = "<img src='https://i.stack.imgur.com/cA4jE.png'>"; function imageChange1() { document.getElementById("mySlides").innerHTML = y; }

 <html> <body> <div id="content"> <div id="mySlides"> <img src="https://i.stack.imgur.com/COgXm.png" width="100px" height="100px"> </div> <a onclick="imageChange()" id="myImages-1" href="#"><img src="https://i.stack.imgur.com/L7Iwr.png" width="100px" height="100px">Hello World</a> <a onclick="imageChange1()" id="myImages-2" href="#"><img src="https://i.stack.imgur.com/cA4jE.png" width="100px" height="100px">Hello World</a> </div> </body> <script src="javascript.js"></script> </html>

Answer 1

 function imageChange(e) { document.getElementById("mySlides").children[0].src = e.children[0].src; } // or /** $(function() { $('a').on('click', function() { $('#mySlides').find('img').attr('src', $(this).find('img').attr('src')); }); }) **/

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="content"> <div id="mySlides"> <img src="https://i.stack.imgur.com/COgXm.png" width="100px" height="100px"> </div> <a onclick="imageChange(this)" id="myImages-1" href="#"><img src="https://i.stack.imgur.com/L7Iwr.png" width="100px" height="100px">Hello World</a> <a onclick="imageChange(this)" id="myImages-2" href="#"><img src="https://i.stack.imgur.com/cA4jE.png" width="100px" height="100px">Hello World</a> </div>

Answer 2

Surely, you can do that? Why don't you try passing some parameters into that function?

This is one way that it can be done. Feel free to try out other ways too.

 <html> <body> <div id="content"> <div id="mySlides"> <img src="https://i.stack.imgur.com/COgXm.png" width="100px" height="100px" /> </div> <a onclick="imageChange(x)" id="myImages-1" href="#" ><img src="https://i.stack.imgur.com/L7Iwr.png" width="100px" height="100px" />Hello World</a > <a onclick="imageChange(y)" id="myImages-2" href="#" ><img src="https://i.stack.imgur.com/cA4jE.png" width="100px" height="100px" />Hello World</a > </div> </body> <script> //declare your images x = document.getElementById("myImages-1").src = "<img src='https://i.stack.imgur.com/L7Iwr.png'>"; y = document.getElementById("myImages-2").src = "<img src='https://i.stack.imgur.com/cA4jE.png'>"; //Take the image as a parameter function imageChange(image) { document.getElementById("mySlides").innerHTML = image; } </script> </html>

Answer 3

There's always a better way and there is no best way because opinion and personal style is an important factor. Having said that, here's how I would do it...

I'd use a container element with display: grid to contain the display DIV and the image selectors.
For the image selectors, I'd use <input type="radio"> so that I don't have to keep track of which one is selected.
I'd create a single function that sets the background-image of the display DIV to the selected image and I'd use that as an event handler to be fired on page load and whenever the selection changes.
There's no need for jQuery or any other external dependencies.
There's a version of this that would work without any JavaScript at all using the checkbox hack and a duplicate image that would be used for the larger display. Alternatively, you could use a single image if you didn't need it to appear in the image selector as well.

 function changeDisplay() { const display = document.querySelector(`.display`); const selected = document.querySelector(`input:checked ~ img`).getAttribute(`src`); display.style.backgroundImage = `url("${selected}")`; } window.addEventListener( `load`, changeDisplay ); document.querySelectorAll(`input[name="selected-image"`).forEach( selector => { selector.addEventListener( `change`, changeDisplay ); });

 html, body { height: 100%; margin: 0; }.container { padding: 1rem; box-sizing: border-box; width: 100%; height: 100%; display: grid; grid-gap: 1rem; grid-template-columns: repeat(3, 1fr); grid-template-rows: 70% 30%; justify-items: center; align-items: center; }.display { width: 100%; height: 100%; grid-row: 1/2; grid-column: 1/4; background-repeat: no-repeat; background-size: contain; background-position: center; } label { width: 50px; height: 75px; display: inline-block; overflow: hidden; margin: 1em; } label img { width: 100%; height: 100%; object-fit: cover; } input { position: absolute; left: -9001px; }

 <div class="container"> <div class="display"></div> <label> <input type="radio" name="selected-image" id="image1" checked> <img src="https://images.unsplash.com/photo-1560443794-1333caf35d20?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="target"> </label> <label> <input type="radio" name="selected-image" id="image2"> <img src="https://images.unsplash.com/photo-1571623696305-323946293072?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" "drone"> </label> <label> <input type="radio" name="selected-image" id="image3"> <img src="https://images.unsplash.com/photo-1571358132905-86642ca1c449?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="bricks"> </label> </div>

Looking for a better way to change an image with multiple images onclick

Question

3 answers

solution1
0 2019-10-30 05:20:32

solution2
0 2019-10-30 05:27:28

solution3
0 2019-10-30 06:29:27

Looking for a better way to change an image with multiple images onclick

Question

3 answers

solution1 0 2019-10-30 05:20:32

solution2 0 2019-10-30 05:27:28

solution3 0 2019-10-30 06:29:27

solution1
0 2019-10-30 05:20:32

solution2
0 2019-10-30 05:27:28

solution3
0 2019-10-30 06:29:27