www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 24

Thread: on click change css property

  1. #1
    Join Date
    Jun 2013
    Posts
    15

    on click change css property

    Hello, I've only just started learning Javascript and the below code isn't working any pointers would be greatly appreciated;

    I want to create and on click function which changes the .style.display = inline, as well as setting the other id's to display none.

    <script>

    $(document).ready(function() {



    document.getElementById("one").style.display="none";
    document.getElementById("two").style.display="none";
    document.getElementById("three").style.display="none";

    function myfunc()
    {
    if(id == top) {
    document.getElementById("one").style.display="inline";
    }
    else if

    (id == mid)
    document.getElementById("two").style.display="inline";

    else

    (id == bottom)
    document.getElementById("three").style.display="inline";
    return true;

    }
    });


    </script>



    <body >

    <p id="top" onclick="myfunc()">First Para</p>

    <p id="mid" onclick="myfunc()">2nd Para</p>

    <p id="bottom" onclick="myfunc()">Third Para</p><br />


    <p id="one">Displayed 1st para</p><br />

    <p id="two">Displayed 2nd para</p><br />

    <p id="three">Displayed 3rd para</p><br />


    </body>


    Thank you

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,672
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>123</title>
    <script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
    <style type="text/css">
    body{color:#000;background-color:#fff;font-family:'Bookman Old Style',Georgia,Verdana;font-size:32px;text-align:center;}
    #one,#two,#three{display:none;}
    </style>
    <script type='text/javascript'>
    $(document).ready(function() {
    var refs=[
    ['top','one'],
    ['mid','two'],
    ['bot','three']
    ];
    
    for(var i in refs){
    $('#'+refs[i][0]).click(function(){
    for(var j in refs){
    var disp=(jQuery.inArray($(this).attr('id'), refs[j]) == 0)?'block':'none';
    $('#'+refs[j][1]).css('display',disp);
    }
    });
    }
    });
    </script>
    </head>
    <body>
    <p id="top">First Para</p>
    <p id="mid">2nd Para</p>
    <p id="bot">Third Para</p>
    <br />
    <p id="one">Displayed 1st para</p>
    <br />
    <p id="two">Displayed 2nd para</p>
    <br />
    <p id="three">Displayed 3rd para</p>
    </body>
    </html>

  3. #3
    Join Date
    Jun 2013
    Posts
    15
    Thanks for the reply, could you please explain each line of code?

  4. #4
    Join Date
    Nov 2010
    Posts
    1,097
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <style>
    #one,#two,#three{display:none}
    </style>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    </head>
    <body>
    <p class="one" >First Para</p>
    <p class="two" >2nd Para</p>
    <p class="three" >Third Para</p><br />
    
    <p id="one">Displayed 1st para</p><br />
    <p id="two">Displayed 2nd para</p><br />
    <p id="three">Displayed 3rd para</p><br />
    <script type="text/javascript">
    $(document).ready(function() {
    var shown; 
    $("p").on("click", function (){
    if (shown){shown.hide()}
    var theone = $("#"+$(this).attr("class"));
    theone.show();
    shown=theone;
    	});
    });
    </script>
    
    </body>
    </html>

  5. #5
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,672
    Quote Originally Posted by Luke Fisher View Post
    Thanks for the reply, could you please explain each line of code?
    that would be a too long story. you ask what is not clear and i'll try to explain.
    btw, xelawho's code is much more elegant

  6. #6
    Join Date
    Jun 2013
    Posts
    15
    Thanks for both posts, ill use the 2nd one as advised from Padonak,

    Could you please go through this part of the code.

    Code:
    if (shown){shown.hide()}
    var theone = $("#"+$(this).attr("class"));
    theone.show();
    shown=theone;

  7. #7
    Join Date
    Jun 2013
    Posts
    15
    Trying to modify the code slightly so the button which has been clicked on (<p class="one" >First Para</p>) shows a different color

    Code:
    <script type="text/javascript">
     $(document).ready(function() {
     
     $("#one").hide();
     $("#two").hide();
     $("#three").hide();
    	 
    	 var shown;
    	 $("p").on("click", function () {
    		 if(shown) {shown.hide()}
    		 var theone = $("#" +$ (this).attr("class"));
    		 theone.show();
    		 shown = theone;
    		 $("." + $(this).css("color" , "red"));
     
    	 });
    	 
    	 else {
    		 $("." + $(this).css("color" , "black"));
    		 
    		 
    	 }
        
    });
    
    </script>
    Any ideas?

  8. #8
    Join Date
    Nov 2010
    Posts
    1,097
    Code:
    if (shown){shown.hide()} // if a div has been shown (which it won't have been the first time you click on something), hide it
    var theone = $("#"+$(this).attr("class")); // get the class name from the <p> that you clicked on and use it to refer to the <p> you want to show (because it has the same id)
    theone.show(); // show that <p>
    shown=theone; // store the shown <p> in a variable so we know to hide it the next time the function is called

  9. #9
    Join Date
    Nov 2010
    Posts
    1,097
    changing colors you can apply the same logic. Remember that in this case, $(this) refers to the <p> that was clicked on...

    Code:
    <script type="text/javascript">
    $(document).ready(function() {
    var shown; 
    var clicked;
    $("p").on("click", function (){
    if (shown){
    shown.hide()
    clicked.css("color","black");
    }
    var theone = $("#"+$(this).attr("class"));
    $(this).css("color","red");
    theone.show();
    clicked=$(this);
    shown=theone;
    	});
    });
    </script>

  10. #10
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,504
    Using a framework is not proper Javascript coding.

    Change
    Code:
    <p id="top" onclick="myfunc()">First Para</p>
    
    <p id="mid" onclick="myfunc()">2nd Para</p>
    
    <p id="bottom" onclick="myfunc()">Third Para</p><br />
    to
    Code:
    <p id="top" onclick="myfunc(this.id)">First Para</p>
    
    <p id="mid" onclick="myfunc(this.id)">2nd Para</p>
    
    <p id="bottom" onclick="myfunc(this.id)">Third Para</p><br />
    change myfunc to
    Code:
    function myfunc(x){
    	switch( x ){
    		case "top": document.getElementById("one").style.display="inline"; break;
    		case "mid": document.getElementById("two").style.display="inline"; break;
    		case "bottom": document.getElementById("three").style.display="inline"; break;
    		}
    }
    so now when one of your elements is clicked, the id ref gets passed to the myfunc function and the particular element you want changed will be changed
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  11. #11
    Join Date
    Nov 2010
    Posts
    1,097
    Quote Originally Posted by \\.\ View Post
    Using a framework is not proper Javascript coding.
    what does that mean?

    and if you're one of *those* guys, what are you doing using inline event handlers?

    and what happened to the "hiding" part of Luke's request?

  12. #12
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,504
    A frame work is JQuery, Prototype, MooTools, etc.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  13. #13
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,504
    What do you mean hiding?

    I proposed a different method, it is up to the OP to complete the job in any case.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  14. #14
    Join Date
    Nov 2010
    Posts
    1,097
    I know what a framework is - I was wondering what "proper" means in this context

  15. #15
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,504
    Exactly what it means, not proper javascript programming.

    Using a framework is not and never will be javascript programming.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles