Javascript - Creating a function to encapsulate the statements for swapping the source files for the two image elements? [closed]

Question 1

<!doctype html>
<html>
<head>
<title>Image Swapper</title>
</head>

<body>
<div style="text-align:center">
 <h2>Image Swapper</h2>
 <p>
   <img id="leftImg" src="http://balance3e.com/Images/happy.gif">
   <img id="rightImg" src="http://balance3e.com/Images/sad.gif">
 </p>
 <input type="button" value="Swap images" onClick="swap()">
 </div>
 <script>
    function swap(){
      var saved=document.getElementById('leftImg').src;
      document.getElementById('leftImg').src = document.getElementById('rightImg').src;
      document.getElementById('rightImg').src= saved;
    }
 </script>
 </body>
 </html>

Add a <script></script> tag with function swap(){} inside, then swap the onClick contents with the function call.

Question 2

At first analyze the logic and behavior of the code. It's all held in English, so if you carefully read it from left to right, things should be understandable (if not clear). Let's try.

The important part is what is happening within the onclick attribute of the <button> element in your posted HTML. You could, for instance, identify that the code has to be somewhere around the button by loading the HTML file in your browser and checking out where something happens if you click.

Let's beautify the code within the onclick attribute:

saved                                   = document.getElementById('leftImg').src;
document.getElementById('leftImg').src  = document.getElementById('rightImg').src;
document.getElementById('rightImg').src = saved;

As you can see, a variable with the name saved is created and the src attribute of the element with the ID leftImg (within the document) is stored in it. Then the src attribute of rightImg is stored in leftImg and finally saved is assigned again to rightImg.

If you start with your function, that's what you want. Here's a scaffold to get you started.

/**
 * Swap the source of two images within the DOM.
 *
 * @param {String} leftImage The ID of the left image.
 * @param {String} rightImage The ID of the right image.
 */
function swapImages(leftImage, rightImage) {
    var saved;
}