通过“ id”而不是“ value”属性为表单输入分配值

Question

This is my current situation:

 document.body.addEventListener('click', calculateTotal); const calculator = document.querySelector("form"); function cake() { const cakes = Array.from(calculator.elements["cake"]).slice(0, 3); const raphael = calculator.elements["raphael"]; function isChecked(checkbox) { return checkbox.checked; } var count = cakes.filter(isChecked).length; if (count) { count = count * 0.5 + 0.5; } if (raphael.checked) { count += 1; } return count; } function occasion() { const occasionOptions = { birthday: 25, anniversary: 50, wedding: 100 } var occasionCost = 0; const occasion = calculator.elements["occasion"]; for (var i = 0; i < occasion.length; i++) { if (occasion[i].checked) { occasionCost = occasionOptions[occasion[i].value]; break; } } return occasionCost; } function calculateTotal() { var totalCost = cake() * occasion(); calculator.total.value = "$" + totalCost.toLocaleString("en"); } 

 <form> <fieldset> <legend>Select Cakes</legend> <label><input type="checkbox" name="cake" id="leonardo" required>Leonardo</label> <label><input type="checkbox" name="cake" id="donatello">Donatello</label> <label><input type="checkbox" name="cake" id="michelangelo">Michelangelo</label> <label><input type="checkbox" name="cake" id="raphael">Raphael</label> <p>If you select more than one cake, the other cakes are discounted 50%.</p> <p><small>Does not apply to Raphael.</small></p> </fieldset> <fieldset> <legend>Choose Occasion</legend> <label><input type="radio" name="occasion" value="birthday">Birthday</label> <label><input type="radio" name="occasion" value="anniversary">Anniversary</label> <label><input type="radio" name="occasion" value="wedding">Wedding</label> </fieldset> <input type="text" name="total"> </form> 

In the example above, I would like to switch value to id attribute on input radio . If I for example replace value="birthday" to id="birthday" , the values are no longer assigned to input .

What am I missing? Any help would be greatly appreciated.

(Code snippet updated to include both id and value in fieldsets.)

Answer 1

You can use HTMLElement.id to get the id of an element.

 document.body.addEventListener('click', calculateTotal); const calculator = document.querySelector("form"); function occasion() { const occasionOptions = { birthday: 2.5, anniversary: 5, wedding: 10 } var occasionCost = 0; const occasion = calculator.elements["occasion"]; for (var i = 0; i < occasion.length; i++) { if (occasion[i].checked) { occasionCost = occasionOptions[occasion[i].id]; break; } } return occasionCost; } function calculateTotal() { var totalCost = 100 * occasion(); calculator.total.value = "$" + totalCost.toLocaleString("en"); } 

 <form> <fieldset> <legend>Choose Occasion</legend> <label><input type="radio" name="occasion" id="birthday">Birthday</label> <label><input type="radio" name="occasion" id="anniversary">Anniversary</label> <label><input type="radio" name="occasion" id="wedding">Wedding</label> </fieldset> <input type="text" name="total"> </form> 

Answer 2

i do not know the rationale for using id property over value, but if that is what you want to do, all you need to do is to update your js to read id property instead of value property.

https://codepen.io/anon/pen/XBvYoL

HTML:

<form>
<fieldset>
<legend>Choose Occasion</legend>
<label><input type="radio" name="occasion" id="birthday">Birthday</label>
<label><input type="radio" name="occasion" id="anniversary">Anniversary</label>
<label><input type="radio" name="occasion" id="wedding">Wedding</label>
</fieldset>

<input type="text" name="total">
</form>

JS:

document.body.addEventListener('click', calculateTotal);

const calculator = document.querySelector("form");

function occasion() {
 const occasionOptions = {
  birthday: 2.5,
  anniversary: 5,
  wedding: 10
 }

 var occasionCost = 0;
 const occasion = calculator.elements["occasion"];

 for (var i = 0; i < occasion.length; i++) {
  if (occasion[i].checked) {
   occasionCost = occasionOptions[occasion[i].id];
   break;
  }
 }
 return occasionCost;
}

function calculateTotal() {
 var totalCost = 100 * occasion();
 calculator.total.value = "$" + totalCost.toLocaleString("en");
}