help with div Tag

Cork24 · 02-03-2012 5:47pm #1

Im trying to get this Working but im after trying 4 different ways and cant seem to get it to work, Ok i have a Button called Results

i have 4 Text Boxes and if a user enters in anything less then 40 in anyone of them it should show the Div Tag Failed other wise show the Div Tag Passed The Button should be Calling the Function but it is not showing up on the Page..

Any one know what i could do to fix this ?

        <style type="text/css">
            #Fail, #Passed {
                display: none;
            }
        </style>
        <script type="text/javascript">
            function showHideResults(){
                var mod1Val = document.getElementById('module1').value;
                var mod2Val = document.getElementById('module2').value;
                    var mod3Val = document.getElementById('module3').value;
   var mod4Val = document.getElementById('module4').value;
 
 if(mod1Val + mod2Val + mod3Val + mod4Val < 40){  //failed

                    document.getElementById('Fail').style.display='block';
                    document.getElementById('Passed').style.display='none';
                } else { //passed

                    document.getElementById('Fail').style.display='none';
                    document.getElementById('Passed').style.display='block';
                }
            }
        </script>
    </head>
    <body>
        <div id="Fail" ><b><i>You will need to Repeat the Semester!</i></b>
            <br  />
        </div>
        <div id="Passed"> 
            <img src="faces.png" width="50" height="50" />
            <b><i> "Good Job you passed the Semster!"</i></b>
        </div>
<type ="button" onclick="showHideResults()" value="Result" />
    </body>
</html>

onemorechance · 02-03-2012 6:36pm

<input type="button" onclick="showHideResults();" value="Result" />

Cork24 · 02-03-2012 6:48pm

tried

<input type="button" onclick="showHideResults();" value="Result"/>

i thought the ; could have being the problem.

also tried
var m1 = Number(document.getElementById('Module1').value) || 0;
var m2 = Number(document.getElementById('Module2').value) || 0;
var m3 = Number(document.getElementById('Module3').value) || 0;
var m4 = Number(document.getElementById('Module4').value) || 0;

smcelhinney · 02-03-2012 7:21pm

Do you need to parseInt() or parseFloat() them first?

onemorechance · 02-03-2012 7:48pm

You can use the ; to separate multiple function calls.

You can check if a method is called by using a browser js debugger or simply add an alert as the first line of the method: alert("function called");.

Use similar to see what values you have for your variables and elements.

If the Number function cannot create a number from the element value it will be 'NaN'.

Cork24 · 02-03-2012 7:55pm

I dont think i would need to use parseInt() that would be for a String to an Int..

Here is the Whole JS i have for this page..




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">
            #Fail, #Passed {
                display: none;
            }
        </style>


<script type='text/javascript'>


<!------------------------------------------------------- Start of Form Validation ---------------------------------------------------------------->
function formValidator(){
    // Make quick references to our fields
    var firstname = document.getElementById('firstname');
    var lastname = document.getElementById('lastname');
    var addr = document.getElementById('addr');
    var snumber = document.getElementById('snumber');
    var state = document.getElementById('state');
    var semester = document.getElementById('semester');
    var course1 = document.getElementById('course1');
    var course2 = document.getElementById('course2'); 
    var course3 = document.getElementById('course3');
    var course4 = document.getElementById('course4');
    var module1 = document.getElementById('module1'); 
    var module2 = document.getElementById('module2');
    var module3 = document.getElementById('module3');
    var module4 = document.getElementById('module4');
    
    
    
    // Check each input in the order that it appears in the form
    if(isAlphabet(firstname, "Please enter Your First Name")){
        if(isAlphabet(lastname, "Please enter Your Last Name")){
        if(isAlphanumeric(addr, "Numbers and Letters Only for Address")){
            if(isNumeric(snumber, "Please enter a valid Student Number")){
                if(madeSelection(state, "Please Choose a City")){
                if(isNumeric(semester, "Please enter a valid Semester Number")){
                    if(madeSelection(course1, "Please Choose a Module")){
                        if(isNumeric(module1, "Please enter a valid Module Mark")){
                            if(madeSelection(course2, "Please Choose a Module")){
                            if(isNumeric(module2, "Please enter a valid Module Mark ")){
                            if(madeSelection(course3, "Please Choose a Module")){
                                    if(isNumeric(module3, "Please enter a valid Module Mark")){
                                if(madeSelection(course4, "Please Choose a Module")){
                                                if(isNumeric(module4, "Please enter a valid Module Mark")){
                            return true;
               }
               }
               }
               }
               }
               }
               }
               }
               }
               }
               }
               }
               }
               }
    
    
    
    return false;
    
}
<!------------------------------------------------------- END OF Validation  ---------------------------------------------------------------->


<!------------- FUNCTION TO MAKE SURE TEXT BOXES ARE NOT EMPTY----------------->
function notEmpty(elem, helperMsg){
    if(elem.value.length == 0){
        alert(helperMsg);
        elem.focus(); // set the focus to this input
        return false;
    }
    return true;
}



<!------------FUNCTION TO MAKE SURE TEXT BOXES ARE ONLY FILLED WITH NUMBER ------------------->
function isNumeric(elem, helperMsg){
    var numericExpression = /^[0-9]+$/;
    if(elem.value.match(numericExpression)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}



<!--------------- FUNCTION TO MAKE SURE TEXT BOXES ONLY FILLED WITH LETTERS -------------------------->
function isAlphabet(elem, helperMsg){
    var alphaExp = /^[a-zA-Z]+$/;
    if(elem.value.match(alphaExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}




<!---------------- FUNCTION TO MAKE SURE TEXT BOXES ARE EITHER NUMBERS OR LETTERS ----------------------------->
function isAlphanumeric(elem, helperMsg){
    var alphaExp = /^[0-9a-zA-Z]+$/;
    if(elem.value.match(alphaExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}






    
<!--------------- FUNCTION TO MAKE SURE TEXT SELECTION IS MADE WITHING THE SELECT BOX -------------------------------------->
function madeSelection(elem, helperMsg){
    if(elem.value == "Please Choose"){
        alert(helperMsg);
        elem.focus();
        return false;
    }else{
        return true;
    }
}
</script>





<!------------------------ FUNCTION TO GRADE ------------------------------------>
<script type='text/javascript'>
function show(which) {
var mark =  parseInt(which.value,10) || 0;    // trap non-numeric entries, make number integer
if (mark >100) {
alert("Please Enter between 0 & 100 !");
which.value = mark; } // write it back to the field      
else if (mark <=100){
var mod = which.id;
var grade = "Failed";
if (mark >=40) {grade = "D"}
if (mark >=60) {grade = "C"}
if (mark >=78) {grade = "B"}
if (mark >=85) {grade = "A"}
if (mark >=93) {grade = "A+"}
alert ("Your grade for " + mod + " is " + grade);
}
}



</script>

<!------------------------ SHOW PASS OR FAIL  ------------------------------------>
<script type='text/javascript'>
function showHideResults(){
     var m1 = Number(document.getElementById('Module1').value) || 0;
     var m2 = Number(document.getElementById('Module2').value) || 0;
     var m3 = Number(document.getElementById('Module3').value) || 0;
     var m4 = Number(document.getElementById('Module4').value) || 0;
             
             
             
                if (m1 + m2 + m3 + m4 < 40) { //failed
                    document.getElementById('Fail').style.display='block';
                    document.getElementById('Passed').style.display='none';
                } else { //passed
                    document.getElementById('Fail').style.display='none';
                    document.getElementById('Passed').style.display='block';
                }
            }
        </script>


    </head>

and here is a slice of the input box.

<select id='course4'>
                <option>Please Choose</option>
                <option value="c">C++</option>
                <option value="java">Java 1</option>
                <option value="java2">Java 2</option>
                <option value="hard">Computer HardWare</option>
                <option value="data">DataBase System 1</option>
                <option value="data2">DataBase System 2</option>
                <option value="system">System Administration 1</option>
              </select><br />
   <input type='text'  size = "3" maxlength = "3" id='module4' onblur = "show(this)"   placeholder="Enter Module Results"/>
                 </p>
                 
                 <p>
<div id="Fail" ><b><i>You will need to Repeat the Semester!</b>
<br  />
</div>

<div id="Passed"> <img src="faces.png" width="50" height="50"><b><i> "Good Job you passed the Semster!"</b></div>


           </p>
</fieldset>
              </p>
  <input type='submit' value='Sumbet' /><input type='reset' value="Reset"  /> 
<input type="button"  onclick="showHideResults();" value="Result"/>
  
  </form>

Cork24 · 02-03-2012 7:59pm

ok i place a alert inside the Function

which worked i worked down and place and different one here and that was never called

script type='text/javascript'>
function showHideResults(){
    alert(" I am Here");
             
     var m1 = Number(document.getElementById('Module1').value) || 0;
     var m2 = Number(document.getElementById('Module2').value) || 0;
     var m3 = Number(document.getElementById('Module3').value) || 0;
     var m4 = Number(document.getElementById('Module4').value) || 0;
             
    
              alert(" I am Here Now ");

                if (m1 + m2 + m3 + m4 < 40) { //failed
                    document.getElementById('Fail').style.display='block';
                    document.getElementById('Passed').style.display='none';
                } else { //passed
                    document.getElementById('Fail').style.display='none';
                    document.getElementById('Passed').style.display='block';
                }
            }
        </script>

onemorechance · 02-03-2012 8:14pm

If the second one is not called then there is an error between.

Comment out all the variables.

Add another alert: alert(document.getElementById('Module1').value);

If this does not display the value, look if .value is correct; I'm not sure what methods an Element has, but some browsers may do it differently.

Anyway, start from there, work up to using the Number function etc.

Also, I don't think having an OR will work on the variable assignment; Number will return a number or 'NaN'.

Cork24 · 02-03-2012 8:20pm

the alert(document.getElementById('Module1').value); didnt work so its something wrong with the whole function,,

but what is the question

Cork24 · 02-03-2012 8:31pm

onemorechance · 02-03-2012 8:31pm

Do you have an element with an id of 'Module1'?

Is it an element such as an input which has a value set?

Cork24 · 02-03-2012 8:33pm

its just a Text Box which takes in the int

onemorechance · 02-03-2012 8:36pm

Cork24 wrote: »

<input type='text' size = "3" maxlength = "3" id='module1' onblur = "show(this)" placeholder="Enter Module Results"/>

Possibly it's that the id here has lower-case 'm' while you reference upper-case 'M' in the js.

Also it has not value by default so it needs to be set in the field in the web browser, or by js.

Cork24 · 02-03-2012 8:43pm

cheers that was half the problem its not showing...

but i entered in 40, 30, 21, 67 that should show the Div Tag Fail

but it showed the Div Tag Passed

when i entered in 1, 1, 1, 1 It showed the Div Tag Failed

I think since i have if (m1 + m2 + m3 + m4 < 40) its Adding all the Values

what other way could i fix this ?

onemorechance · 02-03-2012 8:53pm

I don't understand . . .

I think since i have if (m1 + m2 + m3 + m4 < 40) its Adding all the Values

Using the '+' operator on number values will sum them . . .

40 + 30 + 21 + 67 is greater than 40

1 + 1 + 1 + 1 is not;

I'm not sure what you want to do if it's not to add all the numbers . . .

Cork24 · 02-03-2012 8:58pm

Yes i dont want to add all the Numbers up..

if i pass all but one exam it should show the Div Tag Failed...

so if i get 67 88 93 but fail one by getting 22 it should show you have to repeat the semester...

onemorechance · 02-03-2012 9:08pm

Cork24 wrote: »

Yes i dont want to add all the Numbers up..

if i pass all but one exam it should show the Div Tag Failed...

so if i get 67 88 93 but fail one by getting 22 it should show you have to repeat the semester...

You can use multiple OR:

if ((w < 40) || (x < 40) || (y < 40) || (z < 40) ) {}

Cork24 · 02-03-2012 9:14pm

thanks,, you saved me 1 day looking at the code i was going blind i was looking at it so hard...

cant image how i over looked the cap M and the small m forgot that JS is case sensitive

help with div Tag

Comments