JavaScriptを再利用して画像のソースを切り替える方法

Question

ウェブページに小さなボタンがいくつかありますが、小さなスクリプトでは表示する画像のソースが変わりますが、私はこれを見て、私が同じコードを何度も何度も書いていますが、新しい関数を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> 

ご意見ありがとうございます。

Answer 1

私はあなたが正しいソースで画像を更新するために、単一の機能のラインに沿って何かを探していると思いますか？

function changeImgSrc(imageId) { 
 
\t 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>

それはおそらくスイッチを使用することをお勧めします。

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>