Question

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

Answer 1

您的两个变量都命名为numInput：

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

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

Answer 2

我在您的代码中发现了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;
}

Answer 3

您的代码已更正，自定义且完美运行！

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>

我的JavaScript代码中缺少什么？

3 个答案: