Guide on making a button display an image, then switch back to the initial image when clicked again

Question

Guide on making a button display an image, then switch back to the initial image when clicked again

Currently, I have this neat feature on my website where there's a button that toggles the image/background color - kind of like a dark mode switch. The background change is working fine, but I'm encountering some challenges with organizing the images properly. Here's what I have in terms of code:

function myFunction() {
    var element = document.body;
    element.classList.toggle("dark-mode")
}

function changeImage() {
    var image = document.getElementById('myImage');
    if(image.src.match("https://drive.google.com/uc?export=view&id=1zv8IxOU6cHccEanlwTnFmx9HWNQR9AA4")) {
        image.src = "https://drive.google.com/uc?export=view&id=1H8ZfWPnLQ1dgKIo7geyyzlkAeh_QHrIa";
    } else {
        image.src = "https://drive.google.com/uc?export=view&id=1H8ZfWPnLQ1dgKIo7geyyzlkAeh_QHrIa";
    }
}

.title {
    font-size: 50px;
    text-align: center;
    background-color: #C1C1C1;
    border-radius: 20px;
    font-family: arial;
    color: #00486B;
}

.img {
    background: coral;
    width: 500px;
    padding: 30px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.body {
    padding: 25px;
    background-color: white;
    color: black;
    font-size: 25px;
}

.dark-mode {
    background-color: black;
    color: white;
}

.dark-mode .title {
    color: yellow;
    background-color: navy;
}

.dark-mode .img {
    background-color: teal;
}

.main {
    text-align: center;
    font-size; 50px; border-radius: 20px;
    font-family: arial;
    color: #00486B;
}

<!doctype html>
<html>

<head>
    <title>Java</title>
</head>

<body class="main">
    <h1 class="title">TOGGLE DISPLAY</h1> <img src="https://drive.google.com/uc?export=view&id=1zv8IxOU6cHccEanlwTnFmx9HWNQR9AA4" class="img" id="myImage">
    <br>
    <button onclick="myFunction(); changeImage();" value="Change">CLICK</button>
</body>

</html>

javascript html css

Answer 1

Answer №1

Indeed, your code is functioning properly; however, the image loading speed may be slow due to pulling it from the drive. Consider changing the image source or utilizing CSS to toggle the display of the image (although this approach may seem a bit unconventional)

<html>

<head>
  <style>
    .title {
      font-size: 50px;
      text-align: center;
      background-color: #C1C1C1;
      border-radius: 20px;
      font-family: arial;
      color: #00486B;
    }

    .img {
      background: coral;
      width: 500px;
      padding: 30px;
      margin-left: auto;
      margin-right: auto;
      display: block;
    }

    .body {
      padding: 25px;
      background-color: white;
      color: black;
      font-size: 25px;
    }

    .dark-mode {
      background-color: black;
      color: white;
    }

    .dark-mode .title {
      color: yellow;
      background-color: navy;
    }

    .dark-mode .img {
      background-color: teal;
    }

    .main {
      text-align: center;
      font-size: 50px;
      border-radius: 20px;
      font-family: arial;
      color: #00486B;
    }

    #myImage2 {
      display: none;
    }
  </style>
  <script>

    function myFunction() {
      var element = document.body;
      element.classList.toggle("dark-mode")
    }

    function changeImage() {
      var image1 = document.getElementById('myImage1');
      var image2 = document.getElementById('myImage2');

      if (image1.style.display === "none") {
        image1.style.display = "block";
        image2.style.display = "none";
      } else {
        image1.style.display = "none";
        image2.style.display = "block";
      }
    }
  </script>
  <title>Java</title>
</head>

<body class="main">
  <h1 class="title">TOGGLE DISPLAY</h1>
  <img src="https://drive.google.com/uc?export=view&id=1zv8IxOU6cHccEanlwTnFmx9HWNQR9AA4" class="img" id="myImage1"><br>
  <img src="https://drive.google.com/uc?export=view&id=1H8ZfWPnLQ1dgKIo7geyyzlkAeh_QHrIa" class="img" id="myImage2"><br>
  <button onclick="myFunction(); changeImage();" value="Change">CLICK</button>
</body>

</html>

Answer 2

Indeed, your code is functioning properly; however, the image loading speed may be slow due to pulling it from the drive. Consider changing the image source or utilizing CSS to toggle the display of the image (although this approach may seem a bit unconventional)

<html>

<head>
  <style>
    .title {
      font-size: 50px;
      text-align: center;
      background-color: #C1C1C1;
      border-radius: 20px;
      font-family: arial;
      color: #00486B;
    }

    .img {
      background: coral;
      width: 500px;
      padding: 30px;
      margin-left: auto;
      margin-right: auto;
      display: block;
    }

    .body {
      padding: 25px;
      background-color: white;
      color: black;
      font-size: 25px;
    }

    .dark-mode {
      background-color: black;
      color: white;
    }

    .dark-mode .title {
      color: yellow;
      background-color: navy;
    }

    .dark-mode .img {
      background-color: teal;
    }

    .main {
      text-align: center;
      font-size: 50px;
      border-radius: 20px;
      font-family: arial;
      color: #00486B;
    }

    #myImage2 {
      display: none;
    }
  </style>
  <script>

    function myFunction() {
      var element = document.body;
      element.classList.toggle("dark-mode")
    }

    function changeImage() {
      var image1 = document.getElementById('myImage1');
      var image2 = document.getElementById('myImage2');

      if (image1.style.display === "none") {
        image1.style.display = "block";
        image2.style.display = "none";
      } else {
        image1.style.display = "none";
        image2.style.display = "block";
      }
    }
  </script>
  <title>Java</title>
</head>

<body class="main">
  <h1 class="title">TOGGLE DISPLAY</h1>
  <img src="https://drive.google.com/uc?export=view&id=1zv8IxOU6cHccEanlwTnFmx9HWNQR9AA4" class="img" id="myImage1"><br>
  <img src="https://drive.google.com/uc?export=view&id=1H8ZfWPnLQ1dgKIo7geyyzlkAeh_QHrIa" class="img" id="myImage2"><br>
  <button onclick="myFunction(); changeImage();" value="Change">CLICK</button>
</body>

</html>

Answer 3

Answer №2

Avoid relying on the URL to determine your decision, as Google's answer may redirect you to a different URL. Instead, consider using
```
document.body.classList.contains('dark-mode')
```
.
Try assigning diverse values to if/else blocks.

Answer 4

Avoid relying on the URL to determine your decision, as Google's answer may redirect you to a different URL. Instead, consider using
```
document.body.classList.contains('dark-mode')
```
.
Try assigning diverse values to if/else blocks.

Answer 5

Answer №3

Switching between images is a simple task by utilizing an array of image sources for easy reference and using the indexOf method to determine the current image source's position within the array.

const q=(e,n=document)=>n.querySelector(e);

/*
  The original images were too large and slow to load, so they have been replaced with adorable kittens for better clarity.
*/
const srcs=[
  'https://placekitten.com/452/450?image=2',
  'https://placekitten.com/452/450?image=1'
];

let oPromises=[];
srcs.forEach( src=>{
  oPromises.push(new Promise((resolve,reject)=>{
    let img=new Image();
        img.onload=function(e){
           resolve( this.src )
        }
        img.src=src;
  })
)});
Promise.all( oPromises )
  .then( values=>{
    q('button').addEventListener('click',function(e){
      document.body.classList.toggle("dark-mode");
      let img=q('img');
          img.src=values[ 1 - values.indexOf( img.src ) ];
    });
  })
  .catch(err=>console.warn(err))

.title {
  font-size: 50px;
  text-align: center;
  background-color: #C1C1C1;
  border-radius: 20px;
  font-family:arial;
  color: #00486B;
}
.img {
  background: coral;
  width: 500px;
  padding: 30px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.body {
  padding: 25px;
  background-color: white;
  color: black;
  font-size: 25px;
}
.dark-mode {
  background-color: black;
  color: white;
}
.dark-mode .title{
  color:yellow; 
  background-color: navy;
}
.dark-mode .img{
  background-color: teal;
}
.main {
  text-align: center;
  font-size; 50px;
  border-radius: 20px;
  font-family: arial;
  color: #00486B;
}

<h1 class="title">TOGGLE DISPLAY</h1>
<img src="https://placekitten.com/452/450?image=1" class="img" />
<button>CLICK</button>

Answer 6

Switching between images is a simple task by utilizing an array of image sources for easy reference and using the indexOf method to determine the current image source's position within the array.

const q=(e,n=document)=>n.querySelector(e);

/*
  The original images were too large and slow to load, so they have been replaced with adorable kittens for better clarity.
*/
const srcs=[
  'https://placekitten.com/452/450?image=2',
  'https://placekitten.com/452/450?image=1'
];

let oPromises=[];
srcs.forEach( src=>{
  oPromises.push(new Promise((resolve,reject)=>{
    let img=new Image();
        img.onload=function(e){
           resolve( this.src )
        }
        img.src=src;
  })
)});
Promise.all( oPromises )
  .then( values=>{
    q('button').addEventListener('click',function(e){
      document.body.classList.toggle("dark-mode");
      let img=q('img');
          img.src=values[ 1 - values.indexOf( img.src ) ];
    });
  })
  .catch(err=>console.warn(err))

.title {
  font-size: 50px;
  text-align: center;
  background-color: #C1C1C1;
  border-radius: 20px;
  font-family:arial;
  color: #00486B;
}
.img {
  background: coral;
  width: 500px;
  padding: 30px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.body {
  padding: 25px;
  background-color: white;
  color: black;
  font-size: 25px;
}
.dark-mode {
  background-color: black;
  color: white;
}
.dark-mode .title{
  color:yellow; 
  background-color: navy;
}
.dark-mode .img{
  background-color: teal;
}
.main {
  text-align: center;
  font-size; 50px;
  border-radius: 20px;
  font-family: arial;
  color: #00486B;
}

<h1 class="title">TOGGLE DISPLAY</h1>
<img src="https://placekitten.com/452/450?image=1" class="img" />
<button>CLICK</button>

Guide on making a button display an image, then switch back to the initial image when clicked again

Answer №1

Answer №2

Answer №3

Similar questions

Insert a JavaScript object into the rendered HTML using the componentDidMount lifecycle method

Switch between Accordions/Tabs with JavaScript (ES6)

Exploring how to access properties of objects in javascript

Create various designs for a section of a webpage

Is there a way to customize the styles for the material UI alert component?

Display an icon button when a user edits the text in a text field, and make it disappear once clicked on

Start up a server-side JavaScript instance utilizing Express

Perform a series of database queries one after the other, ensuring they are completed before

Utilizing ng-href in Angular.js Template: A Guide

There is no 'depto_modules.length' property in this row. How should I go about fixing this issue?

"Unleashing the Power of MongoDB's Dynamic $in

The MUI Select component requires two clicks to open its menu if another Select component's menu is already open

Incorporating Admob into the Intel XDK platform

JavaScript isn't functioning properly after UserControl is loaded via Ajax

What could be causing the excessive vertical spacing in an HTML list on Chrome: PHP output or CSS styling?

AngularJS written plugin in Javascript

Select options with disabled sorting feature

When using Vuejs2, the list of autosize textareas connected to an expanding array of objects does not properly update their values

The nightwatch.js script is halting operations once the test suite has been completed

Regarding passing input into a JavaScript class method that is exported through the exports keyword