Ошибка с получением значения выбора html в переменную js

поэтому я работаю над проектом, и мне нужно использовать значение меню выбора. Однако когда я это делаю, я получаю ошибку TypeError: невозможно прочитать параметры свойства со значением null. Надеюсь, вы, ребята, сможете помочь? Вот мой HTML-код для меню выбора:

<div id = "MetalTypeSect">
  <h2><a id = "MetalType"></a>Metal Type</h2>
    <select id = "select1">
      <option value = "blank">--Select--</option>
      <option value = "Alum">Alum. 5052</option>
      <option value = "GalvL">Galvaneal</option>
      <option value = "CRS">CRS</option>
      <option value = "SST">SST304</option>
      <option value = "GalvZ">Galvanized</option>
    </select>
</div>

и вот мой код js

var metalTypeSelectedValue = document.getElementById("select1");
var metalType = 
metalTypeSelectedValue.options[metalTypeSelectedValue.selectedIndex].value;

while(true) {
  if (metalType == "blank") {
    document.getElementById("AlumThickness").style.visibility = "hidden";
  }
}

Ошибка написана в строке 2 кода js. Помощь!

Подождите, пока DOM загрузится, прежде чем обращаться к нему. Кроме того, while(true) создаст бесконечный цикл после решения проблемы DOM.

Sebastian Simon 10.08.2018 16:34

В настоящий момент вы делаете var metalTypeSelectedValue = document.getElementById("select1");, ни один элемент с этим id не существует.

connexo 10.08.2018 16:42
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
94
1

Ответы 1

Используйте событие onchange (). Нравится

<select id = "select1" onchange = "myFunction()">

Затем получите значение в своей функции js

function myFunction() {
    var metalType = document.getElementById("select1").value;

    if (metalType == "blank") {
        document.getElementById("AlumThickness").style.visibility = "hidden";
    }
}

Другие вопросы по теме