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

两个按钮从一个问题移动到另一个问题，我的变量“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>

var实际值=0；//默认情况下，选择第一个问题
$（文档）.ready（函数（）{
var number of_question=$（'.question'）.length；//获取问题数量
$（'.question:gt（'+actual+'））.hide（）；//隐藏取消选择问题
$（'#nextQ'）。单击（函数（）{
if（实际值<问题数量-1）{
changeQuestion（实际+1）；//显示选择问题
}
});
$（'#forwardQ'）。单击（函数（）{
如果（实际）{
changeQuestion（实际值-1）；//显示选择问题
}
});
});
函数更改问题（新问题）{
$（'.question:eq（'+actual+'））.hide（）；//隐藏当前问题
$（'.question:eq（'+newQuestion+'））.show（）；//显示新问题
actual=newQuestion；//记住实际选择
//警报（实际）；
}
$（'问题编号'）.html（实际）；

您应该将

放在

前面。因为您试图更改尚未初始化的元素的内容。

我建议将其放入一个外部文件中，并像这样将其包含在页面底部

 <div class="digit" id="question_number"></div>

 <script src="/path/to/script.js"></script>

或者，如果需要内联执行，只需在html之后添加

标记即可

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

var实际值=0；//默认情况下，选择第一个问题
$（文档）.ready（函数（）{
var number of_question=$（'.question'）.length；//获取问题数量
$（'.question:gt（'+actual+'））.hide（）；//隐藏取消选择问题
$（'#nextQ'）。单击（函数（）{
if（实际值<问题数量-1）{
changeQuestion（实际+1）；//显示选择问题
}
});
$（'#forwardQ'）。单击（函数（）{
如果（实际）{
changeQuestion（实际值-1）；//显示选择问题
}
});
});
函数更改问题（新问题）{
$（'.question:eq（'+actual+'））.hide（）；//隐藏当前问题
$（'.question:eq（'+newQuestion+'））.show（）；//显示新问题
actual=newQuestion；//记住实际选择
//警报（实际）；
}
$（'问题编号'）.html（实际）；

如果你把你的$（'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);
}

var实际值=0；//默认情况下，选择第一个问题
$（文档）.ready（函数（）{
var number of_question=$（'.question'）.length；//获取问题数量
$（'.question:gt（'+actual+'））.hide（）；//隐藏取消选择问题
$（'#nextQ'）。单击（函数（）{
if（实际值<问题数量-1）{
changeQuestion（实际+1）；//显示选择问题
}
});
$（'#previousQ'）。单击（函数（）{
如果（实际）{
changeQuestion（实际值-1）；//显示选择问题
}
});
});
函数更改问题（新问题）{
$（'.question:eq（'+actual+'））.hide（）；//隐藏当前问题
$（'.question:eq（'+newQuestion+'））.show（）；//显示新问题
actual=newQuestion；//记住实际选择
$（'问题编号'）.html（实际）；
警报（实际）；
}

请检查我的长毛球

---

希望这能有所帮助。

$（'question_number'）

将不起作用，因为它尚未被解析。可能会重复Oriol的评论，请尝试放入$（'question_number'）.html（实际）；将div移到$（document）.ready函数中，或将div移到脚本节点上方。这会将0添加到页面中，这是正确的，但如果按下“下一步”按钮，我希望将其更改为1。@moss因此，请将脚本放在脚本节点中。