Q: Not repeating myself I am trying to make code to make squares change color when I click on them:
function change(image) {
switch (image) {
    case 1:
        var image = document.getElementById('first');
        if (image.src.match("square1.png")) {
            image.src = "squareblue1.jpg";
        } else {
            image.src = "square1.png";
        }
        break;
    case 2:
        var image = document.getElementById('second');
        if (image.src.match("square1.png")) {
            image.src = "squareblue1.jpg";
        } else {
            image.src = "square1.png";
        }
        break;
    case 3:
        var image = document.getElementById('third');
        if (image.src.match("square1.png")) {
            image.src = "squareblue1.jpg";
        } else {
            image.src = "square1.png";
        }
        break;
    default:
    var image = document.getElementById('forth');
        if (image.src.match("square1.png")) {
            image.src = "squareblue1.jpg";
        } else {
            image.src = "square1.png";
        }
        break;

I am repeating this section over and over again:
if (image.src.match("square1.png")) {
            image.src = "squareblue1.jpg";
        } else {
            image.src = "square1.png";
        }

I tried to turn it into a function but the function would have to be called "image" or else an error will pop up saying that image is not defined and I already used image in another variable. Is there a way to shorten my code by putting it in a function?

A: var IMAGES = {
  1: 'first',
  2: 'second',
  3: 'third',
  default: 'fourth'
};
function change(image) {
    var imageID = IMAGES[image] || IMAGES.default;
    var image = document.getElementById(imageID);
    if (image.src.match("square1.png")) {
        image.src = "squareblue1.jpg";
    } else {
        image.src = "square1.png";
    }
}

This is the literal DRY-up of your code. However, a reimplementation would be better. For instance, having background styling instead of image elements would allow you to do the same just by adding or removing a class.

A: It's possible to use an array containing the element ids, this way:
function change(image) {

  var ids = [
    null,
    'first',
    'second',
    'third',
    'forth'
  ];

  var img = document.getElementById(ids[image]);
  img.src = image.src.match('square1.png') ?
    'squareblue1.jpg' :
    'square1.png';
}


A: Include the jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Then you can just make the colors change whenever a image is clicked, but make the function only change this image 
$("img").click(function(){
    $(this).src = "new src";
});

Hope this helps

A: How about using a different variable name?
function change (image) {
   switch (image) {
      case 1:
         changeSrc('first');
         break;
      case 2:
         changeSrc('second');
         break;
      ...

   function changeSrc (id) {
      var image = document.getElementById(id);
      if (image.src.match("square1.png")) {
          image.src = "squareblue1.jpg";
      } else {
          image.src = "square1.png";
      }
   }
}


A: I think what you can do is simply use the switch to define the image variable, then do what you need with it.
var image;
switch(image) {
    case 1:
        image = document.getElementById('first');
        break;
    case 2:
        image = document.getElementById('second');
        break;
    ...
}

if (image.src.match("square1.png")) {
    image.src = "squareblue1.jpg";
} else {
    image.src = "square1.png";
}

If you prefer, you could also extract the lines that changes the src into a function. This would be useful if other functions also do this.
