Hi everyone, I'm pretty new to Javascript and I guess I'm pretty nooby at it so I have a problem with some Javascript I'm trying to write. Basically I'm creating some Javascript that will allow me to calculate someone's Body Mass Index (BMI) and so far with my code have absolutely no idea what's wrong with it. If you guys could lead me in the right direction it would be much appreciated :cheesy:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head><title>BMI Calculator</title>

 <script type="javascript">
 <!-- Hide script from non-script-friendly browsers
  function BMI Calculator(bmi)
  {
    var bmi = w / (h*h);
    return bmi;
  }
 //stop hiding the script-->
 </script>
</head>

<body>
<script type="javascript">
    <!-- Hide script from non-script-friendly browsers
    var n;
    var a;
    var h;
    var w;
    var bmi;
    n = prompt("What is your age? ","");
    if (n <= 17)
    {
    document.write("We are unable to calculate your BMI");
    }
    else if(age => 18)
    {
    h = prompt("What is your height in metres?","");
    w = prompt("What is your weight in kilograms?","");
    bmi = w / (h*h);

    if (bmi <= 19)
    { 
    message = "Underweight"; 
    }
    else if (bmi >= 20 && bmi <= 25)
    { 
    message = "Acceptable"; 
    }
    else if (bmi >= 26 && <=30)
    { 
    message = "Overweight"; 
    }
    else if (bmi >= 31)
    { 
    message = "Obese"; 
    }
    else
    { 
    message = "Error!"; 
    }

    content = ("<html><head><title>Your BMI</title></head><body><h1>BODY MASS INDEX (BMI) CALCULATOR</h1>
    <p>Your height= " + h + "<br>Your weight= " + w + <br>Your BMI= " + bmi + "</p>
    <p><h2>what your BMI Indicates</h2><br>" + message + ";

    document.write(content);
    }
    // stop hiding the script-->
</script>
</body>
</html>

Dani AI

Generated

Lots of the errors in the posted snippets are simple syntax and structural problems rather than a mysterious browser bug. Key points already raised by others: fixed small typos, correctly pointed out the broken nested HTML caused by writing a whole page from script, and warned about document.write in XHTML — those directions are the right track.

Primary fixes (check each one):

  • Use a valid script type and valid function names. type="text/javascript" and function names must be a single identifier (no spaces).
  • Replace the incorrect => seen in the code with the comparison operator >=.
  • Prompt returns strings. Convert with parseInt/parseFloat or Number() and test with isNaN() before doing arithmetic.
  • Do not use switch for numeric ranges. Range tests need if / else if / else or a small helper that maps a numeric BMI to a category.
  • Avoid document.write() to produce a whole new HTML document (that creates nested <html><head><body> problems). Use a dedicated result element (for example a <div id="result">) and set innerHTML or textContent.
  • If using an external file, save it as .js and put only JS code in it (no XML prolog or HTML). Include it from the HTML with a normal script include.

A minimal include pattern (put this near the end of the body so DOM elements exist):

<script src="bmi.js" type="text/javascript"></script>

Quick troubleshooting checklist: open the browser console (F12) and read the first error (syntax errors prevent prompts from appearing), add a console.log() near the top of the script to confirm the file loads, and check server content-type (if served as application/xhtml+xml, document.write and some behaviors differ). Following the checklist above resolves the common issues seen in the thread.

Recommended Answers

All 6 Replies

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head><title>BMI Calculator</title>

 <script type="[COLOR="Red"][B]text/[/B][/COLOR]javascript">
 <!-- Hide script from non-script-friendly browsers
  function BMI Calculator(bmi)
  {
    var bmi = w / (h*h);
    return bmi;
  }
 //stop hiding the script-->
 </script>
</head>

<body>
<script type="[COLOR="red"][B]text/[/B][/COLOR]javascript">
    <!-- Hide script from non-script-friendly browsers
    var n;
    var a;
    var h;
    var w;
    var bmi;
    n = prompt("What is your age? ","");
    if (n <= 17)
    {
    document.write("We are unable to calculate your BMI");
    }
    else if([COLOR="red"][B]n[/B][/COLOR] => 18)
    {
    h = prompt("What is your height in metres?","");
    w = prompt("What is your weight in kilograms?","");
    bmi = w / (h*h);

    if (bmi <= 19)
    { 
    message = "Underweight"; 
    }
    else if (bmi >= 20 && bmi <= 25)
    { 
    message = "Acceptable"; 
    }
    else if (bmi >= 26 && [COLOR="red"][B]bmi[/B][/COLOR] <=30)
    { 
    message = "Overweight"; 
    }
    else if (bmi >= 31)
    { 
    message = "Obese"; 
    }
    else
    { 
    message = "Error!"; 
    }

    content = ("<html><head><title>Your BMI</title></head><body><h1>BODY MASS INDEX (BMI) CALCULATOR</h1>
    <p>Your height= " + h + "<br>Your weight= " + w + [COLOR="red"][B]"[/B][/COLOR]<br>Your BMI= " + bmi + "</p>
    <p><h2>what your BMI Indicates</h2><br>" + message + "</p>"[COLOR="red"][B])[/B][/COLOR];

    document.write(content);
    }
    // stop hiding the script-->
</script>
</body>
</html>

it had simple mistakes , after i correct it , it works with me and my bmi was acceptable :cheesy:

Your scripts go in the head, not the body.

Hey guys, i followed your suggestions but it still doesnt work for me. I don't get any prompts or anything. I've done the right thing and saved it as haven't I? or should i save it as something else? thanks for the help so far.

What i have so far:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head><title>BMI Calculator</title>

<script type="text/javascript">
<!-- Hide script from non-script-friendly browsers
function BMI Calculator(bmi)
{
var bmi = w / (h*h);
return bmi;
}
//stop hiding the script-->
</script>

<script type="text/javascript">
<!-- Hide script from non-script-friendly browsers
var n;
var a;
var h;
var w;
var bmi;
n = prompt("What is your age? ","");
if (n <= 17)
{
document.write("We are unable to calculate your BMI");
}
else if(n => 18)
{
h = prompt("What is your height in metres?","");
w = prompt("What is your weight in kilograms?","");
bmi = w / (h*h);

if (bmi <= 19)
{ 
message = "Underweight"; 
}
else if (bmi >= 20 && bmi <= 25)
{ 
message = "Acceptable"; 
}
else if (bmi >= 26 && bmi <=30)
{ 
message = "Overweight"; 
}
else if (bmi >= 31)
{ 
message = "Obese"; 
}
else
{ 
message = "Error!"; 
}
}
// stop hiding the script-->
</script>
</head>

<body>

comment= ("<html><head><title>Your BMI</title></head><body><h1>BODY MASS INDEX (BMI) CALCULATOR</h1>
<p>Your height= " + h + "<br>Your weight= " + w + "<br>Your BMI= " + bmi + "</p>
<p><h2>what your BMI Indicates</h2><br>" + message + "</p>");

document.write (comment);
</body>
</html>

it's permissable to write <script> in the body section; be aware that the script will run at weird times though ( as the script element is parsed ). the only way the script you have got WILL work is if part of that script runs as the body is parsed; because you use document.write( ); which is parse/position dependant ( i.e. you NEED the script to run as the script element within the body is parsed )

be aware; document.write( ) doesn't work in browsers like Firefox - when they goes into 'true' XML parsing mode. That XHTML DOCTYPE might send Firefox into XML mode... in which case; Firefox will do unpredictable things with document.write ( i.e. nothing ):

I would say you'll be alright; since I doubt you're sending your XHTML page with the application/xhtml+xml content type header - but regardless! document.write( ) isn't 'permitted' in XHTML:

http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite

try the code that manal posted; but stick a nice HTML4.0 transitional Doctype on top; instead of that XHTML1.0 strict one

Thanks for the tips Matt, however I'm restricted to using only XHTML so I don't really have a choice. I wrote up another script but when i click on calculate it does nothing and just shows theres an error on the page. Could anyone help please?

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head><title>BMI Calculator</title>

<script type="text/javascript">
<!-- Hide script from non-script-friendly browsers
function BMI_Calculator()
{
	n = prompt('What is your age?',"");

	if (n <= 17)
	   { document.write("We are unable to calculate your BMI"); }
	else if(n => 18)
	   { h = prompt('What is your height in metres?',"");
	     w = prompt('What is your weight in kilograms?',"");
	     bmi = Math.round(w / (h*h));

	     switch(bmi)
		{
			case bmi <= 19: 
				message = "Underweight";
				break;
			case bmi >= 20 && bmi <= 25:
				message = "Acceptable";
				break;
			case bmi >= 26 && bmi <=30:
				message = "Overweight";
				break;
			case bmi >= 31:
				message = "Obese";
				break;
			default: message = "Error!";
				break;
		}

	comment = "<html><head><title>Your BMI</title></head><body>" + 
		   "<h1>BODY MASS INDEX (BMI) CALCULATOR</h1><p>Your height = " + 
		   h + "<br>Your weight = " + w + "<br>Your BMI = " + bmi + "</p><p>" + 
		   "<h2>what your BMI Indicates</h2><br>" + message + "</p>";

	document.write (comment);

}
// stop hiding the script-->
</script>
</head>

<body>

<a href="javascript: BMI_Calculator()">Calculate</a>

</body>
</html>

You have 2 scripts, 1 in the head and 1 in the body, but the 1 in the body is writing a new html, head, body etc. tags... so you have a broken html page for the browser when you are done....

In effect you have this structure
html
head
script
/script
/head
body
script
html
head
body
/script
/body
/html

If that doesn't make people go "hun?" as well as your browser, especially when it is set to "strict" I don't know what will....

Computers are the smartest thing in the world... they do only and exactly what we tell them, nothing more, nothing less. They show us our own mistakes in bright vibrant colors and sometimes publish them for the world to see. ALL errors are user errors, computers don't make mistakes, people do.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.