从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

你需要改变一些事情。您需要获取所选选项的value而不是对象，并且您需要获取权重而不是元素的值。

var object = document.getElementsByName('object'); - 这将获得所有选项，而不仅仅是所选选项。您可以遍历结果以查看哪个是checked，但您可以直接查询所选内容，类似于：document.querySelector('input[name="object"]:checked');

var weight = document.getElementsByName('weight'); - 这也会得到一个集合，但由于你在元素上有一个标识符，你可以直接查询它的值，类似于：document.getElementById('kilo').value;

除此之外，其余的都没问题，除了你试图将object分配回文本输出元素，这个元素现在是正确的值。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

你有一个输入类型的文字，所以最好使用id而不是name 不要试图让你的代码变得复杂

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

删除表单标签而不是提交按钮使用简单的按钮，您应该开展业务。尝试：

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