4

私は友人のためにさまざまな Web サイトで実行する簡単な Javascript プログラムを作成しており、ボタンを使用して支配スタイル (コール オブ デューティ ゲームモード) プログラムを作成しようとしています。Web サイトを見て、設定された間隔を使用してみましたが、ボタンがスクリプトにアクセスする方法がわかりません。

これが私のコードです：

<!DOCTYPE html>
<html>
<body>
    <p id = "blue"></p>
    <p id = "red"></p>
    <button onclick="StartA()">Start for Red</button>
    <button onclick="StopA()">Stop for red</button>
    <button onclick="StartB()">Start for Blue</button>
    <button onclick="StopB()">Stop for Blue</button>
    <script>
    var startRed;
    var startBlue;
    var r=1;
    var b=1;
    var startA = function(){
        var startRed = setInterval(function(){redscore++};,3000)
    };
    var startB = function(){
        var startBlue = setInterval(function(){bluescore++};,3000)
    };
    var StopA = function(){
        clearInterval(startRed);
    }; 
    var StopB = function() {
        clearInterval(startBlue);
    };
    document.getElementById("blue").innerHTML=bluescore;
    document.getElementById("red").innerHTML=redscore;
    </script>
</body>
</html>
4

2 に答える 2

6
  1. JavaScript では大文字と小文字が区別されます。大文字と小文字が一致していません。従来、JavaScript の関数と変数は小文字で始まり、キャメル ケースになっています。
  2. グローバル スコープで既に初期化されている関数の変数を再初期化していました。
  3. スコアが変化するたびに UI を更新するのではなく、最初だけです。

以下は、意図したとおりに実行される更新されたコードです。スコアキーパーは冗長であるため、クラスに変換する価値があるかもしれません。

更新された HTML

<p id="blue"></p>
<p id="red"></p>
<button onclick="startA()">Start for Red</button>
<button onclick="stopA()">Stop for red</button>
<button onclick="startB()">Start for Blue</button>
<button onclick="stopB()">Stop for Blue</button>

更新された JavaScript

var startRed;
var startBlue;
var bluescore = 1;
var redscore = 1;

function startA() {

    stopA();
    startRed = setInterval(function () {
        redscore++;
        updateUI();
    }, 3000)
};

function startB() {
    stopB();
    startBlue = setInterval(function () {
        bluescore++;
        updateUI();
    }, 3000)
};

function stopA() {
    clearInterval(startRed);
};

function stopB() {
    clearInterval(startBlue);
};

function updateUI() {
    document.getElementById("blue").innerHTML = bluescore;
    document.getElementById("red").innerHTML = redscore;
}

updateUI();

jsフィドル

于 2013-08-08T14:36:48.670 に答える
0

次のコードは、探しているものです。変更点は次のとおりです。

  • 関数名が一致するようになりました (startA() => StartA(), startB() => StartB()など)
  • <p>要素は間隔内で更新されます (そうでない場合、要素は更新されません) 。
  • 関数内からローカル変数を削除する

ここで jsfiddle を表示できます: http://jsfiddle.net/5tcNb/

<body>
    <script>
    var startRed, startBlue;
    var redscore = 0, bluescore = 0;
    var r = 1, b = 1;

    function StartA() {
        startRed = setInterval(function() {
            redscore++;
            document.getElementById("red").innerHTML = redscore;
        }, 3000);
    };
    function StartB() {
        startBlue = setInterval(function() {
            bluescore++;
            document.getElementById("blue").innerHTML = bluescore;
        }, 3000);
    };
    function StopA() {
        clearInterval(startRed);
    }; 
    function StopB() {
        clearInterval(startBlue);
    };
    </script>

    <p id="blue">0</p>
    <p id="red">0</p>
    <button onclick="StartA()">Start for Red</button>
    <button onclick="StopA()">Stop for red</button>
    <button onclick="StartB()">Start for Blue</button>
    <button onclick="StopB()">Stop for Blue</button>
</body>
于 2013-08-08T14:39:19.317 に答える