I have been working on this JavaScript file so that as someone types in more text, they will see a different div showing them a piece of code (soon to be a Paypal button).

For some reason, I cannot get the divs to show up. I have used both onchange and onkeyup and neither seem to be helping. So, here is the code:

<br/>Word Count: <input type="text" id="c" name="c" value="311" size="5"
onkeyup="cnt(document.script.w,this)" onchange="showDiv()"/>
</form>

<div id="div1" style="display:none">
Price level 1!
</div>

<div id="div2" style="display:none">
Price level 2!
</div>

<div id="div3" style="display:none">
Price level 3!
</div>

<div id="div4" style="display:none">
Price level 4!
</div>

<div id="div5" style="display:none">
Price level 5!
</div>

<div id="div6" style="display:none">
Price level 6!
</div>

<div id="div7" style="display:none">
Price level 7!
</div>

Script

function showDiv() {
    var myNumValue = document.getElementById('c').value;
    var myNum = parseInt(myNumValue);
    var price1=0;
    var price2=100;
    var price3=200;
    var price4=300;
    var price5=400;
    var price6=500;
    var price7=600;
    
    if (myNum >= price1 && myNum <= price2) {
        document.getElementById('div1').style.display = 'block';
    }
    elseif(myNum >= price2 && myNum <= price3) {
        document.getElementById('div2').style.display = 'block';
    }
    elseif(myNum >= price3 && myNum <= price4) {
        document.getElementById('div3').style.display = 'block';
    }
    elseif(myNum >= price4 && myNum <= price5) {
        document.getElementById('div4').style.display = 'block';
    }
    elseif(myNum >= price5 && myNum <= price6) {
        document.getElementById('div5').style.display = 'block';
    }
    elseif(myNum >= price6 && myNum <= price7) {
        document.getElementById('div6').style.display = 'block';
    }
    else {
        document.getElementById('div7').style.display = 'block';
    }
}

So, any ideas on how to get this to work? I know I am probably just missing something simple, just need a couple of extra pairs of eyes.

I have been working on this JavaScript file so that as someone types in more text, they will see a different div showing them a piece of code (soon to be a Paypal button).

For some reason, I cannot get the divs to show up. I have used both onchange and onkeyup and neither seem to be helping. So, here is the code:

<br/>Word Count: <input type="text" id="c" name="c" value="311" size="5"
onkeyup="cnt(document.script.w,this)" onchange="showDiv()"/>
</form>

<div id="div1" style="display:none">
Price level 1!
</div>

<div id="div2" style="display:none">
Price level 2!
</div>

<div id="div3" style="display:none">
Price level 3!
</div>

<div id="div4" style="display:none">
Price level 4!
</div>

<div id="div5" style="display:none">
Price level 5!
</div>

<div id="div6" style="display:none">
Price level 6!
</div>

<div id="div7" style="display:none">
Price level 7!
</div>

Script

function showDiv() {
    var myNumValue = document.getElementById('c').value;
    var myNum = parseInt(myNumValue);
    var price1=0;
    var price2=100;
    var price3=200;
    var price4=300;
    var price5=400;
    var price6=500;
    var price7=600;
    
    if (myNum >= price1 && myNum <= price2) {
        document.getElementById('div1').style.display = 'block';
    }
    elseif(myNum >= price2 && myNum <= price3) {
        document.getElementById('div2').style.display = 'block';
    }
    elseif(myNum >= price3 && myNum <= price4) {
        document.getElementById('div3').style.display = 'block';
    }
    elseif(myNum >= price4 && myNum <= price5) {
        document.getElementById('div4').style.display = 'block';
    }
    elseif(myNum >= price5 && myNum <= price6) {
        document.getElementById('div5').style.display = 'block';
    }
    elseif(myNum >= price6 && myNum <= price7) {
        document.getElementById('div6').style.display = 'block';
    }
    else {
        document.getElementById('div7').style.display = 'block';
    }
}

So, any ideas on how to get this to work? I know I am probably just missing something simple, just need a couple of extra pairs of eyes.

• javascript
• html
• dom-events

• 1 I added a <br/> to the start of the code, purely so that the code formatter would recognize your code as HTML. It shouldn't make a difference to any potential answers. – Andy E Commented Nov 2, 2010 at 23:36
• By the way, you might want to get rid of those braces in that if/else... for readability (or just put the first { on the same line as the if(...), like you did for function showDiv() {) – irrelephant Commented Nov 2, 2010 at 23:48

3 Answers 3

The elseif => else if issue that amurra points out is your general problem, but I'd also like to suggest an alternative approach that uses an array of element IDs rather than ifs and else ifs. For instance:

function showDiv() {
    var myNumValue = document.getElementById('c').value,
        myNum = Math.min(Math.floor(parseInt(myNumValue, 10) / 100), 6),
        myDiv = ["div1", "div2", "div3", "div4", "div5", "div6", "div7"][myNum];

    document.getElementById(myDiv).style.display = "block";
}

Much tidier, right? Live example at: http://jsfiddle/AndyE/FFeLC/1/ :-)

Note, however, that it's not quite the same. In your example, if the value were 300 then div3 would be shown. In my example, div4 would be shown (which I think is more likely what you need). If you would prefer it how you have it in your code, you can subtract any amount between 0 and 0.1 from myNumValue after parsing it (and before dividing by 100) to get the same result you would expect from your code.

Also, this is probably what you really want: http://jsfiddle/AndyE/FFeLC/2/.

A space between the elseif might help elseif => else if

Instead of having multiple divs you could just alter the content of one specific div based on input. Something like..

<br/>Word Count: <input type="text" id="c" name="c" value="311" size="5"
onkeyup="showDiv()" onchange="showDiv()"/>
</form>

<div id="priceInfo">
    Enter Price
</div>

JS

function showDiv() {

    var myNumValue = document.getElementById('c').value,
        myNum = parseInt(myNumValue),
        priceFound = false;
    var priceBank = {
        'Price Level 1!': 0,
        'Price Level 2!': 100,
        'Price Level 3!': 200,
        'Price Level 4!': 300,
        'Price Level 5!': 400,
        'Price Level 6!': 500,
        'Price Level 7!': 600
    }

    for (var price in priceBank) {
        if ( myNum <= priceBank[price]) {
            document.getElementById('priceInfo').innerHTML = price;
            priceFound = true;
            break;
        }
    }
    if( !priceFound ) {
        document.getElementById('priceInfo').innerHTML = 'no price level found for this amount.';
    }
}

Example here: JSBin.​