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.

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题