代码之家 › 专栏 › 技术社区 › Tzar

按“id”而不是按值属性为表单输入赋值

forms html javascript

2

Tzar · 技术社区 · 7 年前

这是我的现状:

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

我错过了什么?任何帮助都将不胜感激。

(代码段已更新以同时包含 身份证件 和 价值

2 回复 | 直到 7 年前

1

3

Mario 7 年前

你可以用 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>

2

1

Ji_in_coding 7 年前

我不知道使用id property over value的基本原理,但是如果这是您想要做的,那么您只需要更新js以读取id property,而不是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>

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