Onclickイメージが変更されない

イメージをクリックしてイメージをフォルダ内の別のイメージに変更したいが、それは機能しなかったので、ボタンのために解決したが、それは私が望むことをしていない。私がonclickを使用するとき、イメージは変化しません。それはプロジェクトのためであり、埋め込まれたJSコードは受け入れられないので、別のファイルに入れなければなりません。Onclickイメージが変更されない

HTML：

<!DOCTYPE> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <br> 
     <div class="logo"> 
     <img src="logo.png" width="270" height="240"> 
     </div> 
     <script src="functions.js"></script> 
     <link rel="stylesheet" type="text/css" href="shirt.css"> 

    </head> 
    <body> 
    <br> 
    <div class="scrollmenu"> 
    <nav class="navbar"> 
      <a href="shirt.html">Home</a> 
      <a href="Shop.html">Shop</a> 
      <a href="discounts.html">Discounts</a> 
      <a href="feedback.html">Feedback</a> 
    </div> 
    </nav> 
    </header> 

    <br> 
    <div class="t1"> 
    <h2 class="heading">CUSTOMISE YOUR SHIRT..</h2> 
    <div class="customT1"> 
    <img id="IMAGE" src="t1.png" width="540" height="540"/><p>&euro;10.00</p> 
    <p>Select one of the designs from below..</p> 
    <img src="drift.png" width="140" height="140" border="2";/> 
    <img src="clutch.png" width="140" height="140" border="2"/> 
    <img src="jdm.png" width="130" height="140" border="2"/> 
    <img src="twosik.png" width="140" height="140" border="2"/> 
    </br> 
    <button class="button" type="button" onclick= "alert();">USE</button> 
</div> 



</div> 

    <br> 
    <footer> 
    <p>@Liam Chambers 2016</p> 
    </footer> 
</body> 

    enter code here 

</html>

JS：私はあなたがjqueryの使用することをお勧め

<script type ="text/javascript"> 

    function alert(){ 
    alert("hi"); 
    document.getElementById("IMAGE").src = "t1drift.png"; 
    } 

</script>

出典

2016-11-19 Liam Chambers

あなたがコンソールをチェックすることがありますか？どのようなエラーメッセージが表示されますか？バニラJavaScriptの代わりにjQueryで記述することをお勧めします。 – MCMXCII

問題は関数名の選択です。 'alert（）'はすでに使用されています。別の関数名を考えてみてください。また、StackOverFlowのヘルプを探す際に関連するソースコードを表示することをお勧めします。 – NewToJS

@ MCMXCII jQueryのような巨大な依存関係を追加すると、なぜこのような簡単な操作のメリットがありますか？ – winseybash

この

<button onclick="document.getElementById('IMAGE').src='t1drift.png'">USE</button>

出典

2016-11-19 12:22:24

インラインjsコードの導入は悪いことです。参照してください：http://stackoverflow.com/questions/6941483/onclick-vs-event-handler – winseybash

を試してみて、それがこの

<script> 
$(function(){ 
    function alert(){ 
     $("#IMAGE").attr('src','t1drift.png'); 
    } 
}); 
</script>

に簡単な解決策になります

出典

2016-11-19 13:11:25 karthick

jQueryのような大きなライブラリを追加することは、このような簡単な操作では完全には不要です。 – winseybash

私はそれに同意します。将来的に彼が他のより高い操作をしたいと思うなら、それはその瞬間に役立つことを意味する – karthick

質問はすでに回答済みですChange image when clicking button

このリンクに従ってください。関数名に組み込みJS関数を使用することはできません。一意の関数名を使用する必要があります。

出典

2016-11-19 13:11:49 TPLMedia24

リンクで構成される回答を投稿しないでください。将来リンクが壊れた場合、その答えは廃止されます。 – winseybash

それを試してみてください -

document["imgName"].src="../newImgSrc.jpg";

または

document.getElementById("imgName").src="../newImgSrc.jpg";

出典

2016-11-19 14:15:26

Onclickイメージが変更されない

答えて

関連する問題