このトラフィックのライトシーケンスは、ボタンをクリックして動作させるにはどうすればよいですか？

私はそれを赤から琥珀色にすることができますが、それをさらに緑色に変える方法、琥珀色に戻し、再び赤色に変える方法についています。どんな助けも高く評価されます。このトラフィックのライトシーケンスは、ボタンをクリックして動作させるにはどうすればよいですか？

また、私はdreamwaverでこれを作成しました。

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 

    <h1>Traffic Lights </h1> 

    <img id="light" img src="../../red.jpg"> 

    <button type="button" onClick="changeLights()">Change Lights</button> 


    <script> 

    function changeLights(){ 

    document.getElementById('light').setAttribute("src","../../amber.jpg") 

    document.getElementById('light').setAttribute("src","../../green.jpg") 

    document.getElementById('light').setAttribute("src","../../amber.jpg") 

    //document.getElementById('light').setAttribute("src","../../red.jpg") 


    } 

    </script> 
</body> 
</html>

出典

2017-02-01 Esmie

あなたは3（または4） 'のsetAttribute（）'スクリプトを実行するときにも、気づかないほど速く起こる間の変化を期待してませんか？ブラウザの開発ツール（F12を押す）を使用して関数をデバッグしようとしましたが、何がステップごとに進行しているのを見ましたか？ – Filburt

クリックごとにまたは自動的に色を変更しますか？ – Luca

最高の解決策は、画像名を配列に入れ、カウンタを使用して配列を循環させることです。そのカウンタは、最後にヒットした配列の「終了」に応じてカウントを増減できます。

また、彼らは「スパゲッティコード」を作成すると、彼らは結合thisを変更するグローバルなラッパー関数を引き起こし、彼らはW3C Event Model標準に従っていません（などonclick、）属性を扱うインラインHTMLイベントを使用しないでください。代わりに、.addEventListener()を使用してコードを介してイベントハンドラまで要素を配線します。

// Get references to DOM elements: 
 
var img = document.getElementById('light'); 
 
var btn = document.getElementById('btn'); 
 

 
// Hook click of button up to event handling function 
 
btn.addEventListener("click", changeLights); 
 

 
// Put image names into an array: 
 
var imgs = ["green.jpg" , "amber.jpg", "red.jpg"]; 
 

 
// Establish counter variable and directional variable 
 
var count = 0; 
 
var additive = 1; 
 

 
function changeLights(){ 
 
    
 
    // Set image by getting element from array based on current counter value 
 
    img.setAttribute("src","../../" + imgs[count]); 
 
    
 
    // Verification of action 
 
    console.clear(); 
 
    console.log(img); 
 

 
    // When we hit the edges, reverse direction, 
 
    if(count === 2) { 
 
    additive = -1; // Go backward 
 
    } else if(count === 0) { 
 
    additive = 1; // Go forward 
 
    } 
 
    
 
    // Adjust the count accordingly 
 
    count+= additive; 
 
}

<h1>Traffic Lights </h1> 
 
<img id="light" img src="../../red.jpg"> 
 
<button type="button" id='btn'>Change Lights</button>

出典

2017-02-01 18:56:54

このトラフィックのライトシーケンスは、ボタンをクリックして動作させるにはどうすればよいですか？

答えて

関連する問題