堆栈内存溢出
  简体   繁体   English

我的JavaScript代码中缺少什么？

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

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

问题描述

I'm new to JavaScript and I'm having issues trying to create a drop down list unit converter. 我是JavaScript的新手，我在尝试创建下拉列表单元转换器时遇到问题。 The project calls for the code to convert miles to feet, Celsius to Fahrenheit and pounds to grams. 该项目要求代码将里程转换为英尺，将摄氏温度转换为华氏温度，将磅转换为克数。 The issue is when I enter the values the output is way off. 问题是当我输入值时输出是关闭的。

No matter what number I enter or unit I select I get the same result of 14514.944, instead of the appropriate (5280 feet, 33.8°, 453.592g, etc.). 无论我输入什么号码或我选择的单位，我得到的结果与14514.944相同，而不是相应的（5280英尺，33.8°，453.592g等）。 If I double click the submit button I get 62573043513.9154, triple click 269748534086686000, etc. 如果我双击提交按钮我得到62573043513.9154，三次点击269748534086686000等。

I know I'm missing something in the convert_unit function, but I'm not sure what. 我知道我在convert_unit函数中遗漏了一些东西，但我不确定是什么。 I've tried adding and removing various code and nothing is working. 我尝试添加和删除各种代码，但没有任何工作。 

 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

Both of your variables are named numInput : 这两个变量都命名为numInput ： 

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

I'm guessing your second one should be numOutput . 我猜你的第二个应该是numOutput 。 Also, there's no need to redefine these variables in JS unless you want to make it explicitly known what they are. 此外，除非您想明确知道它们是什么，否则无需在JS中重新定义这些变量。 HTML elements with IDs are already available in the global scope based on their ID name (with some caveats). 具有ID的HTML元素已根据其ID名称在全局范围内提供（有一些警告）。 In this case you could simply use numInput and numOutput throughout your program and it would still work even without these two lines. 在这种情况下，您可以在整个程序中使用numInput和numOutput ，即使没有这两行也可以使用它。

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

i found 2 problems in your code. 我在你的代码中发现了2个问题。

The first is that in line 4 of the script, you overwrite the input of variable "numInput" with "numOutput" element. 第一个是在脚本的第4行中，用“numOutput”元素覆盖变量“numInput”的输入。 (Rename to 'numOutput') （重命名为'numOutput'）

The second problem is that, when script is loaded on page, the elements is not yet instanced. 第二个问题是，当在页面上加载脚本时，元素尚未实例化。 To solve that you can put the import tag right before </body> or add variables definition inside the function. 要解决此问题，您可以将导入标记放在</body>之前，或者在函数内添加变量定义。

PS: Don't forget to use semicolons after every statement; PS：不要忘记在每个陈述后使用分号;

Jah Bless =) Jah Bless =）

index.html 的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 的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

Your code corrected, customized and working perfectly! 您的代码已得到纠正，定制并完美运行！ 

 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 - What am I missing in my code? Javascript and XML 我的 Eloquent Javascript，棋盘代码中缺少什么？ - What am I missing in my Eloquent Javascript, Chessboard code? 我的 JavaScript 代码中是否遗漏了一些我可能会忽略的内容？ - Am I missing something in my JavaScript code that I may be overlooking? 为什么这个javascript代码没有输出？ 我错过了什么？ - Why is there no output with this javascript code? What am I missing? 我的第三个 JavaScript function 缺少什么？ - What am I missing in my third JavaScript function? 我在HTML中缺少什么才能使JavaScript工作？ - What am I missing in my html to make the javascript work? 为什么我的代码不过滤数组？我缺少什么？ - why my code is not filtering the array?what am i missing? 我的第一个旋转横幅的代码中缺少什么？ - What am I missing in this code for my first rotating banner? 我在我的js代码中缺少的东西我正在丢失）错误 - What i am missing in my js code i am getting missing ) error 我的代码做错了什么？ Javascript，分页 - What am I doing wrong in my code? Javascript, pagination
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM