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>

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

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

（代码段已更新为在字段集中同时包含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");
}

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

2 个答案: