Change image URL on click-CodePudding

I was trying to do an onclick to change the image on the page. I'm really a beginner in programming, and I'm trying to do my first projects myself, but it's really hard...

*{
  margin: 0;
  padding: 0%;
  box-sizing: border-box;
}
body {
  background-color: blueviolet;
}
h1 { text-align: center;
  font-size: 38pt;
  font-family: Bebas Neue;
  color: rgb(255, 255, 0);
}
p {
  text-align: center;
  font-family: Lemon Milk;
  font-size: 13pt;
}
hr {
  color: black;
}
.centralize {
  display: flex;
  justify-content: center;
  align-items: center;
}
.Centralizador2 {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>Teste com imagens.</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body> 
  <style>  
  </style>
  <h1>Testando carga e imagens.</h1>
  <hr color="black">
  <br>
  <p> <strong>Abaixo você vai ver uma imagem que está na mesma pasta.</p>
  <div class = 'centralize'>
<div id = 'HtmlLogo'>
  <img src="Html5.png" alt="" srcset="">
</div>

// fdjaljdljkajkd ahdahjwd awnbdb bda bd  abdmad abvd admabda dmabd adabndma damnda dambvdna danbdnma damdbad anbdam damd an dadnab dmqa ndma m,da n ndad 
  </div>
  <p>Podemos também carregar imagens que estão em sub-pastas.</p>
  
  <div class ='Centralizador2'>
<div id ='Css3'>
  <img id = 'imagem1' src="imagens/css3.png" alt="" onclick = 'changeImage ( )''>
</div>
  </div>
  <p>Tambem podemos carregar imagens externas.</p>
<style>
</style>
</body> 
<script>
  function changeImage ( ){ 
var ChangeImage = document.getElementById ('Css3')
if (ChangeImage.src. document('imagens/css3.png')){
    ChangeImage.src = 'imagens/dio.png'
} else {
  ChangeImage.src = 'imagens/css3.png'
}
  }
</script>

CodePudding user response：

You have had some issues/typos in your code. I have used web links to images for testing. I have fixed your Javascript:

    function changeImage() { 
      var ChangeImage = document.getElementById ('imagem1')
      const source1 = 'https://images.pexels.com/photos/406014/pexels-photo-406014.jpeg?auto=compress&cs=tinysrgb&w=1600'
      const source2 = 'https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
      
      if ( ChangeImage.src === source1 ) {
        ChangeImage.src = source2
      } else {
        ChangeImage.src = source1
      }
    }

Here's the complete code. I have added width and height to your image to display it. How you called the function on onClick was also broken, see https://www.w3schools.com/jsref/event_onclick.asp for how it works correctly.

*{
  margin: 0;
  padding: 0%;
  box-sizing: border-box;
}
body {
  background-color: blueviolet;
}
h1 { text-align: center;
  font-size: 38pt;
  font-family: Bebas Neue;
  color: rgb(255, 255, 0);
}
p {
  text-align: center;
  font-family: Lemon Milk;
  font-size: 13pt;
}
hr {
  color: black;
}
.centralize {
  display: flex;
  justify-content: center;
  align-items: center;
}
.Centralizador2 {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.img {
  height: 50px;
  width: 50px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>Teste com imagens.</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body> 
  <style>  
  </style>
  <h1>Testando carga e imagens.</h1>
  <hr color="black">
  <br>
  <p> <strong>Abaixo você vai ver uma imagem que está na mesma pasta.</p>
  <div class = 'centralize'>
<div id = 'HtmlLogo'>
  <img src="Html5.png" alt="" srcset="">
</div>

// fdjaljdljkajkd ahdahjwd awnbdb bda bd  abdmad abvd admabda dmabd adabndma damnda dambvdna danbdnma damdbad anbdam damd an dadnab dmqa ndma m,da n ndad 
  </div>
  <p>Podemos também carregar imagens que estão em sub-pastas.</p>
  
  <div class ='Centralizador2'>
<div id ='Css3'>
  <img id = 'imagem1' style="height:100px;width:100px" src="https://images.pexels.com/photos/406014/pexels-photo-406014.jpeg?auto=compress&cs=tinysrgb&w=1600" alt="" onclick = 'changeImage()'>
</div>
  </div>
  <p>Tambem podemos carregar imagens externas.</p>
<style>
</style>
</body> 
<script>
function changeImage() { 
  var ChangeImage = document.getElementById ('imagem1')
  const source1 = 'https://images.pexels.com/photos/406014/pexels-photo-406014.jpeg?auto=compress&cs=tinysrgb&w=1600'
  const source2 = 'https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
  
  if ( ChangeImage.src === source1 ) {
    ChangeImage.src = source2
  } else {
    ChangeImage.src = source1
  }
}
</script>

CodePudding user response：

Here is a toggle solution that can be applied to any number of images: In my example the alternative image is specified in a data-src attribute. The same attribute is used for attaching the (delegated) click event. As the event attachment is a delegated one you can add further images (with the data-src attribute) to your page and the above mentioned click-event will already be attached.

document.body.addEventListener("click",ev=>{ 
 if (ev.target.matches("img[data-src]")) {const e=ev.target;
  [e.src, e.dataset.src]=[e.dataset.src,e.src];
}});

* {
  margin: 0;
  padding: 0%;
  box-sizing: border-box;
}

body {
  background-color: blueviolet;
}

h1 {
  text-align: center;
  font-size: 38pt;
  font-family: Bebas Neue;
  color: rgb(255, 255, 0);
}

p {
  text-align: center;
  font-family: Lemon Milk;
  font-size: 13pt;
}

hr {
  color: black;
}

.centralize {
  display: flex;
  justify-content: center;
  align-items: center;
}

.Centralizador2 {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

<h1>Testando carga e imagens.</h1>
<hr color="black">
<br>
<p> <strong>Abaixo você vai ver uma imagem que está na mesma pasta.</p>
  <div class = 'centralize'>
<div id = 'HtmlLogo'>
  <img  src="https://picsum.photos/id/209/150/250" alt="" srcset="" 
   data-src="https://picsum.photos/id/210/150/250">
</div>

// fdjaljdljkajkd ahdahjwd awnbdb bda bd  abdmad abvd admabda dmabd adabndma damnda dambvdna danbdnma damdbad anbdam damd an dadnab dmqa ndma m,da n ndad 
  </div>
  <p>Podemos também carregar imagens que estão em sub-pastas.</p>
  
  <div class ='Centralizador2'>
<div id ='Css3'>
  <img id ='imagem1' src="https://picsum.photos/id/211/150/250" alt="" 
   data-src="https://picsum.photos/id/212/150/250">
</div>
  </div>
  <p>Tambem podemos carregar imagens externas.</p>