Почему после изменения значения select кнопкой javascript я не могу выбрать значение select с помощью html? - PullRequest
Новая
       7

Почему после изменения значения select кнопкой javascript я не могу выбрать значение select с помощью html?

1 голос
/ 08 февраля 2020

Я заметил эту странную вещь (по крайней мере, для новичка ie, как я). Я прилагаю скрипт JSfiddle: https://jsfiddle.net/kubaSpolsky/5dn67frg/1/

Шаги: 1) выберите одно из значений 2) нажмите на Дисплей 3) Сброс 4) Выберите еще раз 5) Показать ... на этот раз появляется "неопределенный" 

<!DOCTYPE html>
<body>
    <select id="test" name="" class="form-control">
        <option value="0">Choose...</option>
        <option value="foo">foo</option>
        <option value="boo">boo</option>
    </select>

    <button id="btn_1">Display</button>
    <button id="btn_2">Reset</button>
    <p id="result"></p>

</body>

<script type="text/javascript">

    let test = document.getElementById("test");
    let btnDisplay = document.getElementById("btn_1");
    let btnReset = document.getElementById("btn_2");
    let p = document.getElementById("result");

    btnDisplay.onclick = function(){
        console.log(test.value)
        p.innerHTML = test.value;
    }
    btnReset.onclick = function(){
        test = document.getElementById("test").value = "0";
    }
</script>

Есть идеи почему?

1 Ответ

3 голосов
/ 08 февраля 2020

Вы переназначаете значение test на что-то, кроме поля выбора при сбросе. 

       test = document.getElementById("test").value = "0";

просто избавьтесь от переназначения: 

      document.getElementById("test").value = "0";

Пример: 

    let test = document.getElementById("test");
    let btnDisplay = document.getElementById("btn_1");
    let btnReset = document.getElementById("btn_2");
    let p = document.getElementById("result");

    btnDisplay.onclick = function(){
        console.log(test.value)
        p.innerHTML = test.value;
    }
    btnReset.onclick = function(){
        document.getElementById("test").value = "0";
    }
   <select id="test" name="" class="form-control">
        <option value="0">Choose...</option>
        <option value="foo">foo</option>
        <option value="boo">boo</option>
    </select>

    <button id="btn_1">Display</button>
    <button id="btn_2">Reset</button>
    <p id="result"></p>
...