Я могу избежать этой проблемы, сделав мой div прямым потомком body и добавив select к div , но я не могу достичь тех же результатов, когда div является потомком формы в теле (либо при добавлении в div или в форму ).
Я просто создаю раскрывающуюся таблицу ( выберите элемент) , который добавляется к веб-страница, когда пользователь нажимает кнопку. Раскрывающийся список select показывает, когда div является прямым потомком body , но не когда он является потомком формы это ребенок тела . Когда кнопка нажата с использованием метода ниже, раскрывающийся список появляется примерно на 0,25 с, а затем страница возвращается к исходному макету. То же самое происходит при попытке добавить непосредственно к форме.
<!DOCTYPE html> <!--text_index.html-->
<html>
<head>
<meta charset="UTF-8">
<title>Add Drop Down Menu to HTML w/ JS on Button Click</title>
<link rel="stylesheet" type="text/css" href="test_styles.css">
</head>
<body>
<form id="form-button">
<div id="user-area">
<button id="dropdown-button">Add a dropdown menu!</button><br /><br />
</div>
</form>
<script src="test_script.js"></script>
</body>
</html>
Теперь JS показано ниже. Консоль не возвращает ошибок, но элемент select не остается в окне браузера.
let materialArray = ['Select Your Material:',
'Kryptonite',
'Odium',
'Quartz'];
let formButton = document.getElementById('form-button');
let divUserArea = document.getElementById('user-area');
let dropdownBtn = document.getElementById('dropdown-button');
/***********************************************************************/
/****BEGIN LOOP W/ BUTTON CLICK AND NAMED FUNCTION****/
//NOTE: YOU CANNOT appendChild() ON A <DIV> INSIDE A <FORM>.
////IF YOU CAN THEN THERE IS SOME LOGIC THAT I AM MISSING.
////YOU CANNOT appendChild() DIRECTLY ON A FORM EITHER.
let newSelect = document.createElement("select");
let newOption = [];
function onClickDropdownBtn () {
for (let i = 0; i < materialArray.length; i++) {
newOption[i] = document.createElement("option"); //create the new option for the new HTML select element
newOption[i].text = materialArray[i]; //add the appropriate text to the new option
newSelect.add(newOption[i], i); //add the completed option to the HTML select element
}
divUserArea.appendChild(newSelect); //also tried formButton.appendChild(newSelect); and got same
result
return true;
}
dropdownBtn.addEventListener('click', onClickDropdownBtn);
if (onClickDropdownBtn === false) {
newSelect.style.display = 'hidden';
dropdownBtn.style.display = 'block';
} else {
newSelect.style.display = 'block';
dropdownBtn.style.display = 'hidden';
}
/****END LOOP W/ BUTTON CLICK AND NAMED FUNCTION ****/
Есть ли способ добавить к div внутри форма , или форма напрямую?
Спасибо!
Для мерзавцев и хихиканья вот CSS. Может быть, проблема здесь?
select {
width: 200px;
height: 25px;
text-align: center;
}
button {
width: 200px;
height: 25px;
text-align: center;
}