Solution 1 :

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);

Problem :

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.

Comments

Comment posted by pavel

newListItemPriority

Comment posted by user12137152

I am glad to help you. Well, may I know the reason that why you haven’t used

By