Javascript Help

@codingtheweb098Jan 05.2009

I seem to be having a problem with some code I’ve written, and I can’t seem to figure it out. I’m trying to make an online study tool for a friend of mine, but it’s not running correctly. Any help would be truly appreciated. Here’s the code:

<html>
<head>
<title>
Practice Page
</title>

function checkAnswer(kAnswer, cAnswer){
if (kAnswer == cAnswer){
alert(“Woohoo! Yay! Go Kyara!!!”);
} else {
alert(“Look at it again!”);
}
}

function clearAll(){
document.response.answer.value = “”;
}

function generate(max,op){

var num1;
var num2;
var num3;
var total;
var ans;
var ph;

ph = max/2;

num1 = Math.floor(Math.random()*max)-ph;
num2 = Math.floor(Math.random()*max)-ph;
num3 = Math.floor(Math.random()*max)-ph;

document.write(“<div class=’problemBubble’>”);

if(op == a){
total = num1 + num2 + num3;
document.write(num1 + ” + ” + num2 + ” + ” + num3 + ” = “);
} else if(op == s){
total = num1 – num2 – num3;
document.write(num1 + ” – ” + num2 + ” – ” + num3 + ” = “);
} else if(y == m){
total = num1 * num2 * num3;
document.write(num1 + ” x ” + num2 + ” x ” + num3 + ” = “);
} else if(y == d){
total = num1/num2;
document.write(num1 + ” / ” + num2 + ” = “);
}

document.write(“</div>”);

}

function displayProblem(){

clearAll();

var op;
var max;
var ph2;

ph2 = Math.floor(Math.random()*4);

if(ph2 == 0){
op = a;
max = 100;
} else if(ph2 == 1){
op = s;
max = 100;
} else if(ph2 == 2){
op = m;
max = 10;
} else if(ph2 == 3){
op = d;
max = 10;
}

generate(max,op);

}

</script>

</head>

<h1>Study Page</h1>
<hr width=”100%” color=”hotpink”>

</body>
</html>

to post a comment

JavaScript

8 Comments(s) _↴

@MrNobodyJan 05.2009 — #You know this part generates an error message every single time, right?

[CODE]function clearAll(){
 document.response.answer.value = "";
 }[/CODE]

That looks like you're trying to clear a form field, but you have no form in your page.

Also, these lines all cause errors, too -- because the variables on the right of the equal sign are not defined.

[CODE]		op = a;
 
   op = s;
 
   op = m;
 
   op = d;[/CODE]

@codingtheweb098authorJan 05.2009 — #Okay. I fixed those. I'm getting an error now on the displayProblem() onLoad function. Here's the new code:

<html>

<head>

<title>

Practice Page

</title>

<script type="text/javascript">

function checkAnswer(kAnswer, cAnswer){

if (kAnswer == cAnswer){

alert("Woohoo! Yay! Go Kyara!!!");

} else {

alert("Look at it again!");

}

}

function generate(max,op){

var num1;

var num2;

var num3;

var total;

var ans;

var ph;

ph = max/2;

num1 = Math.floor(Math.random()*max)-ph;

num2 = Math.floor(Math.random()*max)-ph;

num3 = Math.floor(Math.random()*max)-ph;

document.write("<div class='problemBubble'>");

if(op == "a"){

total = num1 + num2 + num3;

document.write(num1 + " + " + num2 + " + " + num3 + " = ");

} else if(op == "s"){

total = num1 - num2 - num3;

document.write(num1 + " - " + num2 + " - " + num3 + " = ");

} else if(y == "m"){

total = num1 * num2 * num3;

document.write(num1 + " x " + num2 + " x " + num3 + " = ");

} else if(y == "d"){

total = num1/num2;

document.write(num1 + " / " + num2 + " = ");

}

document.write("<br><a class='checkAnswer' href="">Check Answer</a></div>");

}

function displayProblem(){

var op;

var max;

var ph2;

ph2 = Math.floor(Math.random()*4);

if(ph2 == 0){

op = "a";

max = 100;

} else if(ph2 == 1){

op = "s";

max = 100;

} else if(ph2 == 2){

op = "m";

max = 10;

} else if(ph2 == 3){

op = "d";

max = 10;

}

generate(max,op);

}

</script>

<style>

div.problemBubble{background-image:url('images/pinkbubble.jpg'); width:500px; height:200px; position:absolute; left:100px; top:400px;}

a.checkAnswer{width:50px;height:20px;background-color: hotpink;}

</style>

</head>

<body bgcolor="white" text="hotpink" onLoad="displayProblem();">

<h1>Study Page</h1>

<hr width="100%" color="hotpink">

</body>

</html>

@NedalsJan 06.2009 — #There are many problems with your code. (First post)

-Variable vs literal

op = a; //this tries to assign a variable, op, to a variable, a

What you want is..

op = 'a'; // this assign the literal 'a' to the variable op

-if condition

if(op == a) {... // similar to the above

Should be..

if (op == 'a') {...

-Read though your code carefully

} else if(y == m){

This is not what you want

Should be..

} else if(op == 'm'){

-document.write(...)

Only use document.write(..) in-line (unless you know exactly what you are doing. Better yet, don't use it)

use innerHTML instead. (Hint: hard-code your <div class="problemBubble"></div> in the body section)

The way you have your current code, the document.write will overwite whatever is on the page.

Try to recode this again and post back for more help.

@codingtheweb098authorJan 06.2009 — #Thanks for the help. The reason I coded the <div> the way I did, is because I wasn't sure exactly how to change the content inside the div using javascript. Can someone point me in the right direction?

@MrNobodyJan 06.2009 — #Try this out:

[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Language" content="en-us">
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <title>Practice Page</title>
 <style type="text/css">
 <!--
 #problemBubble {
 background-image: url('images/pinkbubble.jpg');
 position: absolute;
 left: 40px;
 top: 100px
 width: 300px;
 height: 100px;
 text-align: center;
 vertical-align: middle;
 }
 a.checkAnswer {
 background-color: hotpink;
 width: 50px;
 height: 20px;
 }
 -->
 </style>
 <script type="text/javascript">
 <!-- //
 function checkAnswer(kAnswer, cAnswer){
 if (kAnswer == cAnswer){
 alert("Woohoo! Yay! Go Kyara!!!");
 } else {
 alert("Look at it again!");
 }
 }
 function displayProblem(){
 var op, max, ph2 = Math.floor(Math.random()*4);
 
  if(ph2 == 0){
   op = "a";
   max = 100;
  } else if(ph2 == 1){
   op = "s";
   max = 100;
  } else if(ph2 == 2){
   op = "m";
   max = 10;
  } else if(ph2 == 3){
   op = "d";
   max = 10;
  }
 
  generate(max,op);
 }
 function generate(max,op){
 var total, ph = max/2;
 var num1 = Math.floor(Math.random()*max)-ph;
 var num2 = Math.floor(Math.random()*max)-ph;
 var num3 = Math.floor(Math.random()*max)-ph;
 
  var obj = document.getElementById("problemBubble");
 
  if(op == "a"){
   total = num1 + num2 + num3;
   obj.innerHTML = num1 + " + " + num2 + " + " + num3 + " = ";
  } else if(op == "s"){
   total = num1 - num2 - num3;
   obj.innerHTML = num1 + " - " + num2 + " - " + num3 + " = ";
  } else if(op == "m"){
   total = num1 * num2 * num3;
   obj.innerHTML = num1 + " x " + num2 + " x " + num3 + " = ";
  } else if(op == "d"){
   total = num1/num2;
   obj.innerHTML = num1 + " / " + num2 + " = ";
  }
 }
 // -->
 </script>
 </head>
 
 <body bgcolor="white" text="hotpink" onload="displayProblem();return true;">
 
 <h1>Study Page</h1>
 <hr width="100%" color="hotpink">
 
 <div id="problemBubble"></div>
 
 </body>
 </html>[/code]

@codingtheweb098authorJan 06.2009 — #Thanks a lot for your help. Not just on this particular project, but because you helped me learn some concepts I wasn't familiar with.

@felgallJan 06.2009 — #You might also consider getting rid of the  around the script as the only purpose that serves is to convert the script to a comment if you use some content management systems or switch to using XHTML instead of HTML. It used to be needed for hiding the script from people using Netscape 1 and IE2 but people stopped using those browsers over 10 years ago.

@MrNobodyJan 06.2009 — #No problem.

Also in #JavaScript _↴

Iphone navigation javascript - sql query?does it make sense to use text in canvas?Need help asap

Success!

Help @codingtheweb098 spread the word by sharing this article on Twitter...

Tweet This

Javascript Help

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Javascript Help

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴