将一个html id传递到javascript函数中

passing an html id into javascript function

本文关键字：javascript 函数 id html 一个      更新时间：2023-09-26

我正在学习JavaScript，不知道如何将ID从html传递到JavaScript函数中。

我的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。有什么建议吗？

我注意到您的代码中还有一些其他问题，我对修复进行了评论，并添加了一些其他提示。

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;
}

一些有用的参考链接：

  • setInterval
  • clearInterval
  • getElementById
  • 保留字（不能用作变量名的事物）
  • 赋值运算符（此处列出了更多快捷运算符）
  • 介绍JavaScript DOM
  • 不方便的API：Dom理论

如果这是一个正式类，那么您可能只需要使用基本的DOM方法来获取元素（getElementById等）。如果你只是自己学习，我会鼓励你学习DOM库。我建议jQuery，它很容易学习，现在或多或少已经成为事实上的标准。使用jQuery而不是document.getElementById('quizclock')，您可以执行以下操作：$('#quizclock')。使用jQuery可以缩短代码，使不同浏览器之间的内容标准化，并有助于保护您免受这些浏览器中的错误的影响。

你现在只是一个初学者，在这样的小例子中，你不需要担心全局变量，但你应该知道，使用太多全局变量通常是个坏主意。如果页面上的另一个函数也使用了名为seconds的全局变量，该怎么办？它可能会更改seconds并使您的计时器出错。这有点进步，但避免这种情况的一种方法是将代码封装在一个自调用的匿名函数中：

(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

您可以使用以下选项选择元素：

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

然后，您可以使用设置值

quizclock.innerHTML = seconds;
相关文章：