Java script midterm
- Get link
- X
- Other Apps
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Selected Value</title>
<style> //format and styles
div {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 200px;
}
fieldset {
width:30%;
background: #e1eff2;
}
legend {
padding: 20px 0;
font-size: 20px;
}
p{
display: inline-block;
width: 1000px;
}
.btn {
color:white;
display: block;
width: 40%;
border: none;
background-color:blue;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
text-align: center;
}
select {
width: 150px;
}
option {
width: 150px;
}
</style>
</head>
<body>
<div id="container">
<form>
<fieldset>
<label for="name"style="color:white">Add Products :</label> <br>
<input type="text" id="name" placeholder="Enter product" autocomplete="off"><br>
<label for="price"style="color:white">Add Price :</label> <br>
<input type="number" id="price" placeholder="Enter price" autocomplete="off"><br>
<button class="btn" id="btnAdd" size=10 >Add Product </button> <br>
<label for="list"style="color:white">Product List: </label> <br>
<select id="productlist" name="list" multiple size=10>
<option value="Apple">Apple </option>
<option value="Banana">Banana </option>
</select>
<select id="pricelist" name="price" multiple size=10>
<option value="Apple">150 </option>
<option value="Banana">80 </option>
</select>
<button class="btn" id="btnRemove">Remove Product</button>
</form>
</div>
<script>
const btnAdd = document.querySelector('#btnAdd');
const btnRemove = document.querySelector('#btnRemove');
const product = document.querySelector('#productlist');
const pricelist = document.querySelector('#pricelist');
const name = document.querySelector('#name');
const price = document.querySelector('#price');
var prod =
btnAdd.onclick = (e) => {
e.preventDefault();
if (name.value == '') {
alert('Please enter the name.');
return;
}
const nameoption = new Option(name.value, name.value);
const priceoption = new Option(price.value, price.value);
product.append(nameoption, undefined);
pricelist.append(priceoption, undefined);
name.value = '';
price.value = '';
name.focus();
};
product.onclick = (e) =>{
for (let i = 0; i < product.options.length; i++) {
console.log(i);
if (product.options[i].selected){
pricelist.options[i].selected === true;
}
}
};
btnRemove.onclick = (e) => {
e.preventDefault();
let selected = [];
for (let i = 0; i < product.options.length; i++) {
if (product.options[i].selected){
product.options[i].remove();
pricelist.options[i].remove();
}
}
};
</script>
</body>
</html>
Enter
You sent
- Get link
- X
- Other Apps
Comments
Post a Comment