What am I missing? Once clicking on the button it says "your measurement is nan"

Question

1.00/5 (1 vote)

See more:

HTML

<!DOCTYPE html>

   
      <meta charset="utf-8">
      <title> Currency Converter
      
         body { background-image: url("alien.png");}
         #converter { position: absolute; width: 300px; height: 200px; z-index: 15; top: 45%; left: 700px; margin: -100px 0 0 -150px;}
         #header { width:404px; border:5px solid black; border-radius:5px 5px 0px 0px; background-color: black; font-family: Courier; font-size: 150%; color: white;}
         #main_content { width:404px; border:5px solid black; border-radius:0px 0px 5px 5px; background-color: black; color: white; font-family: Courier;}
      
      
         function lengthConverter(valNum) {
         
         var length;
         
         length = document.getElementById('selLength').value;
         
         if (length=='cm') {
         valNum = valNum*2.54;
         }
         
         if (length=='ft') {
         valNum = valNum*0.0833;
         }
		 
         if (length=='yd') {
         valNum = valNum*0.02778;
         }
         
         valNum = valNum.toFixed(2);
         
         var resultsString = "<h2> Your measurement is "+ valNum +" </h2>";
         document.getElementById('results').innerHTML = resultsString;
         }
      
   
   
      <div id="converter">
         <div id="header"> Currency Converter</div> <!--End of header section -->
         <div id="main_content">
            
               <p>Please enter length in inches<br>
                  in.
               </p>
               <p>
                  Convert into<br>
                  
                     
                      Centimeters
                      Feet
                      Yards
                  
               </p>
               
            
            <div id="results"></div>
            <!-- End of results section-->
         </div>
         <!-- End of main content section-->
      </div>
      <!-- End of converter div section-->

What I have tried:

Please help, this is suppose to be review for me at my new university but I never learned it at my previous school.

Posted 12-Sep-18 8:45am

Member 13982327

Updated 12-Sep-18 9:58am

Patrice T

v2

Add a Solution

Comments

ZurdoDev 12-Sep-18 15:32pm

It means your code is not working. NAN stands for Not a Number. Just debug your code and step through it line by line and you'll see exactly what is happening.

MadMyche 12-Sep-18 15:35pm

Please note javascript is case-sensitive; "nan" means nothing, and "NaN" means "Not a Number"
To figure out where your actual error is; ou will need to present the HTML code for the [inputs] on the form.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

littleGreenDude · Answer 1 · 2018-09-12T09:58:00

To quote Griff... We do not do your homework: it is set for a reason. It is there so that you think about what you have been told, and try to understand it. It is also there so that your tutor can identify areas where you are weak, and focus more attention on remedial action.

However, it looks like you have taken a stab at it. What is missing are controls to allow the input / selection of the data and a button or something to fire the function to perform the calculation. Not knowing the exact requirements, here is a solution in its most basic form (without any styling).

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
function lengthConverter(valNum) {

var length;

length = document.getElementById('selLength').value;

if (length=='cm') {
valNum = valNum*2.54;
}

if (length=='ft') {
valNum = valNum*0.0833;
}

if (length=='yd') {
valNum = valNum*0.02778;
}

valNum = valNum.toFixed(2);

var resultsString = "<h2> Your measurement is "+ valNum +" </h2>";
document.getElementById('results').innerHTML = resultsString;
}
	
</script>

<html>
<body>
 
  Value: <input type="text" id="valueToConvert" size="8" >inches<br/>
<input type="button" value="Convert To" onclick="var val=document.getElementById('valueToConvert').value;lengthConverter(val)">
   <select id="selLength">
  <option value="cm">Centimeter</option>
  <option value="ft">Foot</option>
  <option value="yd">Yard</option>
</select>
<div id="results">
</div>

</body>
</html>

Good luck to you in your course, and happy coding. Since you are new to CP, please accept solution / vote up if it works for you.