Выбор формы Javascript
Я хочу предоставить пользователям возможность выбора двух разных HTML-форм на основе выбора пользователя. Собрал отсюда и пару других ресурсов, вот что у меня есть на данный момент. Он работает в моем браузере Edge, но не в Chrome.
<!DOCTYPE html>
<html>
<script language = "JavaScript">
function showInput() {
document.getElementById('display1').innerHTML =
document.getElementById('FRAC_MULTI').value;
}
function changeOptions(selectEl) {
let selectedValue = selectEl.options[selectEl.selectedIndex].value;
let subForms = document.getElementsByClassName('className')
for (let i = 0; i < subForms.length; i += 1) {
if (selectedValue === subForms[i].name) {
subForms[i].setAttribute('style', 'display:block')
} else {
subForms[i].setAttribute('style', 'display:none')
}
}
}
</script>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" />
</head>
<body>
<h2>Av. Temp Recorder</h2>
Choose Temperature Gauge:
<select onchange = "changeOptions(this)">
<option value = "" selected = "selected">Select Option</option value = "">
<option value = "form_1">Temp LVL 1</option>
<option value = "form_2">Temp LVL 2</option>
</select>
<form class = "className" name = "form_1" id = "form_1" style = "display:none">
LVL 1 Configuration Form
<!---- THIS IS FORM 1---->
</form>
<form class = "className" name = "form_2" id = "form_2" style = "display:none">
LVL 2 Configuration Form<br>
<!---- THIS IS FORM 2---->
Fractal Multiplier:<input name = "name" size = "50" value = "500000" id = "FRAC_MULTI">
</form>
<br><br><br>
<input type = "submit" onclick = "showInput();"><br/>
<label>User input: </label><br><br><pre>
{
"FRAC_MULTI":"<span id = "display1"></span>",
}
</pre>
</body>
</html>
Когда я выбираю первый вариант, я вижу правильный текст, но при выборе второго варианта в Chrome я не вижу никакой формы. В Edge я вижу форму при выборе варианта 2 И текст при выборе варианта 1.
В Chrome это работает, если я использую только текст в каждой форме (как показано в форме_1 выше), поэтому проблема заключается в том, что форма скрыта кодом.
Любые предложения относительно того, что проблема может быть?
у тебя есть консольные логи?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Ситуация следующая: когда вы найдете все элементы с getElementsByClassName, вы получите список HTMLCollection с дочерними элементами. Когда вы ссылаетесь на subForms[1].name, вы возвращаете поле ввода в случае хрома вместо атрибута имени формы. Если вы переименуете атрибут имени поля ввода в name2, ваш скрипт будет работать, или вы можете использовать subForms[i].getAttribute('name'), и тогда вы вернете атрибут вместо чего-то.
В крае, когда вы запускаете код вручную, элемент ввода будет возвращен, но кажется, что когда он запускает код, он выполняет какой-то магический трюк и отдает предпочтение значению атрибута вместо элемента. Возможно, потому что он обнаруживает, что вы хотите сравнить строку вместо Element.
Обратите внимание: доступ к элементам HTMLCollection можно получить по их имени, идентификатору или номеру индекса.
Спасибо за отзыв, похоже, вы правы на 100%, и ваш ответ дает отличное объяснение! Меня не заботило, как я использовал «имя» для имени атрибута, поэтому я изменил это.
Я бы также использовал getAttribute() с правильным названием, потому что в долгосрочной перспективе это окупится, если вы сделаете это правильно. ;)
Уточните, пожалуйста, что должен делать код, а что не так, как ожидалось, а также о любых возникших ошибках. См. Как спросить