What am I missing in my JavaScript code?

Question

I'm new to JavaScript and I’m having issues trying to create a drop down list unit converter. 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.). If I double click the submit button I get 62573043513.9154, triple click 269748534086686000, etc.

I know I’m missing something in the convert_unit function, but I’m not sure what. 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>

Look the corretions and customizations stackoverflow.com/a/50595512/5626568 — ℛɑƒæĿᴿᴹᴿ
– ℛɑƒæĿᴿᴹᴿ, Commented May 30, 2018 at 2:27

skyline3000 · Accepted Answer · 2018-05-30 01:10:28Z

2

Both of your variables are named numInput:

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

I'm guessing your second one should be numOutput. Also, there's no need to redefine these variables in JS unless you want to make it explicitly known what they are. HTML elements with IDs are already available in the global scope based on their ID name (with some caveats). In this case you could simply use numInput and numOutput throughout your program and it would still work even without these two lines.

answered May 30, 2018 at 1:10

skyline3000

7,9212 gold badges26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JBarretto1 Over a year ago

I hadn't noticed I made those mistakes. I corrected them and it has made an improvement. I'm no longer getting those long numbers as my "answer" and my button is working better, but unfortunately now I'm only getting the results for "pounds to grams" for all three now. So I still gotta figure out how to get miles/feet and Celsius/Fahrenheit to work. But thank you very much.

skyline3000 Over a year ago

They are working, but you only have one output element and are overwriting it... you either need 3 separate output elements or you need to only do the calculation based on which units are selected.

Potenciano · Accepted Answer · 2018-05-30 01:28:57Z

i found 2 problems in your code.

The first is that in line 4 of the script, you overwrite the input of variable "numInput" with "numOutput" element. (Rename to '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.

PS: Don't forget to use semicolons after every statement;

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

ℛɑƒæĿᴿᴹᴿ · Accepted Answer · 2018-05-30 03:08:00Z

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>

Glad to help you! Please mark my answer as correct and help me too... Thank you!
@JBarretto1 Don't forget to mark the answer as correct and help me too... Thank you!

Collectives™ on Stack Overflow

What am I missing in my JavaScript code?

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related