<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercise 007 JavaScript Selected Value</title>
<link rel="stylesheet" href="Exercise 007 - Style code.css">
</head>
<body>
<h1 class="font1"> Products & Price Select box</h1>
<div id="container">
<form>
<fieldset>
<label for="name"> • Add Products: </label>
<input type="text" id="name" placeholder="Enter Product" autocomplete="off"> <br> <br>
<label for="price"> • Add Price: </label>
<input type="number" id="price" placeholder="Enter Price" autocomplete="off"> <br>
<br>
<button class="btn" id="btnAdd" size=10> <b> Add Product </b> </button> <br>
<div class="row">
<div class="column">
<label for="list"> • Product List: </label> <br>
<select id="list" name="list" multiple size=10>
<option value="apple"> Apple </option>
<option value="banana"> Banana </option>
</select>
</div>
<div class="column">
<label for="list"> • Price List: </label> <br>
<select id="price-list" name="price-list" multiple size=10>
<option value="40"> 40 </option>
<option value="60"> 60 </option>
</select>
</div>
</div>
<button class="btn" id="btnRemove"> <b> Remove Product </b> </button> <br>
</fieldset>
</form>
</div>
<script>
const btnAdd = document.querySelector('#btnAdd');
const btnRemove = document.querySelector('#btnRemove');
const selectbox = document.querySelector('#list');
const priceselectbox = document.querySelector('#price-list');
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;
}
if (price.value == '') {
alert('Please enter the price.');
return;
}
const option = new Option(name.value, name.value);
const optionprice = new Option(price.value, price.value);
selectbox.add(option, undefined);
priceselectbox.add(optionprice, undefined);
name.value = '';
price.value = '';
name.focus();
};
btnRemove.onclick = (e) => {
e.preventDefault();
let selected = [];
for (let i = 0; i < selectbox.options.length; i++) {
selected[i] = selectbox.options[i].selected;
}
const noneSelected = selected.every(x => !x);
if (noneSelected) {
for (let i = 0; i < priceselectbox.options.length; i++) {
selected[i] = priceselectbox.options[i].selected;
}
}
let index = selectbox.options.length;
while (index--) {
if (selected[index]) {
selectbox.remove(index);
priceselectbox.remove(index);
}
}
};
</script>
</body>
</html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercise 007 JavaScript Selected Value</title>
<link rel="stylesheet" href="Exercise 007 - Style code.css">
</head>
<body>
<h1 class="font1"> Products & Price Select box</h1>
<div id="container">
<form>
<fieldset>
<label for="name"> • Add Products: </label>
<input type="text" id="name" placeholder="Enter Product" autocomplete="off"> <br> <br>
<label for="price"> • Add Price: </label>
<input type="number" id="price" placeholder="Enter Price" autocomplete="off"> <br>
<br>
<button class="btn" id="btnAdd" size=10> <b> Add Product </b> </button> <br>
<div class="row">
<div class="column">
<label for="list"> • Product List: </label> <br>
<select id="list" name="list" multiple size=10>
<option value="apple"> Apple </option>
<option value="banana"> Banana </option>
</select>
</div>
<div class="column">
<label for="list"> • Price List: </label> <br>
<select id="price-list" name="price-list" multiple size=10>
<option value="40"> 40 </option>
<option value="60"> 60 </option>
</select>
</div>
</div>
<button class="btn" id="btnRemove"> <b> Remove Product </b> </button> <br>
</fieldset>
</form>
</div>
<script>
const btnAdd = document.querySelector('#btnAdd');
const btnRemove = document.querySelector('#btnRemove');
const selectbox = document.querySelector('#list');
const priceselectbox = document.querySelector('#price-list');
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;
}
if (price.value == '') {
alert('Please enter the price.');
return;
}
const option = new Option(name.value, name.value);
const optionprice = new Option(price.value, price.value);
selectbox.add(option, undefined);
priceselectbox.add(optionprice, undefined);
name.value = '';
price.value = '';
name.focus();
};
btnRemove.onclick = (e) => {
e.preventDefault();
let selected = [];
for (let i = 0; i < selectbox.options.length; i++) {
selected[i] = selectbox.options[i].selected;
}
const noneSelected = selected.every(x => !x);
if (noneSelected) {
for (let i = 0; i < priceselectbox.options.length; i++) {
selected[i] = priceselectbox.options[i].selected;
}
}
let index = selectbox.options.length;
while (index--) {
if (selected[index]) {
selectbox.remove(index);
priceselectbox.remove(index);
}
}
};
</script>
</body>
</html>