0

JavaScript を学習していますが、html から JavaScript 関数に ID を渡す方法がわかりません。

私のCSSページにはこれがあります：

#quizclock（ここにプロパティがあります）

そして私のHTMLページには、次のようにJavaScript関数があります。

<script type="text/javascript">
    var seconds = 0;
    var clockId;

    function runClock()
    {
    seconds + 1;
    quizclock = seconds;  //right here is my problem.
    }

    function startClock()
    {
    showQuiz();
    runClock();
    setInterval("runClock()", 1000);
    }

    function stopClock()
    {
    clearInterval(runClock);
    gradeQuiz();
    return = correctAns;
    alert("You have " + correctAns + " correct out of 5 in " + quizclock + " seconds.");
    }
</script>

したがって、関数で id quizclock を使用する必要があります。任意のヒント？

4

2 に答える 2

1

コードに他にもいくつか問題があることに気付きました。修正点にコメントし、他のヒントもいくつか追加しました。

var seconds = 0;
var clockId;
var correctAns;

// Lets get a reference to the quizclock element and save it in
// a variable named quizclock
var quizclock = document.getElementById('quizclock');

function runClock() {
    // seconds + 1;
    // This calculates seconds + 1 and then throws it away,
    // you need to save it back in to the variable
    // You could do that with:
    // seconds = seconds + 1;
    // But it would be even better with the shorthand:
    seconds += 1;

    // set the HTML inside of the quizclock element to new time
    quizclock.innerHTML = seconds;
}

function startClock() {
    showQuiz();
    runClock();

    // setInterval("runClock()", 1000);
    // When using setInterval and setTimeout you generally just
    // want to directly pass it the function by name. Passing it
    // a string "runClock()" is in effect actually running
    // eval("runClock()"), eval should be avoided unless you
    // really need it.
    // setInterval returns a number which identifies the interval,
    // you need to save that number, you'll need it when you
    // call clearInterval
    clockId = setInterval(runClock, 1000);
}

function stopClock() {
    // clearInterval takes the id that setInterval
        // returned to clear the interval
    clearInterval(clockId);

    gradeQuiz();

    // you had this alert statment after the return statement,
    // it would have never run, return statements end the
    // function and anything after them is ignored
    alert("You have " + correctAns + " correct out of 5 in " +
        quizclock + " seconds.");

    //return = correctAns;
    // the return statement doesn't need a =,
    // return = correctAns says set a variable named return to the
    // value of correctAns since return is a reserved word,
    // that should generate an error
    return correctAns;
}

いくつかの便利な参照リンク:

これが正式なクラスの場合、基本的な DOM メソッドを使用して要素 (getElementByIdなど) を取得する必要がある場合があります。独学で学習している場合は、DOM ライブラリを学習することをお勧めします。jQueryをお勧めします。習得が容易で、現在では多かれ少なかれ事実上の標準になっています。代わりにjQueryを使用すると、次のdocument.getElementById('quizclock')ことができます$('#quizclock')。jQuery を使用すると、コードが少し短くなり、さまざまなブラウザー間で標準化され、それらのブラウザーのバグから保護されます。

あなたはまだ初心者です。このような小さな例では、グローバル変数について心配する必要はありません。ページ上の別の関数で という名前のグローバル変数も使用されている場合はどうなるsecondsでしょうか? 変更secondsされ、タイマーが台無しになる可能性があります。これは少し進んでいますが、これを回避する 1 つの方法は、コードを自己呼び出しの無名関数でラップすることです。

(function () {
    var seconds = 0;

    // inside here seconds is visible and can be used

}());

// outside seconds is not declared, it will return undefined.

残念ながら、内部の関数も外部には表示されないため、それらを経由してonclick=アタッチすることはできませんが、DOM を使用してアタッチすることはできます (すべきです):

var submitButton = document.getElementById('submitanswers'); // you'll have to give the button an id
submitButton.addEventListener('click', stopClock, false);

繰り返しますが、jQuery を使用すると、これがさらに簡単になります。

$('#submitanswers').on('click', stopClock);

同様に、jQuery を使用している場合は、変数をグローバル名前空間から除外する関数でコードをラップする必要があります。

$(document).ready(function () {
    var seconds;
    // again seconds is visible here
});

// but not here
于 2013-02-21T04:04:48.170 に答える
0

次の方法で要素を選択できます。

var quizclock = document.getElementById('quizclock');

次に、次の方法で値を設定できます。

quizclock.innerHTML = seconds;
于 2013-02-21T02:47:29.163 に答える