Использование Javascript с раскрывающимся списком HTML

Question

У меня проблемы с использованием данных из раскрывающегося списка с моим javascript. Я хочу, чтобы он распечатывался на странице в зависимости от того, что выбрано, но пока что, когда они выбирают значение, ничего не происходит. Я новичок в javasript, пожалуйста, помогите:

<form>
    <select name="abc" id="abc" onChange="check(this.form)">
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
    </select>
</form>
<script>
    function check (form){
        var letter = document.getElementsById("abc");
        var userLtr = letter.options[letter.selectedIndex].value;
        if (userLtr == "a"){
            document.write ("You selected A");
        }
        else if(userLtr == "b"){
            document.write ("You selected B");
        }
        else{
            document.write ("You selected C");
        }
    }
</script>

edit: Спасибо всем за помощь. Я разобрался !!

Answer 1

Ваш код в разделе <script> выполняется только тогда, когда страница готова. Вам нужно будет использовать что-то вроде onchange в теге select и функцию для его обработки. событие onchange. И getDocumentId должно быть getDocumentById, вы можете проверить документацию здесь .

<select name="abc" id="abc" onchange="handleChange()">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
</select>
<script>
    function handleChange() {
      var letter = document.getElementById("abc");
      var userLtr = letter.options[letter.selectedIndex].value;
      if(userLtr == "a"){
         document.write("You selected A");
      }
    }
</script>

Answer 2

Вот как это сделать:

        <select name="abc" id="abc">
            <option value="a">A</option>
            <option value="b">B</option>
            <option value="c">C</option>
        </select>

        <div id="text"></div>
        <script>
            document.getElementById("abc").onchange = function () {
                if (this.value === "a")
                {
                    document.querySelector("#text").innerHTML = "You selected A!";
                }
            };
        </script>

Answer 3

Помимо опечатки в getElementById, вы должны добавить прослушиватель событий к элементу select:

<script>
    var letter = document.getElementById("abc");
    letter.addEventListener('change', handleSelect) 
    function handleSelect(e) {
        var userLtr = letter.options[letter.selectedIndex].value;
        if(userLtr == "a"){
            document.write("You selected A");
        }
    }   
</script>

Answer 4

Вы забыли «by» в «getElementById».

Если вы добавите прослушиватель событий onchange, связанный с функцией javascript, которая будет записывать в div, вы можете использовать строку шаблона чтобы показать, какой вариант выбран, как показано ниже.

function changedFunc() {
  var letter = document.getElementById("abc");
  var userLtr = letter.options[letter.selectedIndex].value;
  document.querySelector('#write-target').innerText =`You selected ${userLtr}`;
} 
changedFunc();

<select name="abc" id="abc" onchange="changedFunc()">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
</select>
<div id="write-target"></div>