Question

嘿所有，我一直在研究这个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';
    }
}

所以，关于如何让这个人工作的任何想法。我知道我可能只是缺少一些简单的东西，只需要几双额外的眼睛。

Answer 1

elseif =＆gt; amurra指出的else if问题是您的一般问题，但我还想建议一种使用元素ID数组而不是if和else if s的替代方法。例如：

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/。

Answer 2

elseif之间的空格可能有助elseif =＆gt; else if

Answer 3

您可以根据输入改变一个特定div的内容，而不是使用多个div。像...这样的东西。

<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.';
    }
}

此处示例：JSBin.com

获取javascript以显示基于文本字段的div

3 个答案: