I am currently working on a project that involves a dropdown list:
<select id="itemsList" onchange="gettingList()">
<option>Please choose an option</option>
<option value="50">Shampoo</option>
<option value="100">Toothpaste</option>
<option value="290">Lotion</option>
</select>
<br><br>
My objective is to retrieve the price of the selected product from the list. However, I am facing challenges in obtaining the result after clicking the button.
<input type="number" id="price" disabled="">
<br><br>
<input type="number" id="quantity" onChange="calculate()">
<br><br>
<input type="number" id="result">
<button type="button" onclick="addDetails()">Add</button>
In addition, I have included code for displaying the data in a table format.
<table id="myTable" border="1">
<tr>
<th>Product Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
</table>
<br>
Although I have implemented a script to handle this functionality, I am encountering issues in achieving the desired outcome.
<script>
var getPrice = document.getElementById('itemsList');
function getList () {
document.getElementById('price').value = getPrice.value;
}
function calculate () {
var prc = document.getElementById('price').value;
var qty = document.getElementById('quantity').value;
var result = prc * qty;
document.getElementById('bill').value = result;
}
function addDetails () {
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1. = document.getElementById('itemsList').value;
cell2. = document.getElementById('price').value;
cell3. = document.getElementById('quantity').value;
cell4. = document.getElementById('bill').value;
}
</script>
Is there a better way to populate the cells of the table with the necessary details?