CODEWITHSUNDEEP
javascriptloopsfor-loop
michaelmcgurk
michaelmcgurk

Reputation: 6509

Javascript For Loop breaks when number > 10. Any pointers?

I'm using the following code which works perfectly, until you select 11 in the dropdown and it seems to reset.

My updated JSFiddle: http://jsfiddle.net/mcgarriers/rVPnu/2/

Is there an obvious reason for this?

HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>


        <title>Javascript Test</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

<select id="mySelect" onchange="npup.doSelect(this);">
    <option value="">-- select --</option>

    <!-- the option values are suffixes for the elements to show -->
    <option value="0">1</option>
    <option value="1">2</option>
    <option value="2">3</option>
    <option value="3">4</option>
    <option value="4">5</option>

    <option value="5">6</option>
    <option value="6">7</option>
    <option value="7">8</option>
    <option value="8">9</option>
    <option value="9">10</option>
    <option value="10">11</option>

</select>


<div id="mySpecialElements"><div id="npup0" class="hidden">one div</div><div id="npup1"     class="hidden">second div</div><div id="npup2" class="hidden">third div</div><div id="npup3" class="hidden">fourth div</div><div id="npup4" class="hidden">fifth div</div><div id="npup5" class="hidden">sixth div</div><div id="npup6" class="hidden">seventh div</div><div id="npup7" class="hidden">eighth div</div><div id="npup8" class="hidden">ninth div</div><div id="npup9" class="hidden">tenth div</div><div id="npup10" class="hidden">eleventh div</div><div id="npup11" class="hidden">twelfth div</div></div>

</body>
</html>

And the Javascript:

window.npup = (function (containerId, baseId) {
    // save the container of your special element
    var elementsContainer = document.getElementById(containerId);
    var baseId = baseId;
    function doSelect(select) {
        // get value of select
        var value = select.value;
        // find element based on the value of the select
        var targetDiv = findElement(value);
        if (!targetDiv) { return;} // didn't find the element, bail
        // do magic..
        hideAll(elementsContainer);
        showElement(targetDiv);
    }
    // retrieve some element based on the value submitted
    function findElement(value) {
        return document.getElementById(baseId+value);
    }
    // hide all element nodes within some parent element
    function hideAll(parent) {
        var children = parent.childNodes, child;
        // loop all the parent's children
        for (var idx=0, len = children.length; idx<len; ++idx) {
            child = children.item(idx);
            // if element node (not comment- or textnode)
            if (child.nodeType===1) {
                // hide it
                child.style.display = 'none';
            }
        }
    }

    // display a certain element
    function showElement(element) {

    element.style.display = '';
     //alert(element.id )
    var tee = element.id
    // var gh = tee.charAt(tee.length-1);  // get the int form id will (fail if GT 9)
    var gh = tee.slice(-1);

    // if id GT 0 
    if(gh  > 0){
       var elms = document.getElementById('mySpecialElements');

      // get all child nodes within mySpecialElements       
      for (var i = 0; i < gh ; i++) {
      // if DIV display elements by id as block
        if(elms.nodeName == "DIV"){ 
      document.getElementById(elms.childNodes[i].id).style.display = "block";
        }
       }
    }

    } 
    // hide all on page load (might want some extra logic here)
    hideAll(elementsContainer);

    // export api to use from select element's onchange or so
    return {
        doSelect: doSelect
    };
})('mySpecialElements', 'npup'); // give the routine a container id of your special elements, and the base id of those elements

Again. Super apologies for just adding the link. Duly noted for the future.

Many thanks for taking a look at this

Upvotes: 0

Views: 154

Answers (3)

mplungjan
mplungjan

Reputation: 178011

Change to

var gh = parseInt(tee.replace(/[^\d]/g,""),10)

Upvotes: 0

styrr
styrr

Reputation: 829

The problem is this line

var gh = tee.slice(-1);

You only take the last character of the string. In case of "npup10" it's just 0. If your prefix is always "npup" then you can do this to solve the problem:

var gh = tee.substring(4);

Upvotes: 3

Guffa
Guffa

Reputation: 700372

Look at this line:

var gh = tee.slice(-1);

It will pick out the last character of the id string, so for the 11th element it will be 0 instead of 10.

Use substr instead:

var gh = tee.substr(4);

Upvotes: 4

Related Questions