Question

我试图通过不同的数量，条件等来计算价格。我在这里找到了一个很好的代码片段：

尽管如此，我正在寻找一种方法来获得标签，段落或不同的类似标签，这将更新价格，而不是使用input="text"方法。类似的东西：

<FORM Name="myform">
  <LABEL>Quantity:</LABEL>
  <SELECT NAME="Item" onChange="calculatePrice()" id="Item">
    <OPTION value="1">1</OPTION>
    <OPTION value="2">2</OPTION>
    <OPTION value="3">3</OPTION>
    <OPTION value="4">4</OPTION>
    <OPTION value="5">5</OPTION>
    <OPTION value="6">6</OPTION>
    <OPTION value="7">7</OPTION>
    <OPTION value="8">8</OPTION>
  </SELECT>
</FORM>

<p> Total Cost: 22.9 </P>

通过选择数量，价格立即得到更新。知道如何实现这个目标吗？

Answer 1

如果您在<p>标记中添加了ID，则应该可以通过select onChange事件的javascript访问该标记。

<FORM Name="myform">
    <LABEL>Quantity:</LABEL>
    <SELECT NAME="Item" onChange="calculatePrice()" id="Item" onChange="calculateOnChange">
        <OPTION value="1">1</OPTION>
        <OPTION value="2">2</OPTION>
        <OPTION value="3">3</OPTION>
        <OPTION value="4">4</OPTION>
        <OPTION value="5">5</OPTION>
        <OPTION value="6">6</OPTION>
        <OPTION value="7">7</OPTION>
        <OPTION value="8">8</OPTION>
    </SELECT>
</FORM>

<p id="total"> Total Cost: 22.9 </P>

使用Javascript：

function calculateOnChange() {
    var cost = 0;
    // logic adding the values together: i.e. item.value * itemqty.value
    document.getElementById("total").innerHTML = "Total Cost: " + cost;
}

编辑：正如评论中提到的那些不熟悉javascript且不知道.value，.innerHTML和.innerText之间差异的人的评论，这里有对它们的快速描述

.value - 是输入元素的属性，包含用户输入的值。

.innerHTML - 是布局元素上的一个属性，它包含HTML开头和结束标记之间所有内容的HTML编码字符串。（是的，这意味着如果你要在表格上调用它，你可以得到字符串"<LABEL>Quantity:</LABEL><SELECT NAME=\"Item\" onChange=\"calculatePrice()\" id=\"Item\" onChange=\"calculateOnChange\">...</SELECT>"

.innerText - 是innerHTML之类的属性，但它不是用HTML编码的，而是编码为纯文本。不鼓励使用此属性，因为它不是W3C标准。

有关使用HTML元素的这些属性和其他文本属性的更好描述，请参阅@ faraz对此问题的回答：Difference between innerText and innerHTML in javascript。

HTML / JS：计算和显示价格

1 个答案: