Counter Using Javascript, HTML & CSS Not Working

Question

Can anyone help me to get this (https://jsfiddle.net/hmatrix/v3jncqac/) code to work?

Inentention: I want to create a counter that increases in increments.

My HTML:

<body onload="incrementCount(10)">
    <div class="main_container" id="id_main_container">
        <div class="container_inner" id="display_div_id">
        </div>
    </div>
</body>

My JS:

var counter_list = [10,10000,10000];
var str_counter_0 = counter_list[0];
var str_counter_1 = counter_list[1];
var str_counter_2 = counter_list[2];
var display_str = "";
var display_div = document.getElementById("display_div_id");

function incrementCount(current_count){
    setInterval(function(){
        // clear count
        while (display_div.hasChildNodes()) {
            display_div.removeChild(display_div.lastChild);
        }
        str_counter_0++;
        if (str_counter_0 > 99) {
            str_counter_0 = 0; // reset count
            str_counter_1++;    // increase next count
        }
        if(str_counter_1>99999){
            str_counter_2++;
        }
        display_str = str_counter_2.toString() + str_counter_1.toString() + str_counter_0.toString();
        for (var i = 0; i < display_str.length; i++) {
            var new_span = document.createElement('span');
            new_span.className = 'num_tiles';
            new_span.innerText = display_str[i];
            display_div.appendChild(new_span);
        }
    },1000);
}

Where you placed your code ? in `` ? or at the end of ``? Code is good check your console in DevTools — Marek Maszay, Dec 14 '17 at 18:00
If you looked at your developer console, you would also see WHY it is not working. Error message is clear as day in the log. Use your developer tools. — epascarello, Dec 14 '17 at 18:04

Ahmed Ulde · Accepted Answer · 2018-12-27T07:58:54.293

    <body onload="incrementCount(10)">
    <div class="main_container" id="id_main_container">
        <div class="container_inner" id="display_div_id">
        </div>
    </div>
</body>
<script>
var counter_list = [10,10000,10000];
var str_counter_0 = counter_list[0];
var str_counter_1 = counter_list[1];
var str_counter_2 = counter_list[2];
var display_str = "";
var display_div = document.getElementById("display_div_id");

function incrementCount(current_count){
    setInterval(function(){
        // clear count
        while (display_div.hasChildNodes()) {
            display_div.removeChild(display_div.lastChild);
        }
        str_counter_0++;
        if (str_counter_0 > 99) {
            str_counter_0 = 0; // reset count
            str_counter_1++;    // increase next count
        }
        if(str_counter_1>99999){
            str_counter_2++;
        }
        display_str = str_counter_2.toString() + str_counter_1.toString() + 
str_counter_0.toString();
        for (var i = 0; i < display_str.length; i++) {
            var new_span = document.createElement('span');
            new_span.className = 'num_tiles';
            new_span.innerText = display_str[i];
            display_div.appendChild(new_span);
        }
    },1000);
}
</script>

JSFIDDLE: https://jsfiddle.net/v3jncqac/32/

Your onload function cannot find the function because your js is in a different file. you need to add script src on top of html or do it as shown above.

Counter Using Javascript, HTML & CSS Not Working

1 Answers1