CODEWITHSUNDEEP
javascripthtml
T. Ou
T. Ou

Reputation: 91

How do i make a sort of calculator using html and javascript?

I am a beginner programmer and I want to make this work but it doesn't. Could you Please help me and explain what's wrong? For example, if I enter under 20, I want it to tell me how long it will take me to walk to whatever planet I selected. Most of it is figuring out how to have the code store whatever option the user selects and then apply it to the age and use the data to calculate it. Thank you!

<legend>basic info</legend>
    <p> What is your destination?
        <select onchange = "selectDestination(this.value)">
        <option value="mercury">Mercury</option>
        <option value="venus">Venus</option>
        <option value="mars">Mars</option>
        <option value="jupiter">Jupiter</option>
        <option value="saturn">Saturn</option>
        <option value="uranus">Uranus</option>
        <option value="neptune">Neptune</option>
        <option value="pluto">Pluto</option>
        </select>
        <script type="text/javascript">
          var planets = new Array();
         planets['mercury'] = 48000000;
         planets['venus']=25000000
         planets['mars']=25000000
         planets['jupiter']=33900000
         planets['saturn']=365000000
         planets['uranus']=1200000000
         planets['neptune']=2600000000
         planets['pluto']=2800000000

         function selectDestination(selectedValue) {
         window.alert(selectedValue + " distance=" + planets[selectedValue]);
        }          
        </script>
    </p>
    <p>
    <label>how old are you?</label> 
     <form id="form" onsubmit="return false;">
      <input type="number" id="userInput">
      <input type="submit"    onclick="age()">
     </form>
    <script type="text/javascript">
      function age()
      {
        var input = document.getElementById("userInput");
        alert(input);
      }
      if(age<20);
      {
      alert("YOU ARE UNDER 20");
      var runSpeed=6.3;
      var walkSpeed=2.1
      var water = 1.5;
      var calories = 2500;
      var runTime = planets[selectedValue]/runSpeed;
      var runDays = runTime/24
      document.write("it will take "+runTime+" hours and "+runDays+" days to make it to"+selectedValue);
      }
      if(21<age>45) {
      alert("YOU ARE AT YOUR PHYSICAL PEAK");
      var runSpeed=8.3;
      var walkSpeed=3.1;
      var water = 2;
      var calories = 3000;
      var runTime = planets[selectedValue]/runSpeed;
      var runDays = runTime/24;
      document.write("it will take "+runTime"hours and"+runDays+"days to make it to"+selectedValue);
      }
      if(age<45){
        alert("YOU ARE PROBABLY TOO OLD TO TAKE THIS TRIP");
        var runSpeed=5.3;
        var walkSpeed=1.1;
        var water=1.5;
        var calories=3000;
        var runTime = planets[selectedValue]/runSpeed;
        var rundays = planets[selectedValue]/24;
        document.write("it will take "+runTime"hours and"+runDays+"days to make it to"+selectedValue);
      }
    </script>
    </p>

Upvotes: 1

Views: 90

Answers (1)

Christopher Messer
Christopher Messer

Reputation: 2090

This code here doesn't work.

      var planets = new Array();
     planets['mercury'] = 48000000;
     planets['venus']=25000000
     planets['mars']=25000000
     planets['jupiter']=33900000
     planets['saturn']=365000000
     planets['uranus']=1200000000
     planets['neptune']=2600000000
     planets['pluto']=2800000000

What you're declaring is an Array, and what you want to push into them is objects.

What you ideally want planets to look like is var planets = [ {planet: 'mercury', distance: 48000000}, {planet: 'venus', distance: 25000000 }, ... ]

Right now, nothing is happening because your syntax is looking for an object with a key of mercury or venus and not finding anything.

The next thing you should do is be able to console.log() whatever the user inputs as an age. Make sure your function age() accepts a parameter, so it might look more like age(val)

Once you're console.log() logs the age input by the user, you should be pretty close. All you have to do after that is grab the planet the user selected, and you can do that by looping through your planets array and matching what the user selected with what is in the array. Something like planets.filter(planet => planet.indexOf(planetUserSelected) !== -1) will give you back the object you're looking for, and you can console.log() that value and go from there.

Upvotes: 3

Related Questions