2017-02-17 4 views
0

現在、私はボタンを使用して交通信号のシーケンスを自動化する必要があるコンピュータサイエンスのコースワークに取り組んでいます。 "信号が点灯"または "信号が消灯"。プログラムをインターネットエクスプローラデバッガで実行すると、エラーコードが表示されます。「関数 'Timer'の値は関数のオブジェクトではなく、定義されていません。スクリプトの後の関数。私のプログラミングは以下の見つけることができます:私は前に言ったように、エラーは「タイマー」などのプログラムの5行目にあるように思われる JavaScript Traffic Light Sequence:「Timer」プロパティの値が、関数オブジェクトではなく、nullまたは未定義です

<!DOCTYPE html> 
<html> 
<body> 
<p> 
    <button type="button" onclick="Timer()"> Start Lights</button> 
    <button type="button" onclick="StopTimer()"> Stop lights</button> 
</p> 

<img id = "TrafficLight" src="http://imgur.com/FHT9OoG.jpg"> 
<script> 
var TrafficLightList = [ 
    "http://imgur.com/FHT9OoG.jpg", 
    "http://imgur.com/XZ1PxGh.jpg", 
    "http://imgur.com/5DUX0Wy.jpg", 
    "http://imgur.com/WpeEMZU.jpg" 
]; 
var Automation = 0; 
var TimeBetweenChange = null; 

function ChangeLightAutomated() { 
    if(Automation == TrafficLightList.length) Automation = 0; 
    var Light = document.getElementById("TrafficLight"); 
    image.src = TrafficLightList[Automation]; 
    image.alt = TrafficLightList[Automation] //debugger 
    Automation = Automation + 1; 
} 

function Timer() { 
    if(!TimeBetweenChange) { 
     TimeBetweenChange = self.setTimeBetweenChange(ChangeLightAutomated,  1000); 
    } 
} 

function StopTimer() { 
    self.clearTimeBetweenChange(TimeBetweenChange); 
    TimeBetweenChange = null; 
} 

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

が、私はタイマーの機能は、ライン28上にあるものを定義するにもかかわらず、定義されていません。 。

答えて

0

コードにはいくつかの未定義の変数があります。例えば、var Light = document.getElementById("TrafficLight");、次にimage.src = TrafficLightList[Automation];を入力します。この場合、imageは未定義です。また、selfはどこにも定義されていません。ここで

は、あなたがやりたいことの実例です:

var timer = (function() { 
 
    var trafficLightList = [ 
 
     "http://imgur.com/FHT9OoG.jpg", 
 
     "http://imgur.com/XZ1PxGh.jpg", 
 
     "http://imgur.com/5DUX0Wy.jpg", 
 
     "http://imgur.com/WpeEMZU.jpg" 
 
    ]; 
 
    var automation = 0; 
 
    var interval = null; 
 

 
    function changeLightAutomated() { 
 
     if(automation == trafficLightList.length) automation = 0; 
 
     var image = document.getElementById("TrafficLight"); 
 
     image.src = trafficLightList[automation]; 
 
     image.alt = trafficLightList[automation] //debugger 
 
     ++automation; 
 
    } 
 

 
    function startTimer() { 
 
     interval = setInterval(changeLightAutomated, 1000); 
 
    } 
 

 

 
    function stopTimer() { 
 
     clearInterval(interval) 
 
    } 
 

 
    return { 
 
     start: startTimer, 
 
     stop: stopTimer 
 
    } 
 
})() 
 

 
document.getElementById('start').addEventListener('click', function() {timer.start()}) 
 
document.getElementById('stop').addEventListener('click', function() {timer.stop()})
<!DOCTYPE html> 
 
<html> 
 
<body> 
 
<p> 
 
    <button type="button" id="start"> Start Lights</button> 
 
    <button type="button" id="stop"> Stop lights</button> 
 
</p> 
 

 
<img id = "TrafficLight" src="http://imgur.com/FHT9OoG.jpg"> 
 
<script> 
 

 
</script> 
 

 
</body> 
 
</html>

-1

ボタンにIDを追加します。

<input type="button" id="button1_id" value="Some description" onclick="Timer()"> 
<input type="button" id="button1_id" value="Some description" onclick="StopTimer()"> 

私も付加価値を、そのボタンは、内のテキストを持っています。それぞれが(ジャバスクリプト上で)行うため、その後の変更いくつかの示唆に富むテキスト

に 'いくつかの説明' そして、:

var timerSelector = document.getElementById("button1_id"); 
timerSelector.onclick = Timer; 

var stopTimerSelector = document.getElementById("button2_id"); 
stopTimerSelector.onclick = StopTimer; 

または単に:

document.getElementById("button1_id").onclick= Timer; 
document.getElementById("button2_id").onclick = StopTimer; 

にこれらの行を追加します。 javascript。

問題が解決した場合はお知らせください。

関連する問題