Question

大家好，所以我正在努力完成一项小任务，帮助用户选择正确的滑雪场大小，所以他们会进入那里的年龄和身高以及他们会得到什么样的滑雪，所以自由式或经典的它会计算滑雪板的长度。现在，当他们进入时，我想出了如何用年龄和身高做到这一点。所以我过去了：

1 - 4年：体长+ 0 cm。

5-8岁：体长+ 10 cm

9-12岁：体长+ 15厘米等

那部分工作正常。但我现在要做的是当用户选择经典时，它会在最终尺寸上增加10厘米，当他们选择自由泳时，它会额外增加20厘米。但是这部分我不确定如何完成并需要帮助。

HTML：

<form name="sizeForm">
Age: <input type="text" name="age" size="10"><br />
Height: <input type="text" name="height" size="10"><br />
                 <select name="typeski" class="select" id="name" autocomplete="off" placeholder="Type of ski" >
        <option value="" disabled selected hidden>Please Select Type Of Skis. . . . . . .</option>
        <option value="0">Classic</option>
        <option value="1">Freestyle</option>
                </select>
<input type="button" value="Calculate Size" onClick="finalsize()"><br />
Your Ski Size: <input type="text" name="ski" size="10"><br />
<input type="reset" value="Reset" />
</form>

JS：

function finalsize() {
  var age = parseInt(document.sizeForm.age.value)
  var height = parseInt(document.sizeForm.height.value)
  var typeski = parseInt(document.sizeForm.typeski.value)
  if (age > 0 && height > 0) {   
    var size = height;
    if (age > 1 && age <= 4) size += 0;
    else if (age >= 5 && age <= 8) size += 10;
    else if (age >= 9 && age <= 12) size += 15;
    document.sizeForm.ski.value = size;
  }
  else {
    alert("Please Fill in everything correctly")
  }
}

希望在修复此问题后，我会尝试将其变成vue.js应用程序，因为它似乎更好等但是现在试图解决这个问题

再次感谢

Answer 1

最简单的方法是让类型选项的value等于您要为该类型添加的金额。

然后直接将控件的value添加到大小上。或者，您可以使用查找表，但这更简单。

在下面的例子中，我使用+10代表Classic，+ 20代表Freestyle，因为你的问题说两个都是+10，这似乎是一个错字：）

function finalsize() {
  var age = parseInt(document.sizeForm.age.value)
  var height = parseInt(document.sizeForm.height.value)
  var typeski = parseInt(document.sizeForm.typeski.value)
  if (age > 0 && height > 0) {   
    var size = height;
    if (age > 1 && age <= 4) size += 0;
    else if (age >= 5 && age <= 8) size += 10;
    else if (age >= 9 && age <= 12) size += 15;
    
    size += typeski
    document.sizeForm.ski.value = size;
  }
  else {
    alert("Please Fill in everything correctly")
  }
}

<form name="sizeForm">
Age: <input type="text" name="age" size="10"><br />
Height: <input type="text" name="height" size="10"><br />
                 <select name="typeski" class="select" id="name" autocomplete="off" placeholder="Type of ski" >
        <option value="0" disabled selected hidden>Please Select Type Of Skis. . . . . . .</option>
        <option value="10">Classic</option>
        <option value="20">Freestyle</option>
                </select>
<input type="button" value="Calculate Size" onClick="finalsize()"><br />
Your Ski Size: <input type="text" name="ski" size="10"><br />
<input type="reset" value="Reset" />
</form>

Answer 2

您应该阅读选择了哪个选项：

var sel = document.skiForm.typeski;
 var t= sel.options[sel.selectedIndex].text;

现在你应该比较这些值并添加额外的cm：

if(skitype == "Classic") size += ....;
if(skitype == "Freestyle") size += ....;

Answer 3

只需使用typeski变量并执行if else或switch语句：

switch (typeski)
{
   case 0: //classic
      size += 10;
   break;
   case 1: //freestyle
       size += 10; //You said 10cm in your post. Change it if you need to.
   break;
}

这是一个工作小提琴：https://jsfiddle.net/vs2fu9qq/3/

JavaScript从下拉框中添加元素

3 个答案: