javascript - 从 HTML 获取输入并返回结果

Question

我正在尝试制作一个应用程序来计算您在其他天体上的重量。该函数在使用 weightConverter(object, Weight); 调用时执行其应有的操作。

但我似乎无法从 HTML 表单获取输入。

如何从 HTML 中获取输入？
另外，有没有更好的方法将结果返回到 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>

Answer 1

您需要迭代 document.getElementsByName('object') 来获取所选值，并迭代 document.getElementsByName('weight')[0].value 来获取输入字段中的值。

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>