如何重用javascript切换图像源

我在一个网页中有几个简单的按钮，单击一个小脚本将更改要显示的图像的源代码，但是我看到了这个，认为我在一遍又一遍地重新编写相同的代码，但是我不知道如何更改图像，而不在每次查找新文件的新函数中指定src=“X.jpg”，也许有更好的解决办法

这是我到目前为止得到的

    <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>

单击此处查看图像
函数myFunction1（）{
document.getElementById（“theImage”）.src=“../media/img/sketch/strip1.jpeg”
}
单击此处查看图像
函数myFunction2（）{
document.getElementById（“theImage”）.src=“../media/img/sketch/strip2.jpeg”
}
单击此处查看图像
函数myFunction3（）{
document.getElementById（“theImage”）.src=“../media/img/sketch/strip3.jpeg”
}

---

任何建议都会很有用，谢谢

我想你是在寻找一个简单的函数，用正确的源代码更新图像，对吗

函数更改imgsrc（imageId）{
document.getElementById（“theImage”）.src=“../media/img/sketch/strip”+imageId+”.jpeg”；
}

单击此处查看图像
单击此处查看图像
单击此处查看图像

我认为您正在寻找一种类似于单个函数的方法，用正确的源代码更新图像，对吗

函数更改imgsrc（imageId）{
document.getElementById（“theImage”）.src=“../media/img/sketch/strip”+imageId+”.jpeg”；
}

单击此处查看图像
单击此处查看图像
单击此处查看图像
jQuery
是选项吗？或者它必须是用
javascript
？.setAttribute（'src'，'value'）编写的。不幸的是，对于我正在处理的项目，我无法使用外部库作为选项？或者它必须是用
javascript
？.setAttribute（'src'，'value'）编写的。不幸的是，对于我正在处理的项目，我无法使用外部库sexcellent！非常感谢，这正是我想要的！一旦我能标记为完整，我就会做！没问题。我继续添加了一个使用开关的示例。啊，开关方法看起来更干净！杰出的非常感谢，这正是我想要的！一旦我能标记为完整，我就会做！没问题。我继续添加了一个使用开关的示例。啊，开关方法看起来更干净！