Question

0

290

Views

How to make button show image, then if clicked again, return to first image?

So I have this website set up so that there is this button that changes the image/background color. It's supposed to be like a dark mode button. I'm trying to set it up so that if the button is clicked, the background is dark and the image is the dark version. When clicked again, the background is light, the image is the light version. Right now, the background is working fine. Just having issues with how to organize the images correctly. Here's the 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>

about 4 years ago · Juan Pablo Isaza

3 answers

Answer question

0

Don't use url to make de decision, since the goggle answer with redirect to a new URL. Use document.body.classList.contains('dark-mode') instead.
Put different values on if/else blocks;

about 4 years ago · Juan Pablo Isaza Report

0

It is quite simple to toggle an image - the following uses an array of img sources to provide a quick lookup - in conjunction with indexOf to find the position in the array of the current img source.

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

/*
  Original images were insanely large and took foreever to load
  so replaced with nice kittens to illustrate the point easily
*/
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>

about 4 years ago · Juan Pablo Isaza Report

Answer question

Find remote jobs

Accepted Answer · 2022-07-10T21:36:37.735Z

Actually, your code is working fine, it just loading the image slowly, The reason might be you are using an image from the drive. Maybe be you can just change the image or try using CSS to show/hide image (it might also be little hackish way)

<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>

0

290

How to make button show image, then if clicked again, return to first image?

3 answers

0

0

0

Find remote jobs

Andres GPT