如何在屏幕上显示作为JavaScript变量的数字

How to display a number which is a JavaScript variable on the screen?

本文关键字：JavaScript 变量 数字 显示 屏幕      更新时间：2023-09-26

两个按钮从一个问题移动到另一个问题，我的变量"actual"记录了我正在回答的问题。我想在屏幕上以div的形式显示这个数字。目前没有任何显示，也没有错误。

<script type="text/javascript">
    var actual = 0; // select by default the first question
    $(document).ready(function() {
        var number_of_question = $('.question').length; // get number of questions
        $('.question:gt(' + actual + ')').hide(); // Hide unselect question
        $('#nextQ').click(function() {
            if (actual < number_of_question - 1) {
                changeQuestion(actual + 1); // display select question
            }
        });
        $('#forwardQ').click(function() {
            if (actual) {
                changeQuestion(actual - 1); // display select question
            }
        });
    });
    function changeQuestion(newQuestion) {
        $('.question:eq(' + actual + ')').hide(); // hide current  question
        $('.question:eq(' + newQuestion + ')').show(); // show new question
        actual = newQuestion; // memorize actual selection
        //alert(actual);
    }
    $('#question_number').html(actual);
</script>
<div class="digit" id="question_number"></div>

您应该将<div class="digit" id="question_number"></div>放在<script>之前。因为您试图更改尚未初始化的元素的内容。

我建议把它放在一个外部文件中，并像这样把它包含在页面底部。

 <div class="digit" id="question_number"></div>
 <script src="/path/to/script.js"></script>

或者，如果需要内联，只需在html后面添加<script>标记。

<div class="digit" id="question_number"></div>
<script type="text/javascript">
var actual = 0; // select by default the first question

$(document).ready(function() {
var number_of_question = $('.question').length; // get number of questions
$('.question:gt(' + actual + ')').hide(); // Hide unselect question
$('#nextQ').click(function() {
if(actual < number_of_question - 1 ) {
    changeQuestion(actual + 1); // display select question
}
});
$('#forwardQ').click(function() {
if(actual) {
changeQuestion(actual - 1); // display select question
}
});
});
function changeQuestion( newQuestion ) {
$('.question:eq(' + actual +')').hide(); // hide current  question
$('.question:eq(' + newQuestion +')').show();   // show new question
actual = newQuestion; // memorize actual selection
//alert(actual);
}
$('#question_number').html(actual);
</script>

如果您将$（'#question_number'）.html（实际）；changeQuestion方法内部。这样，当按下"下一个"或"上一个"按钮时，您将更新当前问题编号。

var actual = 0; // select by default the first question
$(document).ready(function() {
    var number_of_question = $('.question').length; // get number of questions
    $('.question:gt(' + actual + ')').hide(); // Hide unselect question
    $('#nextQ').click(function() {
        if (actual < number_of_question - 1) {
            changeQuestion(actual + 1); // display select question
        }
    });
    $('#previousQ').click(function() {
        if (actual) {
            changeQuestion(actual - 1); // display select question
        }
    });
});
function changeQuestion(newQuestion) {
    $('.question:eq(' + actual + ')').hide(); // hide current  question
    $('.question:eq(' + newQuestion + ')').show(); // show new question
    actual = newQuestion; // memorize actual selection
    $('#question_number').html(actual);
    alert(actual);
}

请在这里查看我的Pluker。

希望这能有所帮助。

相关文章：