Question

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.

Answer 1

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.net/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.net/AndyE/FFeLC/2/.