How to reuse javascript to switch the source of an image

Question

I have a few simple buttons in a webpage where OnClick a small script will change the source of an image to display, however I was looking at this and thought that I was re writing the same code over and over, but I couldn't figure out how to change the image without specifying the src="X.jpg" in a new function to find the new file each time, maybe there is a better solution?

Here is what i've got so far.

    <article class="large-text-area">
      <button onclick="myFunction1()">Click Here to view image</button>

      <script>
      function myFunction1() {
        document.getElementById("theImage").src  = "../media/img/sketch/strip1.jpeg"
      }
      </script>
    </article>

    <!-- Section 2 -->
    <article class="large-text-area">
      <button onclick="myFunction2()">Click Here to view image</button>

      <script>
      function myFunction2() {
        document.getElementById("theImage").src = "../media/img/sketch/strip2.jpeg"
      }
      </script>
    </article>

    <!-- Section 3 -->
    <article class="large-text-area">
      <button onclick="myFunction3()">Click Here to view image</button>

      <script>
      function myFunction3() {
        document.getElementById("theImage").src = "../media/img/sketch/strip3.jpeg"
      }
      </script>
    </article>

Any suggestions would be useful, thank you!

Answer 1

I think you're looking for something along the line of a single function to update the image with the correct source, right?

function changeImgSrc(imageId) {
	document.getElementById("theImage").src  = "../media/img/sketch/strip" + imageId + ".jpeg";
}

<img id="theImage" src=""/>

<!-- Section 1 -->
<article class="large-text-area">
  <button onclick="changeImgSrc('1')">Click Here to view image</button>
</article>

<!-- Section 2 -->
<article class="large-text-area">
  <button onclick="changeImgSrc('2')">Click Here to view image</button>
</article>

<!-- Section 3 -->
<article class="large-text-area">
  <button onclick="changeImgSrc('3')">Click Here to view image</button>
</article>

It's probably best practice to use a switch.

function changeImgSrc(imageId) {
  var imgSrcValue;
  
  switch (imageId) {
      case 1:
        imgSrcValue = "../media/img/sketch/strip1.jpeg";
        break;
      case 2:
        imgSrcValue = "../media/img/sketch/strip2.jpeg";
        break;
      case 3:
        imgSrcValue = "../media/img/sketch/strip3.jpeg";
        break;
  }
  
  document.getElementById("theImage").src  = imgSrcValue;
}

<img id="theImage" src=""/>

<!-- Section 1 -->
<article class="large-text-area">
  <button onclick="changeImgSrc(1)">Click Here to view image</button>
</article>

<!-- Section 2 -->
<article class="large-text-area">
  <button onclick="changeImgSrc(2)">Click Here to view image</button>
</article>

<!-- Section 3 -->
<article class="large-text-area">
  <button onclick="changeImgSrc(3)">Click Here to view image</button>
</article>