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

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.

<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;}
  </style> <script>
  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";}} </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="myImage"><br>
  <button onclick="myFunction(); changeImage();" value="Change">CLICK</button>
</body>
</html>

CodePudding user response：

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>

CodePudding user response：

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;

CodePudding user response：

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'
];


q('button').addEventListener('click',function(e){
  document.body.classList.toggle("dark-mode");
  let img=q('img');
      img.src=srcs[ 1 - srcs.indexOf( img.src ) ];
});

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