Home/ Questions/Q 6671961
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T03:27:08+00:00

I’m using the following code which works perfectly, until you select 11 in the

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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);
    • 0