I am trying to have a button make an image appear when you press them, then hide them when you press the same button. (3 different images and 3 different buttons in my code). In the code I make the images appear, but I don't know how to make the same buttons hide the images.
function image1() {
document.getElementById("image1").src = "image1.jpg";
}
function image2() {
document.getElementById("image2").src = "image2.jpg";
}
function image3() {
document.getElementById("image3").src = "image3.jpg";
}
<button onclick="image1()">image1</button>
<img src="" id="image1">
<button onclick="image2()">image2</button>
<img src="" id="image2">
<button onclick="image3()">image3</button>
<img src="" id="image3">
I am trying to have a button make an image appear when you press them, then hide them when you press the same button. (3 different images and 3 different buttons in my code). In the code I make the images appear, but I don't know how to make the same buttons hide the images.
function image1() {
document.getElementById("image1").src = "image1.jpg";
}
function image2() {
document.getElementById("image2").src = "image2.jpg";
}
function image3() {
document.getElementById("image3").src = "image3.jpg";
}
<button onclick="image1()">image1</button>
<img src="" id="image1">
<button onclick="image2()">image2</button>
<img src="" id="image2">
<button onclick="image3()">image3</button>
<img src="" id="image3">
Share
Improve this question
edited Sep 8, 2020 at 13:16
Lajos Arpad
77.6k41 gold badges117 silver badges224 bronze badges
asked Sep 8, 2020 at 12:35
sonjorsonjor
292 bronze badges
5
- 1 it will be more easy with jquery toggle if you want to use jquery. – Devsi Odedra Commented Sep 8, 2020 at 12:37
-
2
Pass
this
as an argument to the functions e.g.onclick=image1(this)
for starters. This allows you to access the button that was clicked. I would probably usedata
attributes instead ofid
as well. You could also find the closest element to the button clicked. – Mr. Polywhirl Commented Sep 8, 2020 at 12:37 -
4
You better hide image with
display: none
. Empty/broken links in some browsers provide empty image glyph that looks ugly. – Justinas Commented Sep 8, 2020 at 12:39 - Can you use jQuery? – Justinas Commented Sep 8, 2020 at 12:42
- Hi @sonjor ! If the answer helped you solving the problem, please mark it as accepted (press the checkmark under the vote buttons). You can accept only one answer to your question. – Vasiliy Artamonov Commented Sep 29, 2020 at 17:48
8 Answers
Reset to default 2<button onclick="toggle('image1')">image1</button>
<img src="image1.jpg" id="image1">
<button onclick="toggle('image2')">image2</button>
<img src="image2.jpg" id="image2">
function toggle(targetID) {
var imgElement = document.getElementById(targetID);
if(imgElement.style.display == "block"){
imgElement.style.display = "none";
}else{
imgElement.style.display = "block";
}
}
Maybe like this ?
I remend you wrap the button and image inside sub-containers. When you click the button, get the parent element (wrapper) and toggle a class on it.
<div class="toggle-image">
<button onclick="toggle(this)">Image 1</button>
<img src="http://placekitten./100/100" />
</div>
A CSS selector will take care of hiding the image.
.toggle-image.hidden img {
display: none;
}
Full Example
function toggle(button) {
button.parentElement.classList.toggle('hidden');
}
body {
background: #111;
display: flex;
flex-direction: row;
align-items: stretch;
}
.toggle-image {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
.toggle-image img {
width: 100px;
height: 100px;
margin-top: 1em;
box-shadow: 0.25em 0.25em #EEE;
}
.toggle-image.hidden img {
display: none;
}
<div class="toggle-image">
<button onclick="toggle(this)">Image 1</button>
<img src="http://placekitten./100/100" />
</div>
<div class="toggle-image">
<button onclick="toggle(this)">Image 2</button>
<img src="http://placekitten./300/300" />
</div>
<div class="toggle-image">
<button onclick="toggle(this)">Image 3</button>
<img src="http://placekitten./500/500" />
</div>
const images = [
'image.jpg',
'image2.jpg',
'image3.jpg'
];
const imagesBox = document.getElementById('images-box');
function image(index) {
imagesBox.innerHTML = '';
imagesBox.insertAdjacentHTML('beforeend' ,`<img src="${images[index]}"/>`);
}
button {
padding: 8px 12px;
border: 0;
border-radius: 3px;
background-color: #475863;
color: white;
margin: 5px;
}
#images-box {
margin-top: 25px;
padding: 25px;
background-color: white;
border: 1px solid #d1d1d1;
border-radius: 3px;
}
<button onclick="image(1)">Button 1</button>
<button onclick="image(2)">Button 2</button>
<button onclick="image(3)">Button 3</button>
<div id="images-box"></div>
use jQuery. there is a method call toggle
. it will help a lot.
$('#image').toggle()
You can do something below.
function image1() {
document.getElementById("image1").classList.toggle("hideME");
}
function image2() {
document.getElementById("image2").classList.toggle("hideME");
}
function image3() {
document.getElementById("image3").classList.toggle("hideME");
}
.hideME {
display : none;
}
<button onclick="image1()">image1</button>
<img src="image1.jpg" id="image1" class="hideME">
<button onclick="image2()">image2</button>
<img src="image2.jpg" id="image2" class="hideME">
<button onclick="image3()">image3</button>
<img src="image3.jpg" id="image3" class="hideME">
One way is to invert element hidden
property, like :
<span>
<button onclick="document.getElementById('pic1').hidden^=1" style="top: 25px; left:70px; position:absolute;" type="button">Show or Hide</button>
<img hidden id="pic1" width="50px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN8Jyn5HwAFPgIhVXO6lgAAAABJRU5ErkJggg==">
</span>
You shouldn't change the src
in order to hide/show the images, that's a logical change, while you want UI/design changes based on a certain logic.
function hideShow(id) {
var element = document.getElementById(id);
element.style.display = (element.style.display === "none") ? "block" : "none";
}
<button onclick="hideShow('image1')">image1</button>
<img src="https://pbs.twimg./profile_images/821849411991044096/lQFa_Vly_400x400.jpg" id="image1" style="display: none;">
<button onclick="hideShow('image2')">image2</button>
<img src="https://media.gettyimages./photos/who-is-the-boss-picture-id480585465?s=612x612" id="image2" style="display: none;">
<button onclick="hideShow('image3')">image3</button>
<img src="https://hips.hearstapps./vader-prod.s3.amazonaws./1595961621-il_794xN.2460764659_56ur.jpg?crop=1xw%3A1xh%3Bcenter%2Ctop" id="image3" style="display: none;">
You can see that I have used a single function
and changed the display
attribute of style
instead of src
. The function
gets an id
, loads the element identifiable by that (which is an img
) and if it has a display
of none
, then it's set to block
. Otherwise it's set to none
.
Here is an example using data-
attributes to bind a button to a specific image id with pure JS and using jQuery.
data-
attributes can contain any value you like. Using them doesn't limit you to the placement of the elements in DOM-tree. Buttons and images can be wherever you like in the code, and they can still find each other. Unlike using the method that relies on having the same parent. However, I do agree that it is more readable that way, so it is up to you to decide what is more suitable for your situation :)
/* Pure Javascript*/
// Get the buttons that have the data-image-id attribute
var buttons = document.querySelectorAll('button[data-image-id]');
// Go over each button to attach a click event
buttons.forEach(function(item, index) {
item.addEventListener('click', function(event) {
// Get the value of the data-image-id attribute
var image_id = event.target.getAttribute('data-image-id');
// Find the image with specific id and toggle the .active class on it
document.getElementById(image_id).classList.toggle('active');
});
});
/* Using jQuery */
/*
$('button[data-image-id]').click(function(event) {
var $this = $(event.target);
var image_id = $this.attr('data-image-id');
$('#' + image_id).toggleClass('active');
});
*/
/* Hide images that do not have the .active class */
img:not(.active) {
display: none;
}
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--
The value of the data-image-id attribute
is the same as the id of an image
-->
<button data-image-id="image1">image1</button>
<img src="https://picsum.photos/100/50" id="image1">
<button data-image-id="image2">image2</button>
<img src="https://picsum.photos/101/50" id="image2">
<button data-image-id="image3">image3</button>
<img src="https://picsum.photos/102/50" id="image3">