运行一个依赖复选框的函数

Question

我正在尝试编写一个对某些复选框做出反应的计算器。根据勾选的框，份量将乘以下面 table 中的不同值。例如，在ThickChiaYogurt table中，一致性选择'Thick'，选择'Chia'复选框，选择'Yogurt'复选框。

我遇到的问题是我似乎无法让它对这些值做任何事情。

选择框代码如下所示：

<p>
<label style="font-family: arial" for="textfield">Serving Size (ml):</label>
<input type="text" name="textfield" id="ServingSize"> <?p>
<table width="250">
 <tr>
<td><label style="font-family: arial">
  <input type="checkbox" name="Settings" value="ChiaUsed" id="Chia">
  Use Chia Seeds?</label></td>
 </tr>
 <tr>
  <td><label style="font-family: arial">
    <input type="checkbox" name="Settings_" value="YogurtUsed" id="Yogurt">
     Use Yogurt?</label></td>
  </tr>
 <tr>
  <td><label style="font-family: arial">
      <input type="checkbox" name="Settings_" value="ProteinUsed" id="Protein">
  Use Protein / Choc powder?</label></td>
 </tr>
<p style="font-family: arial"> Consistency: <select><option>Thick</option>
 <option>Medium</option>
   <option>Runny</option></select> </p>

以及我将使用的信息：

var ThickChiaYogurt = [0.1, 0.38, 0.036, 0.43]
  var MediumChiaYogurt = [0.1, 0.42, 0.036, 0.39]
  var RunnyChiaYogurt= [0.08, 0.46, 0.036, 0.35]

  // var NO CHIA = [ OATS, MILK, GREEK ]
  var ThickYogurt = [0.15, 0.38, 0.45]
  var MediumYogurt = [0.1, 0.42, 0.41]
  var RunnyYogurt = [0.08, 0.46, 0.37]

  // var NO GREEK = [ OATS, MILK, CHIA ]
  var ThickChia = [0.23, 0.58, 0.036]
  var MediumChia = [0.18, 0.61, 0.36 ]
  var RunnyChia = [0.16, 0.64, 0.03 ]

  // var NO GREEK OR CHIA = [ OATS, MILK ]
  var Thick = [0.25, 0.6]
  var Medium = [0.22, 0.63]
  var Runny = [0.2, 0.65]

var Serving = 111
// OATS MILK GREEK CHIA POWDERS
var Output = [0, 0, 0, 0, 0]

function myFunction(Thick, Serving) {
return Thick[0] * Serving;              }

我是不是傻了？这是我在 JavaScript 的第一天，所以我觉得我的头有点撞墙了。

我希望它能在用户写下他们想要的份量并勾选相关方框后告诉他们应该使用每种成分的多少。

谢谢！

Answer 1

您需要像这样为每个输入框添加一个 onclick 事件处理程序。

<input type="checkbox" name="Settings" onclick="myFunction(this)" value="ChiaUsed" id="Chia">

然后在你的 myFunction 函数中，

function myFunction(element){
  //use element object here
}

您将收到元素数据。您可以通过点符号或括号符号

访问 "value" 等属性

var value = element.value;

运行一个依赖复选框的函数

Running a function depending on check boxes

html

javascript

checkbox

运行 一个依赖复选框的函数

Running a function depending on check boxes

html

javascript

checkbox

运行一个依赖复选框的函数