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

Question

这是我目前的情况：

 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> 

在上面的示例中，我想在input radio上将value切换为id属性。 例如，如果我将value="birthday"替换为id="birthday" ，则这些值将不再分配给input 。

我想念什么？ 任何帮助将不胜感激。

（代码段已更新为在value集中包含id和value 。）

Answer 1

您可以使用HTMLElement.id来获取元素的id 。

 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

我不知道使用id属性代替值的理由，但是如果那是您想要做的，那么您要做的就是更新您的js以读取id属性而不是value属性。

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");
}