堆栈内存溢出
  繁体   English   中英

我的JavaScript代码中缺少什么？

[英]What am I missing in my JavaScript code?

 原文  2018-05-30 00:32:22  9   3    javascript/ html

问题描述

我是JavaScript的新手，我在尝试创建下拉列表单元转换器时遇到问题。 该项目要求代码将里程转换为英尺，将摄氏温度转换为华氏温度，将磅转换为克数。 问题是当我输入值时输出是关闭的。

无论我输入什么号码或我选择的单位，我得到的结果与14514.944相同，而不是相应的（5280英尺，33.8°，453.592g等）。 如果我双击提交按钮我得到62573043513.9154，三次点击269748534086686000等。

我知道我在convert_unit函数中遗漏了一些东西，但我不确定是什么。 我尝试添加和删除各种代码，但没有任何工作。 

 var numInput = document.getElementById("numInput"); var numInput = document.getElementById("numOutput"); var feet = document.getElementById("feet"); var fahrenheit = document.getElementById("fahrenheit"); var grams = document.getElementById("grams"); function convert_unit() { numOutput.value=(5280*numInput.value); var x = document.getElementById("feet").label; document.getElementById("enter").innerHTML = x; document.getElementById("results").innerHTML = x; numOutput.value=(1.8*numInput.value)+32 var x = document.getElementById("fahrenheit").label; document.getElementById("enter").innerHTML = x; document.getElementById("results").innerHTML = x; numOutput.value=(453.592*numInput.value) var x = document.getElementById("grams").label; document.getElementById("enter").innerHTML = x; document.getElementById("results").innerHTML = x; } 
 <form> <fieldset> <label id="enter">Numeric Value</label> <p> <input type="number" placeholder="Enter Value" name=" " value=" " id="numInput" /> </p> </fieldset> <fieldset><label>Conversion Menu</label> <p> <select id="" name="" size="3"> <option id="feet" name="Miles to Feet">Miles to Feet</option> <option id="fahrenheit" name="Celcius to Fahrenheit">Celcius to Fahrenheit</option> <option id="grams" name="Pounds to Grams">Pounds to Grams</option> </select> </p> </fieldset> <fieldset> <button type="button" id="mybutton" value=" " onClick="convert_unit()";>Convert</button> </fieldset> <fieldset><label id="results">Results</label> <p> <input type="number" placeholder="Results" name="to_unit" id="numOutput" readonly /></p> </fieldset> </form>

3 个解决方案

解决方案1
 3  2018-05-30 01:10:28

这两个变量都命名为numInput ： 

var numInput = document.getElementById("numInput");
var numInput = document.getElementById("numOutput");

我猜你的第二个应该是numOutput 。 此外，除非您想明确知道它们是什么，否则无需在JS中重新定义这些变量。 具有ID的HTML元素已根据其ID名称在全局范围内提供（有一些警告）。 在这种情况下，您可以在整个程序中使用numInput和numOutput ，即使没有这两行也可以使用它。

解决方案2
 0  2018-05-30 01:28:57

我在你的代码中发现了2个问题。

第一个是在脚本的第4行中，用“numOutput”元素覆盖变量“numInput”的输入。 （重命名为'numOutput'）

第二个问题是，当在页面上加载脚本时，元素尚未实例化。 要解决此问题，您可以将导入标记放在</body>之前，或者在函数内添加变量定义。

PS：不要忘记在每个陈述后使用分号;

Jah Bless =）

的index.html 

<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <title></title>
   <link rel="stylesheet" href="styles.css">
</head>

<body>
  <form>
    <fieldset>
        <label id="enter">Pounds to Grams</label>
        <p><input placeholder="Enter Value" name=" " value=" " id="numInput" type="number"></p>
    </fieldset>

    <fieldset>
    <label>Conversion Menu</label>
      <p>
        <select id="" name="" size="3">
                <option id="feet" name="Miles to Feet">Miles to Feet</option>
                <option id="fahrenheit" name="Celcius to Fahrenheit">Celcius to Fahrenheit</option>
                <option id="grams" name="Pounds to Grams">Pounds to Grams</option>
        </select>
      </p>
    </fieldset>

    <fieldset>
      <button type="button" id="mybutton" value=" " onclick="convert_unit()" ;="">Convert</button>
    </fieldset>

    <fieldset>
        <label id="results">Pounds to Grams</label>
        <p><input placeholder="Results" name="to_unit" id="numOutput" readonly="" type="number"></p>
    </fieldset>
  </form>
  <script src="script.js"></script>
</body>
</html>

的script.js 

function convert_unit() {
    var numInput = document.getElementById('numInput');
    var numOutput = document.getElementById('numOutput');

    var feet = document.getElementById("feet");
    var fahrenheit = document.getElementById("fahrenheit");
    var grams = document.getElementById("grams");

    numOutput.value=(5280*numInput.value);
    var x = document.getElementById("feet").label;
    document.getElementById("enter").innerHTML = x;
    document.getElementById("results").innerHTML = x;

    numOutput.value=(1.8*numInput.value)+32;
    var x = document.getElementById("fahrenheit").label;
    document.getElementById("enter").innerHTML = x;
    document.getElementById("results").innerHTML = x;

    numOutput.value=(453.592*numInput.value);
    var x = document.getElementById("grams").label;
    document.getElementById("enter").innerHTML = x;
    document.getElementById("results").innerHTML = x;
}

解决方案3
 0  2018-05-30 02:24:33

您的代码已得到纠正，定制并完美运行！ 

 var numInput = document.getElementById("numInput"); var numOutput = document.getElementById("numOutput"); var feet = document.getElementById("feet"); var fahrenheit = document.getElementById("fahrenheit"); var grams = document.getElementById("grams"); function convert_unit() { if(numInput.value === "") { if(confirm("No value inputed to convert! Consider default 1 unit?")) { numInput.value = 1; } } if(getSelectedUnitToConvert("conversion_type") == null) { if(confirm("No conversion unit selected! Consider default Miles to Feet?")) { document.getElementById("conversion_type").selectedIndex = 0; } } if(getSelectedUnitToConvert("conversion_type") == "Miles to Feet") { numOutput.value=numInput.value; numOutput2.value=(5280*numInput.value); var x = document.getElementById("feet").label; document.getElementById("result1").innerHTML = "Miles"; document.getElementById("result2").innerHTML = "Feet"; } else if(getSelectedUnitToConvert("conversion_type") == "Celcius to Fahrenheit") { numOutput.value=numInput.value; numOutput2.value=(1.8*numInput.value)+32; var x = document.getElementById("fahrenheit").label; document.getElementById("result1").innerHTML = "Celcius"; document.getElementById("result2").innerHTML = "Fahrenheit"; } else if(getSelectedUnitToConvert("conversion_type") == "Pounds to Grams") { numOutput.value=numInput.value; numOutput2.value=(453.592*numInput.value); var x = document.getElementById("grams").label; document.getElementById("result1").innerHTML = "Pounds"; document.getElementById("result2").innerHTML = "Grams"; } } function getSelectedUnitToConvert(elementId) { var elt = document.getElementById(elementId); if (elt.selectedIndex == -1) { return null; } return elt.options[elt.selectedIndex].text; } 
 div { margin: 5px; } 
 <form> <fieldset> <label id="enter">Value to Convert</label> <p><input type="number" placeholder="Enter Value" value="" id="numInput" /></p> </fieldset> <fieldset><label>Units for Conversion</label> <p><select id="conversion_type" size="3"> <option id="feet" name="Miles to Feet">Miles to Feet</option> <option id="fahrenheit" name="Celcius to Fahrenheit">Celcius to Fahrenheit</option> <option id="grams" name="Pounds to Grams">Pounds to Grams</option> </select></p> </fieldset> <fieldset> <button type="button" id="mybutton" value="" onclick="convert_unit();">Convert</button> </fieldset> <fieldset><label id="results">Conversion Result:</label> <p> <div> <input placeholder="Original Value" name="to_unit" id="numOutput" readonly /> <label id="result1"></label> </div> <div> <input placeholder="Conversion Result" name="to_unit2" id="numOutput2" readonly /> <label id="result2"></label> </div> </p> </fieldset> </form>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 我的代码中缺少什么？ Javascript和XML 我的 Eloquent Javascript，棋盘代码中缺少什么？ 我的 JavaScript 代码中是否遗漏了一些我可能会忽略的内容？ 为什么这个javascript代码没有输出？ 我错过了什么？ 我的第三个 JavaScript function 缺少什么？ 我在HTML中缺少什么才能使JavaScript工作？ 为什么我的代码不过滤数组？我缺少什么？ 我的第一个旋转横幅的代码中缺少什么？ 我在我的js代码中缺少的东西我正在丢失）错误 我的代码做错了什么？ Javascript，分页
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM