Change an Image With Onclick()

function test() {
  var img = document.getElementById("b1")
      
  console.log(img.src);
  console.log(img.getAttribute('src'));
 }
    
test();

<img id="b1" src="img/RoteAmpel.jpg">

how to change an image source more than once using onclick on html and javascript

You should be to do this using an array and a simple variable counter.

var imgCount = 0;
var images = ["img1.png", "img2.png", "img3.png", "img4.png"...];

imgCount will get added to every time <img> is clicked.

<script>
var imgCount = -1;
var images = ["img1.png", "img2.png", "img3.png", "img4.png"...];
function change() {
  imgCount++;
  var image = document.getElementById('image');
  image.src = images[imgCount];
}
</script>
<img src="image.jpg" alt="text" id="image" onclick="change()">

The src is now called from the array. imgCount serves as the counter of the amount of times the image has been clicked and is used to find the correct src with the array since it also serves as an index.

If you don't know much about arrays read MDN.

I'm sure that you don't have an endless amount of pictures, so you can also use this:

<script>
var imgCount = -1;
var images = ["img1.png", "img2.png", "img3.png", "img4.png"];
function change() {
  if (imgCount !== images.length - 1)
    imgCount++;
  else 
    imgCount = 0;
  var image = document.getElementById('image');
  image.src = images[imgCount];
}
</script>
<img src="image.jpg" alt="text" id="image" onclick="change()">

Now, if <img> is clicked and it is on the last image, it will go back to the beginning. The if statement sees whether or not the counter equals the amount of images in the array. If it hasn't it keeps adding. If it hasn't, it sets the counter back to 0.

Change image onclick using javascript

instead of using the "onclick(){}" attribute in your html, write an event listener in js. Assuming your image tag is like this:

<img src='./squid-dab1.gif' id='myImage'>

Note: Javascript needs to know how to find your image... Hence the ID

Your javascript code should look like this:

<script>
    var image = document.getElementById('myImage');

    image.addEventListener('click', function(){
        changeImage();
    });

    function changeImage(){
        image.src = './squid-dab2.gif';
    }
</script>

That will make it so that when you click the image, it will change. If you wanted a button to do that, simply create a button with the id "myImage" instead like so:

<button id='myImage'>Click me to change the picture</button>

how to change image onclick for few seconds using javascript

function ChangeImage()
{
  var originalImage = $("#imgName").attr("src");
  var changeImage = $("#imgName").data("changeimage");
  $("#imgName").attr("src",changeImage);  
  setTimeout(function(){
  $("#imgName").attr("src",originalImage);
  }, 1000);

  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://images.unsplash.com/photo-1498598457418-36ef20772bb9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" usemap="#image-map"  id="imgName" height="50"
data-changeimage="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg">

<a onclick="ChangeImage()">change</a>

var foundationListen = document.querySelectorAll("[alt='foundation']");

for(var i=0; i < foundationListen.length; i++){

    foundationListen[i].addEventListener("click", function(){

        var image =  document.querySelector("div#face img");
        image.src = "../static/images/foundation.png";

    });

};