The issue with this is that you have not used element.setAttributeNode()
to set add-item-form-priority
as the class value to any of the element. Once you do that, your code would be working.
const formPriority = document.createElement("select");
formPriority.setAttribute("name","project");
formPriority.setAttribute("placeholder","Priority");
const formPriorityClass = document.createAttribute("class");
formPriorityClass.value = "add-item-form-priority";
formPriority.setAttributeNode(formPriorityClass);
const priorityOption1 = document.createElement("option");
priorityOption1.value = "Priority 1";
priorityOption1.text = "Priority 1";
formPriority.appendChild(priorityOption1);
const priorityOption2 = document.createElement("option");
priorityOption2.value = "Priority 2";
priorityOption2.text = "Priority 2";
formPriority.appendChild(priorityOption2);
const priorityOption3 = document.createElement("option");
priorityOption3.value = "Priority 3";
priorityOption3.text = "Priority 3";
formPriority.appendChild(priorityOption3);
const priorityOption4 = document.createElement("option");
priorityOption4.value = "Priority 4";
priorityOption4.text = "Priority 4";
formPriority.appendChild(priorityOption4);
addItemNewBottomRowDiv.appendChild(formPriority);
I have created a drop down menu using the below code:
// Add priority to form within bottom row div
const formPriority = document.createElement("select");
formPriority.setAttribute("name","project");
formPriority.setAttribute("placeholder","Priority");
const formPriorityClass = document.createAttribute("class");
formPriorityClass.value = "add-item-form-priority";
const priorityOption1 = document.createElement("option");
priorityOption1.value = "Priority 1";
priorityOption1.text = "Priority 1";
formPriority.appendChild(priorityOption1);
const priorityOption2 = document.createElement("option");
priorityOption2.value = "Priority 2";
priorityOption2.text = "Priority 2";
formPriority.appendChild(priorityOption2);
const priorityOption3 = document.createElement("option");
priorityOption3.value = "Priority 3";
priorityOption3.text = "Priority 3";
formPriority.appendChild(priorityOption3);
const priorityOption4 = document.createElement("option");
priorityOption4.value = "Priority 4";
priorityOption4.text = "Priority 4";
formPriority.appendChild(priorityOption4);
addItemNewBottomRowDiv.appendChild(formPriority);
I am trying to get the value of the selected option, but haven’t been able to get at it. Here’s where I am at currently:
let newListItemPriority = document.querySelector(".add-item-form-priority");
let newListItemPrioritySeleted = newListItemPriority.options[newListItemPriority.selectedIndex].value;
I have tried various different things online, but haven’t had any luck so far. Currently I’m getting the following error:
Uncaught TypeError: Cannot read property 'options' of null
Would be really grateful if anybody has any ideas how I can get the value.
I am glad to help you. Well, may I know the reason that why you haven’t used