получение JavaScript для отображения div на основе текстового поля

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 => else if, на которую указывает amurra, является вашей общей проблемой, но я также хотел бы предложить альтернативный подход, который использует массив идентификаторов элементов, а не if s и 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 (который, я думаю, скорее всего вам нужен). Если вы предпочитаете, чтобы это было в вашем коде, вы можете вычесть любую величину от 0 до 0,1 из myNumValue после анализа (и до деления на 100), чтобы получить тот же результат, который вы ожидаете от своего кода.

Кроме того, это, вероятно, то, что вы действительно хотите: http://jsfiddle.net/AndyE/FFeLC/2/.

Answer 2

Пробел между elseif может помочь elseif => 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