I'm new to Javascript and I am trying to simplify my life by integrating many functions into one.

I have a very simple operation which allows for the click of a button to load a specific image in place of a default image. As oppose to having many functions which do the same thing, I'd rather have just one.

I imagine you can store the images in an array and select them by position?

Here is what I have so far.

function swap1() {
  document.getElementById("default").src="321.jpg";
}

function swap2() {
  document.getElementById("default").src="432.jpg";
}

function swap3() {
  document.getElementById("default").src="742.jpg";
}

<input type="button" onClick="swap1()">
<input type="button" onClick="swap2()">
<input type="button" onClick="swap3()">

I'm new to Javascript and I am trying to simplify my life by integrating many functions into one.

I have a very simple operation which allows for the click of a button to load a specific image in place of a default image. As oppose to having many functions which do the same thing, I'd rather have just one.

I imagine you can store the images in an array and select them by position?

Here is what I have so far.

function swap1() {
  document.getElementById("default").src="321.jpg";
}

function swap2() {
  document.getElementById("default").src="432.jpg";
}

function swap3() {
  document.getElementById("default").src="742.jpg";
}

<input type="button" onClick="swap1()">
<input type="button" onClick="swap2()">
<input type="button" onClick="swap3()">

• javascript
• html

2 Answers 2

use function parameters:

function swap(imgNumber)
{
document.getElementById("default").src=imgNumber+".jpg";
}

and later:

<input type="button" onclick="swap('321')">
<input type="button" onclick="swap('432')">
<input type="button" onclick="swap('742')">

To answer the ment (not very best js code but to show idea of variables):

var clip=false;
function setClip(val) {
   clip=val;
}
function swap(imgNumber)
{
   if(clip==true)
     document.getElementById("default").src=imgNumber+"clip.jpg";
  else
     document.getElementById("default").src=imgNumber+".jpg";
 }


<input type="button" onclick="swap('321')">
<input type="button" onclick="swap('432')">
<input type="button" onclick="swap('742')">
<input type="button" onclick="setClip(true)">

Simply you add variable which takes true/false - last button set clip variable to true - we changed swap function to check if clip is true - if yes - it loads different file

You could do this

JS

function swap(string img)
{
    document.getElementById("default").src=img;
}

HTML

<input type ="button" onClick="swap('321.jpg')">
<input type ="button" onClick="swap('432.jpg')">
<input type ="button" onClick="swap('742.jpg')">