I am trying to create a html page with JavaScript that would wait for a user to put in a certain set of letters ("A", "B", and "C".)
If a user types any of these letters into the text input area, they would have the following subtotal by letter:
- "A" ($7.50)
- "B" ($8)
- "C" ($10)
My HTML code below has select input attributes with id's referred to as "badge"
I would like the code to when a certain character (referred above) is entered into the text fields, it calculates the amount for the select inputs and prints them in the placeholder within this element (- $ <input type="text" name="price" placeholder="0.00" readonly).
Any help would be greatly appreciated. Let me know if you need any more information. Thanks =)
Here's the question if it helps:
Based on the badge options chosen, calculations are needed to calculate the total cost of the order:
The amount for each badge option should be calculated and displayed
<tr>
<th>1</th>
<td><input type="text" id="bfname1" name="firstname1"></td>
<td><input type="text" id="bsname1" name="surname1"></td>
<td><input type="text" id="borank1" name="officerrank1"></td>
<td ><label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" id="badge" onchange="updatePrice(this)">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly id="price">
</td>
</tr>
<tr>
<th>2</th>
<td><input type="text" id="bfname2" name="firstname2"></td>
<td><input type="text" id="bsname2" name="surname2"></td>
<td><input type="text" id="borank2" name="officerrank2"></td>
<td ><label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" id="badge" onchange="updatePrice(this)">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly id="price">
</td>
</tr>
<tr>
<th>3</th>
<td><input type="text" id="bfname3" name="firstname3"></td>
<td><input type="text" id="bsname3" name="surname3"></td>
<td><input type="text" id="borank3" name="officerrank3"></td>
<td ><label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" id="badge" onchange="updatePrice(this)">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly id="price">
</td>
</tr>
<tr>
<th>4</th>
<td><input type="text" id="bfname4" name="firstname4"></td>
<td><input type="text" id="bsname4" name="surname4"></td>
<td><input type="text" id="borank4" name="officerrank4"></td>
<td ><label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" id="badge" onchange="updatePrice(this)">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly id="price">
</td>
</tr>
<tr>
<th>5</th>
<td><input type="text" id="bfname5" name="firstname5"></td>
<td><input type="text" id="bsname5" name="surname5"></td>
<td><input type="text" id="borank5" name="officerrank5"></td>
<td ><label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" id="badge" onchange="updatePrice(this)">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly id="price">
</td>
Here is my javascript:
function updatePrice (element) {
var price = price.value;
document.getElementById('price').value = price;
}
CodePudding user response：
You have multiple error, the first one is ID must be unique, the second one you try to use price.value; but price doesn't exist you need to use element.value === selected value from select, and instead of use ID you can use nextElementSibling for input like:
function updatePrice(element) {
var price = element.value;
element.nextElementSibling.value = price;
}<table>
<tr>
<th>1</th>
<td><input type="text" id="bfname1" name="firstname1"></td>
<td><input type="text" id="bsname1" name="surname1"></td>
<td><input type="text" id="borank1" name="officerrank1"></td>
<td ><label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" onchange="updatePrice(this)">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly>
</td>
</tr>
<tr>
<th>2</th>
<td><input type="text" id="bfname2" name="firstname2"></td>
<td><input type="text" id="bsname2" name="surname2"></td>
<td><input type="text" id="borank2" name="officerrank2"></td>
<td ><label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" onchange="updatePrice(this)">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly>
</td>
</tr>
<tr>
<th>3</th>
<td><input type="text" id="bfname3" name="firstname3"></td>
<td><input type="text" id="bsname3" name="surname3"></td>
<td><input type="text" id="borank3" name="officerrank3"></td>
<td ><label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" onchange="updatePrice(this)">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly>
</td>
</tr>
<tr>
<th>4</th>
<td><input type="text" id="bfname4" name="firstname4"></td>
<td><input type="text" id="bsname4" name="surname4"></td>
<td><input type="text" id="borank4" name="officerrank4"></td>
<td ><label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" onchange="updatePrice(this)">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly id="price">
</td>
</tr>
<tr>
<th>5</th>
<td><input type="text" id="bfname5" name="firstname5"></td>
<td><input type="text" id="bsname5" name="surname5"></td>
<td><input type="text" id="borank5" name="officerrank5"></td>
<td ><label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" onchange="updatePrice(this)">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly>
</td>
</tr>
</table>Reference:
Although we should keep the focus on one problem at a time I give you a little help for the last part when the letter changes as well as changing the value you should add / change the dataset so that you can then select each dataset and calculate the total price.
CodePudding user response：
As Simone said in their answer, you need IDs to be unique, So you could use the code like below
<table>
<tr>
<th>1</th>
<td>
<input type="text" id="bfname1" name="firstname1">
</td>
<td>
<input type="text" id="bsname1" name="surname1">
</td>
<td>
<input type="text" id="borank1" name="officerrank1">
</td>
<td >
<label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" id="badge1">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly id="price1">
</td>
</tr>
<tr>
<th>2</th>
<td>
<input type="text" id="bfname2" name="firstname2">
</td>
<td>
<input type="text" id="bsname2" name="surname2">
</td>
<td>
<input type="text" id="borank2" name="officerrank2">
</td>
<td >
<label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" id="badge2">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly id="price2">
</td>
</tr>
<tr>
<th>3</th>
<td>
<input type="text" id="bfname3" name="firstname3">
</td>
<td>
<input type="text" id="bsname3" name="surname3">
</td>
<td>
<input type="text" id="borank3" name="officerrank3">
</td>
<td >
<label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" id="badge3">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly id="price3">
</td>
</tr>
<tr>
<th>4</th>
<td>
<input type="text" id="bfname4" name="firstname4">
</td>
<td>
<input type="text" id="bsname4" name="surname4">
</td>
<td>
<input type="text" id="borank4" name="officerrank4">
</td>
<td >
<label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" id="badge4">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly id="price4">
</td>
</tr>
<tr>
<th>5</th>
<td>
<input type="text" id="bfname5" name="firstname5">
</td>
<td>
<input type="text" id="bsname5" name="surname5">
</td>
<td>
<input type="text" id="borank5" name="officerrank5">
</td>
<td >
<label for="badge3">Choose a Badge Type (A, B, or C)</label>
<select name="badge" id="badge5">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly id="price5">
</td>
</table>
<script>
function updatePrice(priceId) {
return e => document.getElementById(priceId).value = e.target.value;
}
Object.entries({
"badge1": "price1",
"badge2": "price2",
"badge3": "price3",
"badge4": "price4",
"badge5": "price5",
}).map(([badgeId, priceId]) => {
console.log(badgeId, priceId)
document.getElementById(badgeId).addEventListener('change', updatePrice(priceId))
});
</script>
I've just changed each ID to a unique ID, and added the event listener in your code instead, and change the updatePrice function a little, so it's almost the same as your original code.
But when you have all these select inputs that are essentially the same, you shouldn't really be using IDs at all, and it would be better to use classes instead of IDs like this:
<table>
<tr>
<th>1</th>
<td>
<input type="text" id="bfname1" name="firstname1">
</td>
<td>
<input type="text" id="bsname1" name="surname1">
</td>
<td>
<input type="text" id="borank1" name="officerrank1">
</td>
<td >
<label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" >
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly >
</td>
</tr>
<tr>
<th>2</th>
<td>
<input type="text" id="bfname2" name="firstname2">
</td>
<td>
<input type="text" id="bsname2" name="surname2">
</td>
<td>
<input type="text" id="borank2" name="officerrank2">
</td>
<td >
<label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" >
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly >
</td>
</tr>
<tr>
<th>3</th>
<td>
<input type="text" id="bfname3" name="firstname3">
</td>
<td>
<input type="text" id="bsname3" name="surname3">
</td>
<td>
<input type="text" id="borank3" name="officerrank3">
</td>
<td >
<label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" >
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly >
</td>
</tr>
<tr>
<th>4</th>
<td>
<input type="text" id="bfname4" name="firstname4">
</td>
<td>
<input type="text" id="bsname4" name="surname4">
</td>
<td>
<input type="text" id="borank4" name="officerrank4">
</td>
<td >
<label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" >
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly >
</td>
</tr>
<tr>
<th>5</th>
<td>
<input type="text" id="bfname5" name="firstname5">
</td>
<td>
<input type="text" id="bsname5" name="surname5">
</td>
<td>
<input type="text" id="borank5" name="officerrank5">
</td>
<td >
<label for="badge3">Choose a Badge Type (A, B, or C)</label>
<select name="badge" >
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly >
</td>
</table>
<script>
function updatePrice(event) {
event.target.nextElementSibling.value = event.target.value;
}
[...document.getElementsByClassName('badge')]
.forEach(badge => badge.addEventListener('change', updatePrice));
</script>