Result of the calculation resulting in NaN - javascript

How could I fix the NaN error in the code below?
I already tried initializing the variables with 0 but it didn't work.
Ignore the CSS inside the tags, where work needs to be written like this...
This is the code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function NotaFinal() {
var n1 = parseFloat(document.getElementById("n1").value);
var n2 = parseFloat(document.getElementById("n2").value);
var ex = parseFloat(document.getElementById("ex").value);
var MediaFinal = n1 + n2;
if (ex > 0) {
if(MediaFinal > 2.75 && MediaFinal < 5.75) {
MediaFinal = (MediaFinal + (ex*2)) / 3
alert("A nota final é " + MediaFinal.toFixed(1));
}
} else {
alert("A nota final é " + MediaFinal.toFixed(1));
}
}
function Limpar() {
document.getElementById("n1").value = "";
document.getElementById("n2").value = "";
document.getElementById("ex").value = "";
}
</script>
</head>
<body>
<strong><span style="padding-top: 10px; font-family: Arial, Helvetica, sans-serif;">N1</span></strong><input id="n1" type="number"><br><br>
<strong><span style="padding-top: 10px; font-family: Arial, Helvetica, sans-serif;">N2</span></strong><input id="n2" type="number"><br><br>
<strong><span style="padding-top: 10px; font-family: Arial, Helvetica, sans-serif;">EX</span></strong><input id="ex" type="number"><br><br>
<button onclick="NotaFinal()" style="background-color: #0C5BA1; color: #FFFFFF; border: none; padding: 2px; width:70px; margin-left: 23px;">Calcular</button>
<button onclick="Limpar()" style="background-color: #0C5BA1; color: #FFFFFF; border: none; padding: 2px; width: 70px; margin-left: 20px;">Limpar</button>
</body>
</html>

based on #wck's error reproduction:
As you can see (1), (2), (3) I have added .replace(',', '.') to replace the first ,found with a dot.according to the standard about type of programming language if there are two signs,` then it is no longer a number and will return NaN
function NotaFinal() {
var n1 = parseFloat(document.getElementById("n1").value.replace(',', '.')); // (1)
var n2 = parseFloat(document.getElementById("n2").value.replace(',', '.')); // (2)
var ex = parseFloat(document.getElementById("ex").value.replace(',', '.')); // (3)
var MediaFinal = n1 + n2;
if (ex > 0) {
if (MediaFinal > 2.75 && MediaFinal < 5.75) {
MediaFinal = (MediaFinal + (ex*2)) / 3
alert("A nota final é " + MediaFinal.toFixed(1));
}
} else {
alert("A nota final é " + MediaFinal.toFixed(1));
}
}

Related

How to stop lag when going through a for loop?

I'm generating primes, and it will lag until it's done. Is there a way where I can make it so it doesn't lag. For example, if you're generating up to 1000, I want it to just spit out the answers right away when it's done calculating the number.
HTML:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<title>Prime Generator</title>
<h1>
Welcome to my online prime generator!
<h1>
<style>
.w3-gold,.w3-hover-gold:hover{color:#fff!important;background-color:#c9a000!important}
.w3-btn {
background-color: #c9a000;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 0px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
float: right;
}
}
.button1 {
background-color: black;
color: white;
}
.button1:hover {
background-color: #e7e7e7;
color: black
}
.button2 {
background-color: #c9a000;
color: white;
}
.button2:hover {
background-color: #e7e7e7;
color: black
}
</style>
</head>
<body>
<div class="w3-container">
<div class="w3-card-4">
<div class="container w3-gold">
<h2>Input Form</h2>
</div>
<form class="w3-container">
<p>
<select class="w3-select" name="option" id="option">
<option value="" disabled selected>Generate or Choose?</option>
<option value="1" >Generate</option>
<option value="2" >Choose</option>
</select>
<input class="w3-input" id="inputt" type="text">
<label class="w3-text">Type in a number<label>
</p>
<p>
<div class="w3-btn button2" id="BT2">Clear</div>
<div class="w3-btn button1" id="BT1">Proceed</div>
<div id ="done"></div>
<div id="out"></div>
<div id="gout"></div>
</form>
<script>
function prime(num) {
var stop = num % 2 == 0
var num1 = 2
var num2 = 2
while (stop == false && num2 <= Math.sqrt(num)) {
stop = num1 * num2 == num
num1++
if (num1 == num) {
num1 = 2
num2++
}
}
if (stop == true) {
return(num + " is not prime.")
} else {
return(num + " is prime")
}
}
document.getElementById("BT1").addEventListener("click", function(){
if (isNaN(document.getElementById("inputt").value) == false && document.getElementById("inputt").value != "" && document.getElementById("option").value == 1) {
document.getElementById("out").innerHTML = "<br> Generating up to " + document.getElementById("inputt").value + "!"
document.getElementById("gout").innerHTML = ""
for (num3 = 1; num3 <= parseInt(document.getElementById("inputt").value); num3++) {
document.getElementById("gout").innerHTML = document.getElementById("gout").innerHTML + "<br>" + prime(num3)
}
document.getElementById("done").innerHTML = "done!"
} else if (isNaN(document.getElementById("inputt").value) == false && document.getElementById("inputt").value != "" && document.getElementById("option").value == 2) {
document.getElementById("out").innerHTML = "Checking if " + document.getElementById("inputt").value + " is prime!"
document.getElementById("gout").innerHTML = "<br>" + prime(parseInt(document.getElementById("inputt").value))
} else if (document.getElementById("inputt").value != "") {
document.getElementById("out").innerHTML = document.getElementById("inputt").value + " is not a number!"
} else {
document.getElementById("out").innerHTML = "Thats a blank space!"
}
});
document.getElementById("BT2").addEventListener("click", function(){
document.getElementById("gout").innerHTML = ""
document.getElementById("out").innerHTML = ""
document.getElementById("done").innerHTML = ""
});
</script>
</div>
</div>
</body>
</html>
For an immediate fix, you can replace the contents of the for loop with the following:
var pr = prime(num3);
var cont = document.createTextNode(pr);
var br = document.createElement('br');
document.getElementById("gout").appendChild(br);
document.getElementById("gout").appendChild(cont);
The reason for the lag is that setting innerHTML is a very time taking operation, I guess.

does number zero work as " " in javascript?

document.getElementById("Btn1").onclick = function() {
var aa = document.getElementById("fInput").value;
var a = Number(aa);
var bb = document.getElementById("sInput").value;
var b = Number(bb);
if (a == "" || b == "") {
alert("Fill both inputs");
} else if (a < 1 || a > 3 || b < 1 || b > 3) {
alert(" Fields can only contain values ' 1 & 2 & 3 ' ");
} else if (a == b) {
alert("Not Possible !!");
} else {
var myArray = ['frBox', 'snBox', 'thirdBox'];
var id1 = myArray[a - 1];
var id2 = myArray[b - 1];
Swap(id1, id2);
}
}
function Swap(id1, id2) {
var x = document.getElementById(id1).innerHTML;
var y = document.getElementById(id2).innerHTML;
document.getElementById(id1).innerHTML = y;
document.getElementById(id2).innerHTML = x;
}
.fBox {
height: 100px;
width: auto;
background-color: yellow;
color: green;
}
.sBox {
height: 100px;
width: auto;
background-color: aqua;
color: black;
}
.thBox {
height: 100px;
width: auto;
background-color: rgba(23, 84, 244, 0.4);
color: rgb(45, 65, 77);
}
button {
height: auto;
width: 150px;
text-align: center;
background-color: crimson;
color: white;
border-radius: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test Page</title>
</head>
<body>
<div class="fBox" id="frBox">
<p>
Hello From the first box.
</p>
</div>
<div class="sBox" id="snBox">
<p>
JavaScript is Cool !!!
</p>
</div>
<div class="thBox" id="thirdBox">
<p>
I am Learning JavaScript !!!
</p>
</div><br>
<input id="fInput" placeholder="Num 1">
<input id="sInput" placeholder="Num 2"><br><br>
<button id="Btn1"> Click to Swap </button>
</body>
</html>
When I enter 0 in any of the inputs and a number between 1 and 3 in the other input and click on the button, it alerts "Fill both inputs".
But I expected seeing " Fields can only contain values ' 1 & 2 & 3 ' " alert.
or when I fill both inputs with 0, this issue again happens!!
Does 0 work as "" in JavaScript or there is a problem in my code??
0 and "" both evaluate to false in Javascript.
var x = 0;
if (x) {
console.log('Will not be called.');
}
var y = '';
if (y) {
console.log('Will not be called.');
}
As some of the other answers have alluded to, there is also lazy vs strict equality, using == vs ===.
That wont fix your problem though, because you're doing var a = Number(aa);. If you enter 0 in one of your inputs, you'll get Number(0), which is 0. If you don't enter anything in one of your inputs, you'll get Number(''), which is 0.
I'd replace
if (a == "" || b == "") { ... }
with
if (!a || !b) { ... }
// shorthand version of (if a === false || b === false)
// which will be the case if a or b === 0
If 0 is entered in either input, or if either input is left empty, you'll end up with a or b being 0, which will evaluate to false.
Shortly:
If you use ==, yes.
To avoid it, use ===.
Longer:
== (double equals) does some weird things because
it tries to transform values to same types (in this case, to numbers), and
Number("") === 0
Conclusion:
It's better to use Strict equality operator (===) instead:
document.getElementById("Btn1").onclick = function() {
var aa = document.getElementById("fInput").value;
var a = Number(aa);
var bb = document.getElementById("sInput").value;
var b = Number(bb);
if (aa===""||bb==="") {
alert("Fill both inputs");
} else if (a < 1 || a > 3 || b < 1 || b > 3) {
alert(" Fields can only contain values ' 1 & 2 & 3 ' ");
} else if (a == b) {
alert("Not Possible !!");
} else {
var myArray = ['frBox', 'snBox', 'thirdBox'];
var id1 = myArray[a - 1];
var id2 = myArray[b - 1];
Swap(id1, id2);
}
}
function Swap(id1, id2) {
var x = document.getElementById(id1).innerHTML;
var y = document.getElementById(id2).innerHTML;
document.getElementById(id1).innerHTML = y;
document.getElementById(id2).innerHTML = x;
}
.fBox {
height: 100px;
width: auto;
background-color: yellow;
color: green;
}
.sBox {
height: 100px;
width: auto;
background-color: aqua;
color: black;
}
.thBox {
height: 100px;
width: auto;
background-color: rgba(23, 84, 244, 0.4);
color: rgb(45, 65, 77);
}
button {
height: auto;
width: 150px;
text-align: center;
background-color: crimson;
color: white;
border-radius: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test Page</title>
</head>
<body>
<div class="fBox" id="frBox">
<p>
Hello From the first box.
</p>
</div>
<div class="sBox" id="snBox">
<p>
JavaScript is Cool !!!
</p>
</div>
<div class="thBox" id="thirdBox">
<p>
I am Learning JavaScript !!!
</p>
</div><br>
<input id="fInput" placeholder="Num 1">
<input id="sInput" placeholder="Num 2"><br><br>
<button id="Btn1"> Click to Swap </button>
</body>
</html>
See more information
Comparision of comparision operators
==
===

Textarea won't display values after hitting Reset

The reset button only appears once a conversion from Fahrenheit to Celsius is successfully done. It works fine. However, after hitting Reset, I cannot see values in the textarea when perform more conversions. I think the problem is most likely caused the two arrays in my codes. What do you think?
I have recreated the problem here: http://jsfiddle.net/wnna3646/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Temperature Conversion</title>
<style type="text/css">
body { font: 1em calibri, arial; }
button {
background-color: transparent;
margin: 5px;
width: 300px;
}
h1, h2, h3, h4 { text-align: center; }
table {
border: 8px double;
margin-left: auto;
margin-right: auto;
padding: 2px;
height: 500px;
width: 30%;
}
td { border: 1px solid; }
td#topcell {
height: 300px;
text-align: center;
vertical-align: middle;
}
td#midcell {
height: 300px;
text-align: center;
vertical-align: middle;
}
td#bottomcell { text-align: center; }
textarea {
width: 250px;
height: 250px;
}
p {
word-spacing: 25px;
}
#Fahr {
display: inline-block;
float: left;
clear: left;
width: 100px;
text-align: right;
}
#Cels {
display: inline-block;
float: left;
clear: left;
width: 100px;
text-align: right;
}
#ftemp, #ctemp {
display: inline;
float: middle;
}
</style>
</head>
<body>
<main role="main">
<form id="myForm" onsubmit="return this.ftemp.value!=''">
<table>
<tr>
<td id="topcell">
<label for="Fahrenheit" id="Fahr">Fahrenheit:</label><input id="ftemp" onkeypress="return fNumericCharactersOnly(event)" onkeyup="this.form.Convertbtn.disabled = this.value==''; this.form.Avgbtn.disabled = this.value==''; if(!validnum(this.value)) this.value=''">
<br /><br />
<label for="Celsius" id="Cels" >Celsius:</label><input id="ctemp" readonly>
<br /><br /><br /><br /><br /><br />
<p>Fahrenheit Celsius</p>
</td>
</tr>
<tr>
<td id="midcell">
<br />
<textarea rows="5" id="txtArea" readonly></textarea>
</td>
</tr>
<tr>
<td id="bottomcell">
<input type="button" id="Convertbtn" value="Convert" accesskey="c" onclick="convertTemp(); counter++" disabled="disabled"/>
<input type="button" id="Avgbtn" value="Average" accesskey="a" onclick="averageTemp(); AddResetbutton()" disabled="disabled"/>
<div id="ButtonSpot"></div>
</td>
</tr>
</table>
</form>
</main>
<script type="text/javascript">
var flist = [];
var clist = [];
var counter = 0;
function validnum(F) {
if(F < -9999 || F > 9999)
return false;
else
return true;
}
function fNumericCharactersOnly(evt){
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
return (charCode >= 48 && charCode <= 57); // 48 to 57 ==> 0 to 9
}
function convertTemp() {
var c = document.getElementById('ctemp'),
f = document.getElementById('ftemp');
c.value = parseFloat(Math.round((f.value - 32) * 5 / 9)).toFixed(2);
tf = f.value, tc = c.value;
flist.push(tf); clist.push(tc);
var str = "";
str += '\t' + tf + '\t' + '&nbsp' + '&nbsp' + tc + "\n";
document.getElementById("txtArea").innerHTML = str;
}
function averageTemp() {
var content="";
var sumF = 0;
var sumC = 0;
for (var i = 0; i < flist.length; i++) {
content += '\t' + flist[i] + '\t' + '&nbsp' + '&nbsp' + clist[i] + "\n";
sumF += parseInt(flist[i], 10);
sumC += parseInt(clist[i], 10);
}
bars = '===============================';
var avgF = parseFloat(sumF / flist.length).toFixed(2);
var avgC = parseFloat(sumC / clist.length).toFixed(2);
document.getElementById("txtArea").innerHTML = content + bars + "\n" + '\t' + avgF + '\t' + '&nbsp' + '&nbsp' + avgC;
flist = [];
clist = [];
document.getElementById("Avgbtn").disabled=true;
}
function AddResetbutton() {
document.getElementById('ButtonSpot').innerHTML = '<input type="button" onClick="removeButton();" value="Reset" />';
document.getElementById("Convertbtn").disabled=true;
}
function removeButton() {
document.getElementById("myForm").reset();
document.getElementById('ButtonSpot').innerHTML = '';
document.getElementById("txtArea").value = "";
document.getElementById("Convertbtn").disabled=true;
document.getElementById("Avgbtn").disabled=true;
}
</script>
</body>
</html>
Also, I have attempted to make the script automatically display all values after the 10th one is entered, but can't seem to make it work. Any suggestions?
Hey Your code is fixed.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Temperature Conversion</title>
<style type="text/css">
body { font: 1em calibri, arial; }
button {
background-color: transparent;
margin: 5px;
width: 300px;
}
h1, h2, h3, h4 { text-align: center; }
table {
border: 8px double;
margin-left: auto;
margin-right: auto;
padding: 2px;
height: 500px;
width: 30%;
}
td { border: 1px solid; }
td#topcell {
height: 300px;
text-align: center;
vertical-align: middle;
}
td#midcell {
height: 300px;
text-align: center;
vertical-align: middle;
}
td#bottomcell { text-align: center; }
textarea {
width: 250px;
height: 250px;
}
p {
word-spacing: 25px;
}
#Fahr {
display: inline-block;
float: left;
clear: left;
width: 100px;
text-align: right;
}
#Cels {
display: inline-block;
float: left;
clear: left;
width: 100px;
text-align: right;
}
#ftemp, #ctemp {
display: inline;
float: middle;
}
</style>
</head>
<body>
<main role="main">
<form id="myForm" onsubmit="return this.ftemp.value!=''">
<table>
<tr>
<td id="topcell">
<label for="Fahrenheit" id="Fahr">Fahrenheit:</label><input id="ftemp" onkeypress="return fNumericCharactersOnly(event)" onkeyup="this.form.Convertbtn.disabled = this.value==''; this.form.Avgbtn.disabled = this.value==''; if(!validnum(this.value)) this.value=''">
<br /><br />
<label for="Celsius" id="Cels" >Celsius:</label><input id="ctemp" readonly>
<br /><br /><br /><br /><br /><br />
<p>Fahrenheit Celsius</p>
</td>
</tr>
<tr>
<td id="midcell">
<br />
<textarea rows="5" id="txtArea" name="textarea-name" readonly></textarea>
</td>
</tr>
<tr>
<td id="bottomcell">
<input type="button" id="Convertbtn" value="Convert" accesskey="c" onclick="convertTemp(); counter++" disabled="disabled"/>
<input type="button" id="Avgbtn" value="Average" accesskey="a" onclick="averageTemp(); AddResetbutton()" disabled="disabled"/>
<div id="ButtonSpot"></div>
</td>
</tr>
</table>
</form>
</main>
<script type="text/javascript">
var flist = [];
var clist = [];
var counter = 0;
function validnum(F) {
if(F < -9999 || F > 9999)
return false;
else
return true;
}
function fNumericCharactersOnly(evt){
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
return (charCode >= 48 && charCode <= 57); // 48 to 57 ==> 0 to 9
}
function convertTemp() {
var c = document.getElementById('ctemp'),
f = document.getElementById('ftemp');
c.value = parseFloat(Math.round((f.value - 32) * 5 / 9)).toFixed(2);
tf = f.value, tc = c.value;
flist.push(tf); clist.push(tc);
var str = "";
str += '\t' + tf + '\t' + '&nbsp' + '&nbsp' + tc + "\n";
document.getElementById("txtArea").innerHTML = str;
}
function averageTemp() {
var content="";
var sumF = 0;
var sumC = 0;
for (var i = 0; i < flist.length; i++) {
content += '\t' + flist[i] + '\t' + '&nbsp' + '&nbsp' + clist[i] + "\n";
sumF += parseInt(flist[i], 10);
sumC += parseInt(clist[i], 10);
}
bars = '===============================';
var avgF = parseFloat(sumF / flist.length).toFixed(2);
var avgC = parseFloat(sumC / clist.length).toFixed(2);
document.getElementById("txtArea").innerHTML = content + bars + "\n" + '\t' + avgF + '\t' + '&nbsp' + '&nbsp' + avgC;
flist = [];
clist = [];
document.getElementById("Avgbtn").disabled=true;
}
function AddResetbutton() {
document.getElementById('ButtonSpot').innerHTML = '<input type="button" onClick="removeButton();" value="Reset" />';
document.getElementById("Convertbtn").disabled=true;
}
function removeButton() {
document.getElementById("myForm").reset();
document.getElementById('ButtonSpot').innerHTML = '';
document.getElementById("txtArea").innerHTML = '';
document.getElementById("Convertbtn").disabled=true;
document.getElementById("Avgbtn").disabled=true;
}
</script>
</body>
</html>

Missing word game (gap filler)

i am making a little word game where theres a missing word and if you fill in the input field with the correct answer it turns green
I would like to add a functionality to this code but I am not sure how
I want to edit it so if you put a wrong answer in it turns red
at the minute it just adds up your score and turns green if you put in the right answer
i know the answer is to do with the end of the js file where it turns it green if correct
this is the html
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'> </script>
<script type="text/javascript">
$(document).ready(function(){
$("input").not( $(":button") ).keypress(function (evt) {
if (evt.keyCode == 13) {
iname = $(this).val();
if (iname !== 'Submit'){
var fields = $(this).parents('form:eq(0),body').find('button,input,textarea,select');
var index = fields.index( this );
if ( index > -1 && ( index + 1 ) < fields.length ) {
fields.eq( index + 1 ).focus();
}
return false
}
}
});
});</script>
<script type="text/javascript" src="prolinguis-gap-filler.js"></script>
<div style="font-family:Helvetica; font-size: 18px; vertical-align:bottom; color:#3e2e41; margin:16px 0;"> Score: <label id="label_score">0%</label></div>
<form class="game-form" style="padding: 0px; width: 100%; margin: 10px auto;" >
<!-- //////////////////////////////////////////////////////////////////////////////////////// -->
<div class="game-hold" style=" width: 100%; text-align: left; display: inline-block;">
<p style="font-size: 14px; font-weight: bold; margin: 5px 0; color: #333333;">Question 1</p>
<p>Where is Stephen from? <input TYPE="text" id="ctr1" onBlur="validate(this.value, this.id)" style="text-transform: uppercase; font-family:Helvetica; font-size: 10px; width:150px; height:18px; text-align: left; color:#000000;"></input></p>
</div>
<!-- //////////////////////////////////////////////////////////////////////////////////////// -->
<div class="game-hold" style=" width: 100%; text-align: left; display: inline-block;">
<p style="font-size: 14px; font-weight: bold; margin: 5px 0; color: #333333;">Question 2</p>
<p>If someone asks you, what’s cooking? You shouldn’t answer with: <input TYPE="text" id="ctr2" onBlur="validate(this.value, this.id)" style="text-transform: uppercase; font-family:Helvetica; font-size: 10px; width:150px; height:18px; text-align: left; color:#000000;"></input></p>
</div>
<!-- //////////////////////////////////////////////////////////////////////////////////////// -->
<div class="game-hold" style=" width: 100%; text-align: left; display: inline-block;">
<p style="font-size: 14px; font-weight: bold; margin: 5px 0; color: #333333;">Question 3</p>
<p>Instead, just say <input TYPE="text" id="ctr3" onBlur="validate(this.value, this.id)" style="text-transform: uppercase; font-family:Helvetica; font-size: 10px; width:150px; height:18px; text-align: left; color:#000000;"></input></p>
</div>
</form>
and in a js file i have this
<script>
var ctr = 0
var score_ctr = 0
function validate(value, id) {
if (id =='ctr1' && (value.toUpperCase()=="UNITED STATES" || value.toUpperCase()=="USA" || value.toUpperCase()=="AMERICA")) {
ctr = ctr + 1;
correct_answer(id);
document.getElementById(id).value="UNITED STATES";
}
if (id =='ctr2' && (value.toUpperCase()=="GOOD")) {
ctr = ctr + 1;
correct_answer(id);
document.getElementById(id).value="GOOD";
}
if (id =='ctr3' && (value.toUpperCase()=="NOTHING MUCH" || value.toUpperCase()=="NOT MUCH")) {
ctr = ctr + 1;
correct_answer(id);
document.getElementById(id).value="NOTHING MUCH";
}
}
function correct_answer (id) {
score_ctr = (ctr * 100) / 3
document.getElementById('label_score').innerHTML = score_ctr.toFixed(0) + '%'
document.getElementById(id).disabled=true;
document.getElementById(id).style.backgroundColor = '#c1d82f'
document.getElementById(id).style.cursor="default"
}
</script>
Change validate(value, id) to the following:
function validate(value, id) {
if (id == 'ctr1' && (value.toUpperCase() == "UNITED STATES" || value.toUpperCase() == "USA" || value.toUpperCase() == "AMERICA")) {
ctr = ctr + 1;
correct_answer(id);
document.getElementById(id).value = "UNITED STATES";
}
else if (id == 'ctr2' && (value.toUpperCase() == "GOOD")) {
ctr = ctr + 1;
correct_answer(id);
document.getElementById(id).value = "GOOD";
}
else if (id == 'ctr3' && (value.toUpperCase() == "NOTHING MUCH" || value.toUpperCase() == "NOT MUCH")) {
ctr = ctr + 1;
correct_answer(id);
document.getElementById(id).value = "NOTHING MUCH";
}
else
{
document.getElementById(id).style.backgroundColor = '#ff0000';
document.getElementById(id).style.cursor = "default";
}
This will go through and check all the different input fields, and if no correct answer is found, will set the background of the last blurred field to red.
Just a hint, if you want to clean up your code a bit, consider using a switch statement to determine which id you're checking.

web programming_javascript: Error with Grade result in javascript

i have create a student information javascript.Everything is ok but i have a problem in the result of student's grade.It's alway show grade F every score.Ex.when total score is 100 it's show F but when total score is 500 it still show F.
Here is my code of java and html
'
var Column= ["ID", "Name","Gender","Javascript","Data structure","Network","VB.net","Corel Draw","Total", "Average","Grade"];
var arr = ["","","","0","0","0","0","0","0","0",""];
var i = 0;
var j = 0;
var x;
var grade;
if(arr[8]>=450 && arr[8]<500)
grade= "A";
else if(arr[8]>=400 && arr[8]<450)
grade= "B";
else if(arr[8]>=350 && arr[8]<400)
grade= "C";
else if(arr[8]>=300 && arr[8]<350)
grade= "D";
else if(arr[8]>=250 && arr[8]<300)
grade= "E";
else (arr[8]<250)
grade= "F";
x = parseInt(window.prompt("Number of Student"));
for (j = 0 ; j <= x-1 ; j++) {
//
for (i = 0 ; i <= 7; i++) {
arr[i] = window.prompt("Please Input " + Column[i] );
}
arr[8]= parseInt(arr[3]) + parseInt(arr[4]) + parseInt(arr[5]) + parseInt(arr[6]) + parseInt(arr[7]);
arr[9]= parseInt(arr[8])/5;
arr[10]=grade;
document.write("<tr>");
for (i = 0 ; i <= 10 ; i++) {
//
document.write("<td>"+ arr[i] + "</td> ");
}
document.write("</tr>");
//
}
document.write("</table>");
<html>
<head>
<title>Korm-Chantola</title>
<link rel="stylesheet" type="text/css" href="style for table.css">
</head>
<body>
<div class="watermark">KORM-CHANTOLA<br>ID-B121561<br>ROOM-A201</div>
<center>
<h1>STUDENT SCORE INFORMATION</h1>
<table class="table1"
border="5" padding="2px"
width="700px">
<tr >
<th>ID</th>
<th>Name</th>
<th>Gender</th>
<th>JavaScript</th>
<th>Data Structure</th>
<th>Network</th>
<th>VB.net</th>
<th>Corel Draw</th>
<th>Total</th>
<th>Average</th>
<th>Grade</th>
</tr>
<script type="text/javascript" src="JScript.js"></script>
</center>
</body>
</html>
table.table1,td,th{
border: 1px solid black;
}
table.table1 td {
text-align: center;
height: 50px;
vertical-align: bottom;
padding: 15px;
background-color:#CCCCCC;
color:#0D3821;
}
table.table1 th{
color:white;
background-color:#3B3B99;
padding: 10px;
}
h1 {
text-shadow: 15px 10px 8px black;
text-align: center;
text-decoration: underline;
color:#1C127D;
}
body {
background-color: #E6E6E6;
}
.watermark {
position: left;
opacity: 0.25;
font-size: 2em;
width: 100%;
text-align: left;
z-index: 1000;
}
![This is Screenshot of problem][10]
It will do because for grade A you are testing if it is less than 500. It's not so it will fall through to the else condition. Change to <=500 and it should work for grade A.
Second problem is the (arr[8]<250). The else condition is executing this as the result of the if block. The following line of code is grade="F" for it will always be set to F no matter what happened in the if block. Lose the (arr[8]<250).
With these two changes it should work as required.
Hint: Even for one line blocks within an if statement I prefer to wrap the block in {}. This way it is a lot easier to see what is going on (in the above case it would throw up a syntax error).

Categories

Resources