Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts

    show/hide Div Tag

    ok trying to get a Div tag to show if something is True and hide if something is False

    JS
    Code:
    unction eToggle(anctag,darg) 
    {
     var ele = document.getElementById('Module1');
       var ele = document.getElementById('Module2');
       var ele = document.getElementById('Module3');
       var ele = document.getElementById('Module4');
    
      
      if("module1" + "module2" + "module3" + "module4" <40)
      {
        div.id.Failed = "block";
    	div.Failed = "Failed";
      }
      else 
      {
    	div.style.Passed = "block";
    	div.Passed = "show";
      }
    }

    HTML
    Code:
    <div id="Fail" class="hidden" style="display: none"><b><i>You will need to Repeat the Semester!</b>
    <br  />
    </div>
    
    <div id="Passed" class="hidden" style="display: none"> <img src="faces.png" width="50" height="50"><b><i> "Good Job you passed the Semster!"</b></div>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    div.Passed = "show";

    div.id.Failed = "block";

    document.getElementById("Fail").style.display = "block";

    You cannot give several variables the same name.

    Code:
    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) {  // items in quotes are literals, not variables
    document.getElementById("Fail").style.display = "block";
    }

    "If you can't explain it simply, you don't understand it well enough”
    “Everything should be as simple as it is, but not simpler.”
    - both quotes Albert Einstein (German born American Physicist who developed the special and general theories of relativity. Nobel Prize for Physics in 1921. 1879-1955)
    Last edited by Philip M; 03-01-2012 at 09:03 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Feb 2012
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts
    doesnt seem to be able to display the text..

    would it still display even if i set the Div Tag to Display None?


    i have already declared the Modules at the top of the JS

    Code:
    var module1 = document.getElementById('module1'); 
    	var module2 = document.getElementById('module2');
    	var module3 = document.getElementById('module3');
    	var module4 = document.getElementById('module4');
    would i still have to include the

    Code:
    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;
    Code:
    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) {  // items in quotes are literals, not variables
    document.getElementById("Fail").style.display = "block";
    }
    else 
    if (m1 + m2 + m3 + m4 >40){
    	document.getElementById("Passed").style.display = "block";
    }
    }

  • #4
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Are your module elements input text boxes or some other type of element. I am assuming they are input boxes.

    Below is the basic concept. You will need to validate the module values if they are inputted and you will need something (event) that calls showHideResults().

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <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('module1').value;
                    /*
                        Validate the above values here and convert from string to numbers
                     */
                    if(mod1Val + mod2Val < 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>
        </body>
    </html>
    You certainly shouldn't be using inline styles and you don't need the classes if those are the only 2 elements in the class.
    Last edited by webdev1958; 03-02-2012 at 05:22 AM.

  • #5
    New Coder
    Join Date
    Feb 2012
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts
    OK i got this working

    but its adding the Values and if all the values added is <40 it shows div Fail else it shows div Passed

    what i am looking for is not to Add the all Values but if i enter in less then 40 in one module text box and the rest are above 40 it should show Div Fail

    if all Module Boxes are above 40 show div Passed..

    what way do i need to go about the JS to get what im looking for

  • #6
    New Coder
    Join Date
    Feb 2012
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts
    got it working

    if ((m1 <40) || (m2 <40) ) {


  •  

    LinkBacks (?)


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •