我一直在处理这个 JavaScript 文件,这样当有人输入更多文本时,他们会看到一个不同的 div 显示一段代码(很快就会成为一个 Paypal 按钮)。
出于某种原因,我无法显示 div。我同时使用了 onchange
和 onkeyup
,但似乎都没有帮助。所以,这是代码:
<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>
脚本
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';
}
}
那么,关于如何让它发挥作用有什么想法吗?我知道我可能只是缺少一些简单的东西,只需要几双额外的眼睛。
最佳答案
amurra 指出的 elseif
=> else if
问题是您的一般问题,但我还想建议一种使用元素数组的替代方法ID 而不是 if
和 else if
。例如:
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";
}
更整洁,对吧?在线示例:http://jsfiddle.net/AndyE/FFeLC/1/ :-)
但是请注意,这并不完全相同。在您的示例中,如果值为 300,则将显示 div3。在我的示例中,将显示 div4(我认为这更有可能是您需要的)。如果您更喜欢它在您的代码中的使用方式,您可以在解析之后(除以 100 之前)从 myNumValue
中减去 0 到 0.1 之间的任何数量,以获得您期望的相同结果你的代码。
此外,这可能是您真正想要的:http://jsfiddle.net/AndyE/FFeLC/2/ .
关于javascript - 让JavaScript根据文本字段显示div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4083022/