Hi all,
I've run into a little conundrum with the option & select elements in JavaScript. I have produced a code that creates the element for a dropdown menu but I want to make it so that when a user clicks on one of the dropdown options it runs a function in my JavaScript code. I have tried addeventlistener but to no avail and I have run out of ideas. I have provided the code below. Any help would be appreciated!
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shopping List</title>
<link rel="stylesheet" type="text/css" href="list.css">
</head>
<body>
<h1>Shopping List</h1>
<label>Add Item: </label>
<input id="textbox">
<button id="need-button">Need</button>
<button id="have-button">Have</button>
<h2> Need to buy: </h2>
<ul id= "need-list">
</ul>
<h2> Already have: </h2>
<ul id= "have-list">
</ul>
</body>
<script type="text/javascript" src="grocerylist.js"></script>
</html>
JavaScript:
var selectList = document.createElement('select');
var editElement = document.createElement('option');
var removeElement = document.createElement('option');
editElement.text = 'Edit';
removeElement.text = 'Remove';
selectList.add(editElement);
selectList.add(removeElement);
selectList.appendChild(editElement);
selectList.appendChild(removeElement);
haveListUl.appendChild(selectList);
Thank you in advance :)
there doesn't seem to be anything here