duanlin1931
2016-08-10 20:54
浏览 936
已采纳

HTML / JS：计算和显示价格

I am trying to calculate the price by having different quantities, conditions, etc. I found a good snippet of code here:

http://jsfiddle.net/Wm6zC/

Still, I am searching for a way to have a label, paragraph or a different similar tag, which will update the price, instead using input="text" method. Something like:

<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>

And by selecting a quantity, the price gets updated right away. Any idea how to achieve this?

图片转代码服务由CSDN问答提供 功能建议

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

http://jsfiddle.net/Wm6zC/

仍然，我正在寻找一种方法来获得标签，段落或不同的类似标签，这将更新价格，而不是使用 input =“text”方法 。 类似于： 

 ＆lt; FORM Name =“myform”＆gt; 
＆lt; LABEL＆gt;数量：＆lt; / LABEL＆gt; 
＆lt; SELECT NAME =“Item”  onChange =“calculatePrice（）”id =“Item”＆gt; 
＆lt; OPTION value =“1”＆gt; 1＆lt; / OPTION＆gt; 
＆lt; OPTION value =“2”＆gt; 2＆lt; / OPTION＆gt; 
  ＆lt; OPTION value =“3”＆gt; 3＆lt; / OPTION＆gt; 
＆lt; OPTION value =“4”＆gt; 4＆lt; / OPTION＆gt; 
＆lt; OPTION value =“5”＆gt; 5＆lt; / OPTION＆gt; \  n＆lt; OPTION value =“6”＆gt; 6＆lt; / OPTION＆gt; 
＆lt; OPTION value =“7”＆gt; 7＆lt; / OPTION＆gt; 
＆lt; OPTION value =“8”＆gt; 8＆lt; / OPTION＆gt;  
＆lt; / SELECT＆gt; 
＆lt; / FORM＆gt; 
 
＆lt; p＆gt; 总费用：22.9＆lt; / P＆gt; 
   
 
 
通过选择数量，价格会立即更新。 知道如何实现这个目标吗？
  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • duanpei8518 2016-08-10 21:00
    已采纳

    If you add an ID to the <p> tag you should be able to access it from javascript on the select's onChange event.

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

    EDIT: As was mentioned in the comments for those who are new to javascript who don't know the difference between .value, .innerHTML, and .innerText here's a quick description of them.

    .value - is a property on input elements that contain the value of the user's input.

    .innerHTML - is a property on layout elements that contains the HTML encoded string of everything between it's opening and closing tag. (yes this means that you can get the string "<LABEL>Quantity:</LABEL><SELECT NAME=\"Item\" onChange=\"calculatePrice()\" id=\"Item\" onChange=\"calculateOnChange\">...</SELECT>" if you were to call it on the form)

    .innerText - is a property like innerHTML but it is not encoded with HTML, it's encoded as plain text. This property is discouraged as it isn't a W3C standard.

    For better descriptions about these properties and other text properties with HTML elements, see @faraz's answer to this question: Difference between innerText and innerHTML in javascript.

    评论
    解决 无用
    打赏 举报

报告相同问题？

提交

相关推荐 更多相似问题