Get input from HTML and return result

Question

I'm trying to make an app that calculates your weight on other celestial objects. The function does what it should when called with weightConverter(object, weight);.

But I can't seem to get the input from a HTML form.

How can I get the input from the HTML?
Also, is there a better way to getting the result back to the HTML?

function weightConverter(){
  
      var object = document.getElementsByName('object');
      var weight = document.getElementsByName('weight');
  
      var objects = {
        Sun: 28,
        Mercury: 0.38,
        Venus: 0.91,
        Moon: 0.166,
        Mars: 0.38,
        Jupiter: 2.14,
        Saturn: 0.91,
        Uranus: 0.86,
        Neptune: 1.1,
        Pluto: 0.8
       }
  
       var result = weight*objects[object];
  
       document.getElementById("calc").innerHTML= object;
    }

    <h2 id="calc">....</h2>

    <form>
      <p> Input weight in kilograms: </p>
      <input id="kilo" type="text" name="weight">

      <p>Choose object:</p>
      <label><input name="object"type="radio" value="Sun">Sun</label>
      <label><input name="object"type="radio" value="Mercury">Mercury</label>
      <label><input name="object"type="radio" value="Venus">Venus</label>
      <label><input name="object"type="radio" value="Moon">Moon</label> 
      <label><input name="object"type="radio" value="Mars">Mars</label>     
      <label><input name="object"type="radio" value="Jupiter">Jupiter</label> 
      <label><input name="object"type="radio" value="Saturn">Saturn</label> 
      <label><input name="object"type="radio" value="Uranus">Uranus</label> 
      <label><input name="object"type="radio" value="Neptune">Neptune</label> 
      <label><input name="object"type="radio" value="Pluto">Pluto</label> 
      


      <button onclick="weightConverter();" type="submit">Calculate!</button>
    </form>

use a dropdown instead and make sure to give your element's "id" as well. also, learn HTML — zerohero
– zerohero, Commented Dec 13, 2017 at 11:39
@zerohero Dropdown would certainly make more sense aesthetically and would be more user friendly. The weight input element has an identifier and the others don't need one. The radio buttons represent a group no need for an id on each of them, name works just fine and is all you need to get an array posted correctly in a POST also document.querySelector('input[name="object"]:checked') works fine. - Generally I only add identifiers as well as other attributes if really needed not for the sake of it. — Nope
– Nope, Commented Dec 13, 2017 at 11:52
Okay cool, so throw HTML standards out the window then. That's fine I guess — zerohero
– zerohero, Commented Dec 15, 2017 at 13:30

Kiran Shahi · Accepted Answer · 2017-12-13 11:39:49Z

You need to iterate document.getElementsByName('object') to get the selected value and document.getElementsByName('weight')[0].value to get the value from input field.

function weightConverter(){
  
      var object = document.getElementsByName('object');
      var weight = document.getElementsByName('weight')[0].value;
     var selectedObject = "";
  for(var i = 0; i < object.length; i++){
    if(object[i].checked){
        selectedObject = object[i].value;
    }
  }
  
      
      var objects = {
        Sun: 28,
        Mercury: 0.38,
        Venus: 0.91,
        Moon: 0.166,
        Mars: 0.38,
        Jupiter: 2.14,
        Saturn: 0.91,
        Uranus: 0.86,
        Neptune: 1.1,
        Pluto: 0.8
       }
  
       var result = weight*objects[selectedObject];
  
       document.getElementById("calc").innerHTML= result;
    }

<h2 id="calc">....</h2>

      <p> Input weight in kilograms: </p>
      <input id="kilo" type="text" name="weight">

      <p>Choose object:</p>
      <label><input name="object"type="radio" value="Sun">Sun</label>
      <label><input name="object"type="radio" value="Mercury">Mercury</label>
      <label><input name="object"type="radio" value="Venus">Venus</label>
      <label><input name="object"type="radio" value="Moon">Moon</label> 
      <label><input name="object"type="radio" value="Mars">Mars</label>     
      <label><input name="object"type="radio" value="Jupiter">Jupiter</label> 
      <label><input name="object"type="radio" value="Saturn">Saturn</label> 
      <label><input name="object"type="radio" value="Uranus">Uranus</label> 
      <label><input name="object"type="radio" value="Neptune">Neptune</label> 
      <label><input name="object"type="radio" value="Pluto">Pluto</label> 
      


      <button onclick="weightConverter();" >Calculate!</button>

Nope · Accepted Answer · 2017-12-13 11:45:49Z

There is a few things you have to change. You need to get the value of the selected option not the object and you need to get the value for the weight not the element.

var object = document.getElementsByName('object'); - This gets all options not just the selected option. You could loop through the results to see which one is checked but you could directly query for the selected, similar to this: document.querySelector('input[name="object"]:checked');

var weight = document.getElementsByName('weight'); - This will get a collection as well but as you have an identifier on the element you can directly query for it an it's value, similar to: document.getElementById('kilo').value;

Other than that the rest was OK, except you tried to assign an object back to the text out put element which is now the proper value.

function weightConverter(){      
      var selectedObjectValue = document.querySelector('input[name="object"]:checked').value;
      var weight = document.getElementById('kilo').value;
  
      var objects = {
        Sun: 28,
        Mercury: 0.38,
        Venus: 0.91,
        Moon: 0.166,
        Mars: 0.38,
        Jupiter: 2.14,
        Saturn: 0.91,
        Uranus: 0.86,
        Neptune: 1.1,
        Pluto: 0.8
       }
  
       var result = weight*objects[selectedObjectValue];
  
       document.getElementById("calc").innerHTML= result;
    }

<h2 id="calc">....</h2>

    <form>
      <p> Input weight in kilograms: </p>
      <input id="kilo" type="text" name="weight">

      <p>Choose object:</p>
      <label><input name="object"type="radio" value="Sun" checked>Sun</label>
      <label><input name="object"type="radio" value="Mercury">Mercury</label>
      <label><input name="object"type="radio" value="Venus">Venus</label>
      <label><input name="object"type="radio" value="Moon">Moon</label> 
      <label><input name="object"type="radio" value="Mars">Mars</label>     
      <label><input name="object"type="radio" value="Jupiter">Jupiter</label> 
      <label><input name="object"type="radio" value="Saturn">Saturn</label> 
      <label><input name="object"type="radio" value="Uranus">Uranus</label> 
      <label><input name="object"type="radio" value="Neptune">Neptune</label> 
      <label><input name="object"type="radio" value="Pluto">Pluto</label> 
      


      <button onclick="weightConverter();" type="button">Calculate!</button>
    </form>

F.Kahalaj · Accepted Answer · 2017-12-13 12:13:12Z

you have one input type text so it's better to use id instead of name don't try make your code complicated

<html>
    <head>
        <script>
       function weightConverter(){
  
      var radios = document.getElementsByName('object');
 
for (var i = 0, length = radios.length; i < length; i++) {
    if (radios[i].checked) {
        var object=radios[i].value;
        break;
    }
}
      var weight = document.getElementById('kilo').value;
  
      var objects = {
        Sun: 28,
        Mercury: 0.38,
        Venus: 0.91,
        Moon: 0.166,
        Mars: 0.38,
        Jupiter: 2.14,
        Saturn: 0.91,
        Uranus: 0.86,
        Neptune: 1.1,
        Pluto: 0.8
       };
  
       var result = weight*objects[object];
       
  
       document.getElementById("calc").innerHTML= result;
    }
    </script>
    </head>
    <body>
     <h2 id="calc">....</h2>

    
      <p> Input weight in kilograms: </p>
      <input id="kilo" type="text" name="weight">

      <p>Choose object:</p>
      <label><input name="object"type="radio" value="Sun">Sun</label>
      <label><input name="object"type="radio" value="Mercury">Mercury</label>
      <label><input name="object"type="radio" value="Venus">Venus</label>
      <label><input name="object"type="radio" value="Moon">Moon</label> 
      <label><input name="object"type="radio" value="Mars">Mars</label>     
      <label><input name="object"type="radio" value="Jupiter">Jupiter</label> 
      <label><input name="object"type="radio" value="Saturn">Saturn</label> 
      <label><input name="object"type="radio" value="Uranus">Uranus</label> 
      <label><input name="object"type="radio" value="Neptune">Neptune</label> 
      <label><input name="object"type="radio" value="Pluto">Pluto</label> 
      


      <button onclick="weightConverter();">Calculate!</button>
     
    </body>
</html>

Blesson Christy · Accepted Answer · 2017-12-13 11:26:16Z

-1

Remove form tags and instead of submit button use a simple button and you should be in business. Try:

<h2 id="calc">....</h2>


  <p> Input weight in kilograms: </p>
  <input id="kilo" type="text" name="weight">

  <p>Choose object:</p>
  <label><input name="object"type="radio" value="Sun">Sun</label>
  <label><input name="object"type="radio" value="Mercury">Mercury</label>
  <label><input name="object"type="radio" value="Venus">Venus</label>
  <label><input name="object"type="radio" value="Moon">Moon</label> 
  <label><input name="object"type="radio" value="Mars">Mars</label>     
  <label><input name="object"type="radio" value="Jupiter">Jupiter</label> 
  <label><input name="object"type="radio" value="Saturn">Saturn</label> 
  <label><input name="object"type="radio" value="Uranus">Uranus</label> 
  <label><input name="object"type="radio" value="Neptune">Neptune</label> 
  <label><input name="object"type="radio" value="Pluto">Pluto</label> 



  <button onclick="weightConverter();" >Calculate!</button>

answered Dec 13, 2017 at 11:26

Blesson Christy

3903 silver badges13 bronze badges

1 Comment

Blesson Christy Over a year ago

Oops Sorry!! Good catch there!!

Collectives™ on Stack Overflow

Get input from HTML and return result

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related