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

Question

Two buttons move from question to question, my variable "actual" keeps account of what question I am on. I'd like to display this number on the screen in a div. Nothing appears at the moment and there is no error.

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

`$('#question_number')` won't work because it hasn't been parsed yet. — Oriol, Oct 21 '14 at 18:15
possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Oriol, Oct 21 '14 at 18:17
Following up on Oriol's comment, try putting $('#question_number').html(actual); into the $(document).ready function, or move the div above the script node. — Will, Oct 21 '14 at 18:19

score 0 · Answer 1 · answered Oct 21 '14 at 18:18

0

You should place <div class="digit" id="question_number"></div> before the <script>. Because you trying to change contents of element which hasn't initialized yet.

answered Oct 21 '14 at 18:18

nicael

18,550
13
57
90

This adds 0 to the page which is correct but I want it to change to 1 if the next button is pressed. – moss Oct 21 '14 at 18:55
@moss so place the script in the . – nicael Oct 21 '14 at 19:00

score 0 · Answer 2 · answered Oct 21 '14 at 18:20

I would recommend putting this in an external file an including it at the bottom of the page like so.

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

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

Or if you need to do it inline, just add the <script> tag after the 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>

score 0 · Answer 3 · answered Oct 21 '14 at 19:43

It will work if you put your $('#question_number').html(actual); inside the changeQuestion method. That way you will update the current question number when pressing the NEXT or PREVIOUS buttons.

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

Please check my Pluker here.

Hope this helps.

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

3 Answers3