Calculate with Javascript / HTML-Dropdowns.

huangapple go评论82阅读模式
英文:

Calculate with Javascript / HTML-Dropdowns

问题

Sure, here's the translated content you requested:

我有一个订单的价格存储在一个PHP变量中,假设是$price。这个$price是每日$rate * $rental_days的总和。接下来的步骤中,可以通过HTML中的三个下拉菜单添加一些额外选项。第一个和第二个是每个订单的,第三个是每天的。

<select id="extras_1">
    <option>10欧元/订单</option>
    <option>20欧元/订单</option>
</select>

<select id="extras_2">
    <option>20欧元/订单</option>
    <option>30欧元/订单</option>
</select>

<select id="extras_3">
    <option>10欧元/天</option>
    <option>20欧元/天</option>
</select>

我想使用JavaScript将额外选项的价格添加到基本费率中,以便用户可以直接看到最终价格。(最终价格在最后一步中使用PHP计算,所以不用担心安全性问题。)

我是JavaScript的新手。也许有人愿意帮助我吗?谢谢!

英文:

I have the price of an order in an PHP variable, let's say $price. This $price is the sum of a daily $rate * $rental_days. In the next step some extras could be added with three dropdowns in HTML. The first and the second are per order, the third per day.

&lt;select id=&quot;extras_1&quot;&gt;
 &lt;option&gt;10 Euros/Order&lt;/option&gt;
 &lt;option&gt;20 Euros/Order&lt;/option&gt;
&lt;/select&gt;
&lt;select id=&quot;extras_2&quot;&gt;
 &lt;option&gt;20 Euros/Order&lt;/option&gt;
 &lt;option&gt;30 Euros/Order&lt;/option&gt;
&lt;/select&gt;
&lt;select id=&quot;extras_3&quot;&gt;
 &lt;option&gt;10 Euros/Day&lt;/option&gt;
 &lt;option&gt;20 Euros/Day&lt;/option&gt;
&lt;/select&gt;

I would like to add the price of the extras to the basic rate with Javascript, so that the user can see the final price directly. (The final price is calculated with PHP in the last step, so no worries about security.)

I am a total Jacascript newbie. Maybe someone wants to help me? Thank you!

答案1

得分: 1

Sure, here is the translated content:

function calcuate() {
  var sum = 0;
  var element1 = document.getElementById("extras_1");
  sum += Number(element1.value);
  var element2 = document.getElementById("extras_2");
  sum += Number(element2.value);
  var element3 = document.getElementById("extras_3");
  sum += Number(element3.value);
  console.log(sum);
}
<select id="extras_1">
  <option value="10">10欧元/订单</option>
  <option value="20">20欧元/订单</option>
</select>
<select id="extras_2">
  <option value="10">20欧元/订单</option>
  <option value="20">30欧元/订单</option>
</select>
<select id="extras_3">
  <option value="10">10欧元/天</option>
  <option value="20">20欧元/天</option>
</select>
<button onclick="calcuate()">计算</button>

Please note that I have translated the code while keeping the original IDs and function names intact.

英文:

I too am learning javascript, the code below gets the selected options, extracts number part of the option.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function calcuate() {
  
var sum = 0;
var element1 = document.getElementById(&quot;extras_1&quot;);
sum += Number(element1.value);
var element2 = document.getElementById(&quot;extras_2&quot;);
sum += Number(element2.value);
var element3 = document.getElementById(&quot;extras_3&quot;);
sum += Number(element3.value);
console.log(sum);
}

<!-- language: lang-html -->

&lt;select id=&quot;extras_1&quot;&gt;
 &lt;option value=&quot;10&quot;&gt;10 Euros/Order&lt;/option&gt;
 &lt;option value=&quot;20&quot;&gt;20 Euros/Order&lt;/option&gt;
&lt;/select&gt;
&lt;select id=&quot;extras_2&quot;&gt;
 &lt;option value=&quot;10&quot;&gt;20 Euros/Order&lt;/option&gt;
 &lt;option value=&quot;20&quot;&gt;30 Euros/Order&lt;/option&gt;
&lt;/select&gt;
&lt;select id=&quot;extras_3&quot;&gt;
 &lt;option value=&quot;10&quot;&gt;10 Euros/Day&lt;/option&gt;
 &lt;option value=&quot;20&quot;&gt;20 Euros/Day&lt;/option&gt;
&lt;/select&gt;
&lt;button onclick=&quot;calcuate()&quot;&gt;calcuate&lt;/button&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2020年1月4日 00:36:37
  • 转载请务必保留本文链接:https://go.coder-hub.com/59582120.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定