JavaScript adding on elements from a dropdown box

Question

Hi guys so i am trying to complete a small task of helping the user pick the right ski size, So they would enter there age and height and what kind of ski's they would get, so freestyle or classic and it would calculate the length of the skis. Now i figured out how to do it with age and height when they enter it. So i went by :

1-4 years: body length + 0 cm.

5-8 years: body length + 10 cm

9-12 years: body length + 15 cm etc etc

That part works fine. But what i am trying to do now is when the user picks classic it adds an extra 10cm on to the final size and when they pick freestyle it adds on an extra 20cm . However this part i am not to sure how to accomplish and need help on.

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")
  }
}

Hopefully after this has been fixed i will try and make this into a vue.js app , as it seems to be better etc but for now trying to solve this

Thanks again

Duncan Thacker · Accepted Answer · 2017-09-23 22:00:30Z

1

The easiest way to do this is just to make the value of the type options equal to the amount that you want to add on for that type.

Then just add the value of the control directly onto the size. Alternatively you could use a lookup table, but this is simpler.

In the example below I used +10 for Classic and +20 for Freestyle because your question said +10 for both, which seemed like a typo :)

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>

answered Sep 23, 2017 at 22:00

Duncan Thacker

5,1891 gold badge12 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RonTheOld Over a year ago

thank you so much , that has helped a lot and ye was a big typo haha :) thanks again, i will try this now and then hopefully rebuild in vue xxx

wcramblitt · Accepted Answer · 2017-09-23 22:10:09Z

0

Just use the typeski variable and do an if else or a switch statement:

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

Here is a working fiddle: https://jsfiddle.net/vs2fu9qq/3/

answered Sep 23, 2017 at 22:10

wcramblitt

12 bronze badges

1 Comment

Duncan Thacker Over a year ago

This will work. I would usually recommend using a lookup object: size += TYPE_SIZE_LOOKUP[ typeski ] instead of switch.

vladatr · Accepted Answer · 2017-09-23 22:10:29Z

0

You should read which option is selected:

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

And now you shoud compare the values and add extra cm:

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

edited Sep 23, 2017 at 22:10

answered Sep 23, 2017 at 22:01

vladatr

6266 silver badges15 bronze badges

2 Comments

Duncan Thacker Over a year ago

This doesn't quite work because skitype will be "0" or "1" as those are the value attributes on the <option> elements used.

vladatr Over a year ago

@Duncan Thacker You are right. I changed it to read text property.

Collectives™ on Stack Overflow

JavaScript adding on elements from a dropdown box

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related