Geek Answers Handbook

Getting javascript to display a div based on a text field

Hi everyone, I worked on this javascript file, so when someone prints more text, they will see another div showing them a piece of code (it will soon become a paypal button).

For some reason, I cannot make divs appear. I used both onchange and onkeyup, and none of them help. 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 guy to work. I know that I probably just missed something simple, I just need a couple of extra pairs of eyes.

+4
source share
3 answers

The elseif => else if problem, which amurra points out, is your common problem, but I would also like to suggest an alternative approach that uses an array of element identifiers, rather than if and else if s, For example:

 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"; }

A lot tidier, right? Live example: http://jsfiddle.net/AndyE/FFeLC/1/ :-)

Please note, however, that this is not quite the same. In your example, if the value is 300, then div3 will be shown. In my example, div4 will be shown (which I think is more likely what you need). If you prefer it, as it is in your code, you can subtract any number from 0 to 0.1 from myNumValue after parsing it (and before dividing by 100) to get the same result that you expect from your code.

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

+4
source

A space between elseif can help elseif => else if

+2
source

Instead of having multiple divs, you can simply change the contents of one particular div based on the input. Sort of..

 <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.com

+1
source

More articles:


All Articles