Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Accessing the value of a textbox. Help! :)

Status
Not open for further replies.
Aleena

Aleena

Programmer
Oct 3, 1999
27
US
Hi all :) I am new to javascript, this term being my first encounter with it. However, I am familiar with asp and fairly proficient in Java. I am currently working on my first lab in Corporate Web Programming and it is a fairly simple page to just get students acquainted with CSS.

Ok the javascript portion of the lab is just to create these three text boxes, two of which contain random numbers and the third being where the user would enter the sum of these numbers. Clicking the new button generates new random numbers in the first two boxes and clicking the check button checks to see if the provided answer is correct and generates the appropriate response on the page. The problem? Well my numbers go to the textboxes just fine and I can generate new ones all day long but when I enter a number in the third box, be it the wrong or right answer, and press click I get the following error:

Line 42: document.fl.sum is null or is not an object

I will post the entirety of my code below including the html portion. Maybe I am missing something simple here :( Any help/advice anyone could offer would be greatly appreciated. I am using IE ver 5.5 if that is any help. I am not looking for anyone to do my work here just feeling a little frustrated :( Oh and I am aware that the whole inner text thing is not the way to get the image to display but I would like to get the first part working before I tackle that :)

<html><head><title>Anna's Assignment #1</title>
<style>
Div.h1{font-family:&quot;verdana&quot;; font-weight:&quot;bold&quot;; font-size: 20pt; color: &quot;blue&quot;;
border-style: &quot;ridge&quot;; border-color: &quot;blue&quot;; text-align: Center; background-color: &quot;black&quot;}
Div.b1{font-family:&quot;verdana&quot;; font-size: 14pt; color: &quot;black&quot;; text-align:&quot;Left&quot;;
background-color: &quot;white&quot;}
#img{position: absolute; left: 400; top:140;}
#msg{position: absolute; left: 440; top:140; font-family:&quot;verdana&quot;; font-size: 16pt;
color: &quot;black&quot;}
#t1 {position: absolute; left: 20; top:95}
#t2 {position: absolute; left: 20; top:140}
#t3 {position: absolute; left: 20; top:185}
#b1 {position: absolute; left: 20; top:235}
#b2 {position: absolute; left: 70; top:235}
#tb1{position: absolute; left: 150; top:95}
#tb2{position: absolute; left: 150; top:140}
#tb3{position: absolute; left: 150; top:185}
</style>

<script language=&quot;javascript&quot;>
var sum, num1, num2, ans;

function getNum() //Generates random numbers
{
num1 = Math.round(100 * (Math.random()));
num2 = Math.round(100 * (Math.random()));
sum = num1 + num2;
document.f1.n1.value = num1;
document.f1.n2.value = num2;
}//end getNum

function check() //Checks answer
{
//ans = document.fl.sum.value;
if(sum = (document.fl.sum.value))
{
img.innerText = &quot;<img border='0' src='../green.jpg' width='29' height='31'>&quot;;
msg.innerText = &quot;Your answer is correct!&quot;;
}
else
{
img.innerText = &quot;<img border='0' src='../red.jpg' width='29' height='31'>&quot;;
msg.innerText = &quot;Your answer is incorrect&quot;;
}
}//end check
</script>

</head><body>
<div class = &quot;h1&quot;>Anna Petersen's Math Help Page</div><p>
<div class = &quot;b1&quot;><form name = &quot;f1&quot; id = &quot;f1&quot;>
<SPAN id=&quot;t1&quot;>1st Number:</SPAN><Div id=&quot;tb1&quot;><input readonly type=&quot;text&quot; name=&quot;n1&quot; size=&quot;10&quot;></Div><br>
<SPAN id=&quot;t2&quot;>2nd Number:</SPAN><Div id=&quot;tb2&quot;><input readonly type=&quot;text&quot; name=&quot;n2&quot; size=&quot;10&quot;></Div><br>
<SPAN id=&quot;t3&quot;>Sum: </SPAN><Div id=&quot;tb3&quot;><input type=&quot;text&quot; name=&quot;sum&quot; size=&quot;10&quot;></Div><br>
<SPAN id=&quot;b1&quot;><input type=&quot;button&quot; name=&quot;New&quot; value=&quot;New&quot; onClick=&quot;getNum()&quot;></span>
<SPAN id=&quot;b2&quot;><input type=&quot;button&quot; name=&quot;Check&quot; value=&quot;Check&quot; onClick=&quot;check()&quot;></span>
</form></div>
<SPAN id = &quot;img&quot;></SPAN>
<SPAN id = &quot;msg&quot;></SPAN>
</body></html>


Thank you in advance! :) This lab is due bright and early Monday morning... hehe.

Oh and a note the commented out line

//ans = document.fl.sum.value;

Was just me trying different approaches to getting the value out of the text box.
 
Sort by date Sort by votes
resized.php

There were just a couple things wrong... you're doing great! Here's the revised code (the changes I made are red):
Code: 
<html><head><title>Anna's Assignment #1</title>
<style>
Div.h1{font-family:&quot;verdana&quot;; font-weight:&quot;bold&quot;; font-size: 20pt; color: &quot;blue&quot;; 
border-style: &quot;ridge&quot;; border-color: &quot;blue&quot;; text-align: Center; background-color: 

&quot;black&quot;}
Div.b1{font-family:&quot;verdana&quot;; font-size: 14pt; color: &quot;black&quot;; text-align:&quot;Left&quot;; 
background-color: &quot;white&quot;}
#img{position: absolute; left: 400; top:140;}
#msg{position: absolute; left: 440; top:140; font-family:&quot;verdana&quot;; font-size: 16pt;
color: &quot;black&quot;}
#t1 {position: absolute; left: 20; top:95}
#t2 {position: absolute; left: 20; top:140}
#t3 {position: absolute; left: 20; top:185}
#b1 {position: absolute; left: 20; top:235}
#b2 {position: absolute; left: 70; top:235}
#tb1{position: absolute; left: 150; top:95}
#tb2{position: absolute; left: 150; top:140}
#tb3{position: absolute; left: 150; top:185}
</style>

<script language=&quot;javascript&quot;>
function getNum()
{
 var num1 = document.f1.n1.value = Math.round(100 * (Math.random()));
 var num2 = document.f1.n2.value = Math.round(100 * (Math.random()));
 document.f1.total.value = &quot;&quot;;
 var answer_text = &quot;The answer is &quot;+(num1+num2)+&quot;, try it!&quot;;
 msg.innerText = answer_text;
}

function check()
{
  var num1 = parseInt(document.f1.n1.value);
  var num2 = parseInt(document.f1.n2.value);
  var sum  = parseInt(document.f1.total.value);
  var answer_text = num1 + &quot;+&quot; + num2 + &quot;=&quot; + sum;

  if(sum==(num1+num2))
   {answer_text += &quot;\nYour answer is correct!&quot;;}
  else
   {answer_text += &quot;???\nYour answer is incorrect&quot;;}

  msg.innerText = answer_text;
}
</script>

</head><body>
<div class = &quot;h1&quot;>Anna Petersen's Math Help Page</div>
<p>
<div class = &quot;b1&quot;>
<form name = &quot;f1&quot; id = &quot;f1&quot;>
<SPAN id=&quot;t1&quot;>1st Number:</SPAN>
<Div id=&quot;tb1&quot;><input readonly type=&quot;text&quot; name=&quot;n1&quot; size=&quot;10&quot;></Div>
<br>
<SPAN id=&quot;t2&quot;>2nd Number:</SPAN>
<Div id=&quot;tb2&quot;><input readonly type=&quot;text&quot; name=&quot;n2&quot; size=&quot;10&quot;></Div>
<br>
<SPAN id=&quot;t3&quot;>Sum:       </SPAN>
<Div id=&quot;tb3&quot;><input type=&quot;text&quot; name=&quot;total&quot; size=&quot;10&quot;></Div>
<br>
<SPAN id=&quot;b1&quot;><input type=&quot;button&quot; name=&quot;New&quot; value=&quot;New&quot; onClick=&quot;getNum()&quot;></span>
<SPAN id=&quot;b2&quot;><input type=&quot;button&quot; name=&quot;Check&quot; value=&quot;Check&quot; onClick=&quot;check()&quot;></span>
</form>
</div>
<SPAN id = &quot;msg&quot;></SPAN>
</body></html>

I took out the part about the image, it didn't like me trying to write html tags into the span - perhaps you can utilize some sort of background style? -gerrygerry
Go To
 
Upvote 0 Downvote
Sorry - i meant to go back and higlight those changes for u - if you have any questions about what I did, just let me know. The big deifferences were the use of the parseInt function (which parses and int from a string) and the construction of a message to display. I also cleared the total box (i had to rename the sum box for variable continuity) when the user gets a new set of random values. -gerrygerry
Go To
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
837
malpa
malpa
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
944
xwb
xwb
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
750
coldbohemia
coldbohemia
198709km
  • Locked
  • Question
Grouping XML key value using XSLT
Replies
0
Views
742
198709km
198709km

Part and Inventory Search

Sponsor

Back
Top