No answer displays in my disabled textbox?

Page 1 of 1

13 Replies - 486 Views - Last Post: 26 January 2013 - 09:10 PM

#1 rowdy0429  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 13-September 12

No answer displays in my disabled textbox?

Posted 25 January 2013 - 07:37 PM

I get no answer generated and displayed in my disabled textbox. I am not sure what I am doing wrong. Could someone point in the right direction. Also is my conditional statement in the correct place my book tells me how to write one but doesn't show me where in the code it should be so that may be the problem.

Make a web page that does the following:

•The user enters 5 grades that they've made in a particular class. Grades entered have to be between 0 and 100
•A Javascript function will take the 5 grades, find the average, and display the following in an alert box when the user clicks a button
•If they made an A (90-100): display Excellent! You made an A in the class! Your average grade is: ___

•If they made a B (80-89): display Good Job! You made a B in the class! Your average grade is: ___

•C (70-79): display Not Bad! You made a C in the class! Your average grade is: ___

•D (65-69): display Do better next time, you made a D. Your average grade is: ___

•F(0-64): display Oh no....you made an F. Sorry you didn't pass. Your average grade is: ___



<title>Grade Average Calculator</title>

<script type='text/javascript'>
function calculateAverage() //this is the code for the calculation function
{var a = parseInt(document.getElementById('firstNumber').value);
var b = parseInt(document.getElementById('secondNumber').value);
var c = parseInt(document.getElementById('thirdNumber').value);
var d = parseInt(document.getElementById('fouthNumber').value);
var e = parseInt(document.getElementById('fifthNumber').value); //assigns variables to the five grades
var sum =5*(a+b+c+d+e);
if (sum <= 64){alert ("Oh no....you made an F. Sorry you didn't pass.  Your average grade is:")
}else if (sum <= 69){alert ("Do better next time, you made a D.  Your average grade is:")
}else if (sum <= 79){alert ("Not Bad!  You made a C in the class!  Your average grade is:")
}else if (sum <= 89){alert ("Good Job!  You made a B in the class!  Your average grade is:")
}else if(sum <= 100){alert ("Excellent! You made an A in the class! Your average grade is:")} //else if that decides which message to diplay

document.getElementById('gradePlaceholder').value = sum;}</script> 

</head>

<body>

<p>Please enter your five grades and I will display a message with your average. 
<br />
Grade one <input type='text' id='firstNumber' /> <br />
Grade two <input type='text' id='secondNumber' /> <br />
Grade three <input type='text' id='thirdNumber' /> <br />
Grade four <input type='text' id='fourthNumber' /> <br />
Grade five <input type='text' id='fifthNumber' /> <br />  

<input type='text' id='gradePlaceholder' disabled='disabled'/> <br />
<input type="button" id="calcAverage" value="Compute Average" onclick='calculateAverage()'/>


</p> 
</body>
</html>

This post has been edited by Dormilich: 26 January 2013 - 12:55 AM


Is This A Good Question/Topic? 0
  • +

Replies To: No answer displays in my disabled textbox?

#2 NathanMullenax  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 81
  • View blog
  • Posts: 176
  • Joined: 23-September 12

Re: No answer displays in my disabled textbox?

Posted 25 January 2013 - 08:28 PM

First, I would try alerting this average instead of updating the disabled textbox. 
alert("whatever");

Alert is really useful for debugging Javascript. Also, if you use Chrome or Firefox, it's good to have the JS Console open when you load your page to catch things like syntax errors.

It might be the case that you can't set a value in a disabled textbox. This kind of makes sense (though I haven't tested). If it's not an input, you could just as easily put it in a span or a div using something like:

document.getElementById('idOfDiv').innerHTML = "whatever";


Hope this helps.

This post has been edited by Dormilich: 26 January 2013 - 12:57 AM
Reason for edit:: fixing code

Was This Post Helpful? 1
  • +
  • -

#3 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2888
  • View blog
  • Posts: 7,534
  • Joined: 08-June 10

Re: No answer displays in my disabled textbox?

Posted 26 January 2013 - 12:58 AM

line #08, there is a typo.
Was This Post Helpful? 1
  • +
  • -

#4 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 115
  • View blog
  • Posts: 748
  • Joined: 25-October 08

Re: No answer displays in my disabled textbox?

Posted 26 January 2013 - 02:54 PM

This may simplify your code a bit by getting rid of so many if ... else ... if ... statements.
<html>
<title>Grade Average Calculator</title>

<script type='text/javascript'>
function calculateAverage() { //this is the code for the calculation function
  var sum = parseInt(document.getElementById('Exam1').value)
          + parseInt(document.getElementById('Exam2').value)
          + parseInt(document.getElementById('Exam3').value)
          + parseInt(document.getElementById('Exam4').value)
          + parseInt(document.getElementById('Exam5').value); //assigns variables to the five grades
  var avg = (sum / 5).toFixed(1);
  var msg = '';
  if(avg <= 100){ msg = "Excellent! You made an A in the class!"; }
  if (avg <= 89){ msg = "Good Job!  You made a B in the class!"; }
  if (avg <= 79){ msg = "Not Bad!  You made a C in the class!"; }
  if (avg <= 69){ msg = "Do better next time, you made a D."; }
  if (avg <= 64){ msg = "Oh no....you made an F. Sorry you didn't pass."; }
  document.getElementById('gradePlaceholder').value = '  Your average grade is: '+avg;
  alert(msg);
}
</script> 
</head>
<body>

<p>Please enter your five grades and I will display a message with your average. 
<br />
Grade one <input type='text' id='Exam1' value='' /> <br />
Grade two <input type='text' id='Exam2' value='' /> <br />
Grade three <input type='text' id='Exam3' value='' /> <br />
Grade four <input type='text' id='Exam4' value='' /> <br />
Grade five <input type='text' id='Exam5' value='' /> <br />  
<input type='text' id='gradePlaceholder' size="40" disabled='disabled'/> <br />
<input type="button" id="calcAverage" value="Compute Average" onclick='calculateAverage()'/>

</p> 
</body>
</html>

Was This Post Helpful? 1
  • +
  • -

#5 andrewsw  Icon User is offline

  • Provides a RESTful service
  • member icon

Reputation: 1054
  • View blog
  • Posts: 3,324
  • Joined: 12-December 12

Re: No answer displays in my disabled textbox?

Posted 26 January 2013 - 03:16 PM 

var avg = (sum / 5).toFixed(1);


@JMRKER toFixed returns a string; do you have a reason to do this at this line, rather than just when displaying the avg?
Was This Post Helpful? 1
  • +
  • -

#6 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 115
  • View blog
  • Posts: 748
  • Joined: 25-October 08

Re: No answer displays in my disabled textbox?

Posted 26 January 2013 - 05:45 PM

View Postandrewsw, on 26 January 2013 - 04:16 PM, said:

var avg = (sum / 5).toFixed(1);


@JMRKER toFixed returns a string; do you have a reason to do this at this line, rather than just when displaying the avg?


Nope, no reason other that to keep if from displaying values with 85.46372819 and the like.
Would have kept it a number if were going to use it in another calculation,
but the average to 8 decimal places is rather useless to me as a display.

This post has been edited by JMRKER: 26 January 2013 - 05:46 PM

Was This Post Helpful? 0
  • +
  • -

#7 rowdy0429  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 13-September 12

Re: No answer displays in my disabled textbox?

Posted 26 January 2013 - 06:20 PM

Thanks all that really helped me. I also found i misspelled fourth in my code so i corrected that and then switched it up a bit like you all reccomended.
var d = parseInt(document.getElementById('fourthNumber').value);


I am not sure about the typo on line #08 .............
function calculateAverage() //this is the code for the calculation function

so for now I have not changed that line. I thought the function name was supposed to be one line and using camelcase is ok, right? did I miss something? All feedback is very appreciated because I want to learn, and mistakes, I learn from quickly. I now get the program to return information , but if iIput all 100s in as the grades it returns "my grade is: 1". Why?

And one last question...... What does the (1) do in this line?
var avg = (sum / 5).toFixed(1);



Here is my code again, and of course THANK you all!!!! Your information has helped me understand what I am doing wrong and how to correct it.

<script type='text/javascript'>
function calculateAverage() //this is the code for the calculation function
{var a = parseInt(document.getElementById('firstNumber').value);
var b = parseInt(document.getElementById('secondNumber').value);
var c = parseInt(document.getElementById('thirdNumber').value);
var d = parseInt(document.getElementById('fourthNumber').value);
var e = parseInt(document.getElementById('fifthNumber').value); //assigns variables to the five grades

var sum = a+b+c+d+e
var avg = (sum / 5).toFixed(1);  
var msg = '';  

if(avg <= 100){ msg = "Excellent! You made an A in the class!"; }  
if (avg <= 89){ msg = "Good Job!  You made a B in the class!"; }  
if (avg <= 79){ msg = "Not Bad!  You made a C in the class!"; }  
if (avg <= 69){ msg = "Do better next time, you made a D."; }  
if (avg <= 64){ msg = "Oh no....you made an F. Sorry you didn't pass."; }  
document.getElementById('gradePlaceholder').value = '  Your average grade is: '+avg;  
alert(msg);  
}</script> 

</head>

<body>

<p>Please enter your five grades and I will display a message with your average. 
<br />
Grade one <input type='text' id='firstNumber' /> <br />
Grade two <input type='text' id='secondNumber' /> <br />
Grade three <input type='text' id='thirdNumber' /> <br />
Grade four <input type='text' id='fourthNumber' /> <br />
Grade five <input type='text' id='fifthNumber' /> <br />  

<input type='text' id='gradePlaceholder' disabled='disabled'/> <br />
<input type="button" id="calcAverage" value="Compute Average" onclick='calculateAverage()'/>


</p> 
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#8 andrewsw  Icon User is offline

  • Provides a RESTful service
  • member icon

Reputation: 1054
  • View blog
  • Posts: 3,324
  • Joined: 12-December 12

Re: No answer displays in my disabled textbox?

Posted 26 January 2013 - 07:04 PM

Erm, I suspect it is saying that your average is 100.0 but because you have disabled the control you can't see anything beyond "1".

toFixed(1) will display "100" as "100.0".

This post has been edited by andrewsw: 26 January 2013 - 07:06 PM

Was This Post Helpful? 1
  • +
  • -

#9 rowdy0429  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 13-September 12

Re: No answer displays in my disabled textbox?

Posted 26 January 2013 - 07:22 PM

I thought this meant the text box could not be typed in.....


<input type='text' id='gradePlaceholder' disabled='disabled'/> <br />


is that incorrect?
I took out disabled and tried it and it still says one? How did I disable it? If you cannot tell I am new to Javascript.....extremely new. :)
Was This Post Helpful? 0
  • +
  • -

#10 andrewsw  Icon User is offline

  • Provides a RESTful service
  • member icon

Reputation: 1054
  • View blog
  • Posts: 3,324
  • Joined: 12-December 12

Re: No answer displays in my disabled textbox?

Posted 26 January 2013 - 07:30 PM

View Postrowdy0429, on 26 January 2013 - 07:22 PM, said:

I thought this meant the text box could not be typed in.....


<input type='text' id='gradePlaceholder' disabled='disabled'/> <br />


is that incorrect?
I took out disabled and tried it and it still says one? How did I disable it? If you cannot tell I am new to Javascript.....extremely new. :)/>

Yes, disabled means you can't type in it, which means that you cannot click into the box and move the cursor beyond the 1 and, therefore, see that there are more characters.

You could, of course, make the box wider.
Was This Post Helpful? 1
  • +
  • -

#11 rowdy0429  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 13-September 12

Re: No answer displays in my disabled textbox?

Posted 26 January 2013 - 07:35 PM

At the risk of really sounding terribly stupid.......how? This is just chapter two so I haven't gotten that far yet.But now it makes sense and for ease of use, the user wouldn't realize they had to click in the box to see the rest of the text.
Was This Post Helpful? 0
  • +
  • -

#12 rowdy0429  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 13-September 12

Re: No answer displays in my disabled textbox?

Posted 26 January 2013 - 07:44 PM 


<input type='text' id='gradePlaceholder' disabled='disabled' style='width:250px; height:15px;' /> <br />
<input type="button" id="calcAverage" value="Compute Average" onclick='calculateAverage()'/>


WAIT !!! stop the presses I found it !!!!! Yay !!! thank you that helped out alot.....:D
Was This Post Helpful? 0
  • +
  • -

#13 andrewsw  Icon User is offline

  • Provides a RESTful service
  • member icon

Reputation: 1054
  • View blog
  • Posts: 3,324
  • Joined: 12-December 12

Re: No answer displays in my disabled textbox?

Posted 26 January 2013 - 07:46 PM

View Postrowdy0429, on 26 January 2013 - 07:35 PM, said:

At the risk of really sounding terribly stupid.......how? This is just chapter two so I haven't gotten that far yet.But now it makes sense and for ease of use, the user wouldn't realize they had to click in the box to see the rest of the text.


You should do this with a css-stylesheet but just for the moment you could do:

<input type='text' id='gradePlaceholder' disabled='disabled' style='width:200px;'>


Note that the ' /' is not required in HTML5.

View Postrowdy0429, on 26 January 2013 - 07:44 PM, said:

WAIT !!! stop the presses I found it !!!!! Yay !!! thank you that helped out alot.....


Well done! You don't need ' /' for the break tags either (in HTML5), just <br>.
Was This Post Helpful? 0
  • +
  • -

#14 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 115
  • View blog
  • Posts: 748
  • Joined: 25-October 08

Re: No answer displays in my disabled textbox?

Posted 26 January 2013 - 09:10 PM

View Postrowdy0429, on 26 January 2013 - 08:44 PM, said:


<input type='text' id='gradePlaceholder' disabled='disabled' style='width:250px; height:15px;' /> <br />
<input type="button" id="calcAverage" value="Compute Average" onclick='calculateAverage()'/>


WAIT !!! stop the presses I found it !!!!! Yay !!! thank you that helped out alot.....:D/>/>/>


You could have also used the code I proposed in post #4.

<input type='text' id='gradePlaceholder' size="40" disabled='disabled'/> <br />

Note the difference to see the whole line.

This post has been edited by JMRKER: 26 January 2013 - 09:11 PM

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1