onclick function with parameters

Question

I am creating an application that allows the user to change images on the click of a button. The application has default images that load and I want to be able to swap the images with each button click. I have this working but I have to create a new function for each button item. like this:

    <ul>
       <li><a href="#" onclick="change1()">name of image 1</a></li>
       <li><a href="#" onclick="change2()">name of image 2</a></li>
       <li><a href="#" onclick="change3()">name of image 3</a></li>
       <li><a href="#" onclick="change4()">name of image 4</a></li>
    </ul>

<script>
 function change1(){
      document.name1.src = document.differntImage.src
      return;
      }

 function change2(){
      document.name1.src = document.defaultImage.src
      return;
      }

 function change3(){
      document.name1.src = document.image3.src
      return;
      }

function change4(){
      document.name1.src = document.image4.src
      return;
      }
</script>

Is there a way to write 1 function that does all of this and pass a parameter in the onclick? like this:

onclick="change(1)"
onclick="change(2)"
onclick="change(3)"
onclick="change(4)"

Answer 1

How about this? fiddle

<div class="main"><img id="name1" src="https://dummyimage.com/100x100/&text=name1"></div>
<ul>
  <li><a href="#" onclick="change(1)">name of image 1</a></li>
  <li><a href="#" onclick="change(2)">name of image 2</a></li>
  <li><a href="#" onclick="change(3)">name of image 3</a></li>
  <li><a href="#" onclick="change(4)">name of image 4</a></li>
</ul>
<div>differntImage <img id="differntImage" src="http://dummyimage.com/100x100/&text=differntImage"></div>
<div>defaultImage <img id="defaultImage" src="http://dummyimage.com/100x100/&text=defaultImage"></div>
<div>image3 <img id="image3" src="https://dummyimage.com/100x100/&text=image3"></div>
<div>image4 <img id="image4" src="https://dummyimage.com/100x100/&text=image4"></div>

<script>
  function change(id) {
    var idList = [
      'differntImage',
      'defaultImage',
      'image3',
      'image4'
    ];
    var target = document.getElementById('name1');
    var selected = document.getElementById(idList[id-1]);
    target.src = selected.src;
    return false;
  };
</script>

Answer 2

<ul> <li><a href="#" onclick="change('link1')">name of image 1</a></li> <li><a href="#" onclick="change('link2')">name of image 2</a></li> <li><a href="#" onclick="change('link3')">name of image 3</a></li> <li><a href="#" onclick="change('link4')">name of image 4</a></li> </ul> <script> function change(link) { console.log(link); // It prints a link that is in the function document.name1.src = document.differntImage.src return; } </script>

Answer 3

As you guessed, you'll need a wrapper function ( change in your example) to do the job, called from inside the onclick attribute.

<a onclick="change('http://some-great-image')">click meeee</a>

function change(src){
   document.name1.src = src;
}

If you want to map a number with a given URL you'll need an object to handle that (maybe an array object).

ie

<a onclick="change(1)">click meeee</a>

var urls = [
    'my index 0 image',
    document.differntImage.src,
    'another one'
];
function change(index){
   document.name1.src = urls[index]; 
}

This wrapping needs to be explicit when you're using pure scripting events like

 btn1.onclick = function(){
      change('mi-new-url');
 }

Or you can search for the bind strategy to make some currying.

Hope it helps to understand better!