带有2个下拉菜单的JavaScript单元转换器_Javascript

带有2个下拉菜单的JavaScript单元转换器

javascript

带有2个下拉菜单的JavaScript单元转换器,javascript,Javascript,我是JavaScript新手。为了实践，尝试建立一个简单的单位转换器，就像谷歌用来把千克转换成磅，英寸转换成米，等等。我想要一个输入框来输入数字值。在那之后，HTML文件中有两个列表，这样我可以在第一个列表中选择转换的单元；第二个是我转换成的单位。也许这是一个显而易见的问题，但我还没有找到这个问题的答案。我将发布我尝试的最后一个代码/方法 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> &l

我是JavaScript新手。为了实践，尝试建立一个简单的单位转换器，就像谷歌用来把千克转换成磅，英寸转换成米，等等。我想要一个输入框来输入数字值。在那之后，HTML文件中有两个列表，这样我可以在第一个列表中选择转换的单元；第二个是我转换成的单位。也许这是一个显而易见的问题，但我还没有找到这个问题的答案。我将发布我尝试的最后一个代码/方法

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="simpleweightconversortest.js"></script>
  </head>
  <body>
    <form>

      <!-- Select 1-->
      <label>From:</label>
    <select name="converts" id="Selection">
        <option>Chose Option</option>
        <option value="kilograms1">Kilograms</option>
        <option value="grams1">Grams</option>
        <option value="miligrams1">Miligrams</option>
    </select>

    <!-- Select 2-->
    <label>To:</label>
  <select name="converts2" id="Selection2">
      <option>Chose Option</option>
      <option value="kilograms2">Kilograms</option>
      <option value="grams2">Grams</option>
      <option value="miligrams2">Miligrams</option>
  </select>


<!--INPUT-->
    <br>
    <br>
    <br>Value
    <input type="number" id="value" placeholder="Insert value">

<!--RESULT -->
    <br>Conversion
    <input type="text" id="convertedOuput">

    <br>
    <br>
    <input type="Button" onclick="Conversion()"
    value="convert">
</form>

  </body>
  </html>

我的“转换”输入框中没有任何输出。

我做错了什么？（我确信几乎所有内容）请提供帮助。

文档。getElementById（'ConvertedUput'）。value=result

应该显示函数的结果。

您有一个输入错误：

var madeSelection_1=selecFrom[selectFrom.selectedIndex]。值
这应该是selectFrom
，而不是selectFrom

另外，您需要使用convertedOuput.value=result
设置输入字段的值，而不是设置其innerHTML
。（顺便说一下，convertedOutput
也拼写错误，应该是convertedOutput
，但它是一致的，所以无论如何都应该可以工作。）
最后，您将检查转换按钮单击处理程序之外的选定单位，以便在用户更改下拉列表中的选择时不会更新这些单位。将设置值
、转换输出
和进行选择1
和进行选择2
的对应行移动到转换
功能中。（说明：现在，代码在页面加载时运行一次，因此加载的值将始终是来自选择选项选项的空字符串。之后，每次单击按钮时都会运行此部分，因此值将是最新的。）
它现在可以工作了：

函数转换（）{
var val=document.getElementById（“值”）.value；
var convertedOutput=document.getElementById（“convertedOutput”）；
var selectFrom=document.getElementById（“选择”）；
var selectTo=document.getElementById（“Selection2”）；
var madeSelection_1=selectFrom[selectFrom.selectedIndex]。值；
var madeSelection_2=selectTo[selectTo.selectedIndex]。值；
if（madeSelection_1==“千克1”和&madeSelection_2==“千克2”）{
var结果=val*1；
convertedOutput.value=结果；
}
}

发件人：
选择选项
公斤
克
毫克
致：
选择选项
公斤
克
毫克





价值观

转化




对。您没有设置输入的HTML，而是更改其值。您好。非常感谢您花时间给出如此详细和清晰的解释。为了帮助初学者。我已经解决了这个问题，第二天发布后，我现在才看到答案。对不起，之前没说。我每天都越来越喜欢编码。社区似乎非常慷慨。希望有一天我能像现在一样帮助初学者。再次感谢。


    var val = document.getElementById("value").value;
    var convertedOuput =document.getElementById("convertedOuput");

    var selectFrom = document.getElementById("Selection");
    var selectTo = document.getElementById("Selection2");

    var  madeSelection_1 = selecFrom[selectFrom.selectedIndex].value;
    var  madeSelection_2 = selectTo[selectTo.selectedIndex].value;

  function Conversion() {
    if (madeSelection_1 == "kilograms1" && madeSelection_2 == "kilograms2") {
      var result = val * 1;
      document.getElementById('convertedOuput').innerHTML = result;

    }
}