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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    29
    Thanks
    4
    Thanked 1 Time in 1 Post

    .innerHTML and document.GetElementById

    I need help creating something hard.

    First I need to divs that change by ONE button and when they change they say two different things and must be onclick.

    The other thing is there will be 4 buttons. They start black and when you click one it turns grey and when you click another it turns gray and the other one that was last clicked turns back black and same with the other two.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,466
    Thanks
    23
    Thanked 634 Times in 633 Posts
    This is how to do the second question. It uses the javascript you named the question after
    .innerHTML and document.GetElementById
    and a static variable. If you need to change it, you should be able to. Also this should show you how to do the first question by yourself.

    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    	<title>New document</title>
    	<meta name="generator" content="TSW WebCoder 2010" />
    
    <script type="text/javascript">
    thecount = 0;
    function big(ident)
    {
    	document.getElementById(ident).style.backgroundColor = 'gray';
    	++thecount;
    		if(thecount>2)
    	{
    		document.getElementById('but_1').style.backgroundColor = 'black';
    		document.getElementById('but_2').style.backgroundColor = 'black';
    		document.getElementById('but_3').style.backgroundColor = 'black';
    		document.getElementById('but_4').style.backgroundColor = 'black';
    		thecount = 0;
    	}
    document.getElementById('here').innerHTML = thecount;
    }
    </script>
    
    </head>
    <body>
    <input type="button" value="color change" id="but_1" style="background-color:black;color:white;" onclick="big('but_1');" />
    <input type="button" value="color change" id="but_2" style="background-color:black;color:white;" onclick="big('but_2');" />
    <input type="button" value="color change" id="but_3" style="background-color:black;color:white;" onclick="big('but_3');" />
    <input type="button" value="color change" id="but_4" style="background-color:black;color:white;" onclick="big('but_4');" />
    <div id="here">numbers</div>
    </body>
    </html>

  • Users who have thanked sunfighter for this post:

    X888X (01-12-2012)

  • #3
    New Coder
    Join Date
    Jan 2012
    Posts
    29
    Thanks
    4
    Thanked 1 Time in 1 Post
    Close not not it please try to make it better

  • #4
    New Coder
    Join Date
    Jan 2012
    Posts
    29
    Thanks
    4
    Thanked 1 Time in 1 Post
    Look at the code yourself. http://scnse.tk/owen

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,466
    Thanks
    23
    Thanked 634 Times in 633 Posts
    You try to make it better. If you can't fix it to the way you want it, I'd drop the class.

  • #6
    New Coder
    Join Date
    Jan 2012
    Posts
    29
    Thanks
    4
    Thanked 1 Time in 1 Post
    I can't find a way to make it better first remove the numbers thing.

  • #7
    New Coder
    Join Date
    Jan 2012
    Posts
    29
    Thanks
    4
    Thanked 1 Time in 1 Post
    The number thing is the main thing that I don't want/like.

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,466
    Thanks
    23
    Thanked 634 Times in 633 Posts
    X888X the number thing was put there to show you what you need to know about your first question. I change the contents of a div:
    Code:
    <div id="here">numbers</div>
    By using a function the uses innerHTML:
    Code:
    document.getElementById('here').innerHTML = thecount;
    They are not needed for #2 but should be helpful to answer #1.

    So without them:
    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    	<title>New document</title>
    	<meta name="generator" content="TSW WebCoder 2010" />
    
    <script type="text/javascript">
    thecount = 0;
    function big(ident)
    {
    	document.getElementById(ident).style.backgroundColor = 'gray';
    	++thecount;
    		if(thecount>2)
    	{
    		document.getElementById('but_1').style.backgroundColor = 'black';
    		document.getElementById('but_2').style.backgroundColor = 'black';
    		document.getElementById('but_3').style.backgroundColor = 'black';
    		document.getElementById('but_4').style.backgroundColor = 'black';
    		thecount = 0;
    	}
    }
    </script>
    
    </head>
    <body>
    <input type="button" value="color change" id="but_1" style="background-color:black;color:white;" onclick="big('but_1');" />
    <input type="button" value="color change" id="but_2" style="background-color:black;color:white;" onclick="big('but_2');" />
    <input type="button" value="color change" id="but_3" style="background-color:black;color:white;" onclick="big('but_3');" />
    <input type="button" value="color change" id="but_4" style="background-color:black;color:white;" onclick="big('but_4');" />
    </body>
    </html>
    It also showed you what thecount variable was doing.

  • Users who have thanked sunfighter for this post:

    X888X (01-12-2012)

  • #9
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    Hi sunfighter,

    Pretty cool! It reminds me of the buttons on the old oscillating fan at my grandparents house.

    What could a person do with something like this?

    --Kevin

    .
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #10
    New Coder
    Join Date
    Jan 2012
    Posts
    29
    Thanks
    4
    Thanked 1 Time in 1 Post
    Its a big update for my website homepage. and Star I'm confused with this programming, could you maybe edit it for me?

  • #11
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,466
    Thanks
    23
    Thanked 634 Times in 633 Posts
    Quote Originally Posted by X888X View Post
    Its a big update for my website homepage. and Star I'm confused with this programming, could you maybe edit it for me?
    Edit it for what? It does what you want. Click a black button it goes gray. Do it again to any button and that turns gray. But click a third button and they all go back to black. That's what you wanted. Or is it?

    Did you want this?
    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    	<title>New document</title>
    	<meta name="generator" content="TSW WebCoder 2010" />
    
    <script type="text/javascript">
    function big(ident)
    {
    	document.getElementById('but_1').style.backgroundColor = 'black';
    	document.getElementById('but_2').style.backgroundColor = 'black';
    	document.getElementById('but_3').style.backgroundColor = 'black';
    	document.getElementById('but_4').style.backgroundColor = 'black';
    	document.getElementById(ident).style.backgroundColor = 'gray';
    }
    </script>
    
    </head>
    <body>
    <input type="button" value="color change" id="but_1" style="background-color:black;color:white;" onclick="big('but_1');" />
    <input type="button" value="color change" id="but_2" style="background-color:black;color:white;" onclick="big('but_2');" />
    <input type="button" value="color change" id="but_3" style="background-color:black;color:white;" onclick="big('but_3');" />
    <input type="button" value="color change" id="but_4" style="background-color:black;color:white;" onclick="big('but_4');" />
    </body>
    </html>
    Kevin I feel like I'm being shoved through that fan.
    Last edited by sunfighter; 01-10-2012 at 01:58 AM.

  • Users who have thanked sunfighter for this post:

    X888X (01-12-2012)

  • #12
    New Coder
    Join Date
    Jan 2012
    Posts
    29
    Thanks
    4
    Thanked 1 Time in 1 Post
    Please show me a expamle of the code on your site or something as I'm on a mobile device right now..

  • #13
    New Coder
    Join Date
    Jan 2012
    Posts
    29
    Thanks
    4
    Thanked 1 Time in 1 Post
    Yes like that. Now, can you add to divs that say something that you can make it say

  • #14
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,466
    Thanks
    23
    Thanked 634 Times in 633 Posts
    Email sent... Does this help:
    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    </head>
    <body>
    <input type="button" id="button1" value="change div" style="background-color:black;color:white;" onclick="document.getElementById('here').innerHTML = 'Hello<br />I love you<br />wont you tell me your name?';" />
    <div id="here">numbers</div>
    </body>
    </html>

  • Users who have thanked sunfighter for this post:

    X888X (01-12-2012)

  • #15
    New Coder
    Join Date
    Jan 2012
    Posts
    29
    Thanks
    4
    Thanked 1 Time in 1 Post
    Ok now how to make it work for the 4 buttons I got? Here the code I got so far.





    <!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" xml:lang="en" lang="en">
    <head>
    <title>New document</title>
    <meta name="generator" content="TSW WebCoder 2010" />

    <script type="text/javascript">
    function big(ident)
    {
    document.getElementById('but_1').style.backgroundColor = 'black';
    document.getElementById('but_2').style.backgroundColor = 'black';
    document.getElementById('but_3').style.backgroundColor = 'black';
    document.getElementById('but_4').style.backgroundColor = 'black';
    document.getElementById(ident).style.backgroundColor = 'gray';
    }
    </script>

    </head>
    <body>
    <input type="button" value="color change" id="but_1" style="background-color:black;color:white;" onclick="big('but_1');" />
    <input type="button" value="color change" id="but_2" style="background-color:black;color:white;" onclick="big('but_2');" />
    <input type="button" value="color change" id="but_3" style="background-color:black;color:white;" onclick="big('but_3');" />
    <input type="button" value="color change" id="but_4" style="background-color:black;color:white;" onclick="big('but_4');" />
    </body>
    </html>




    <input type="button" id="but_1" value="change div" style="background-color:black;color:white;" onclick="document.getElementById('here').innerHTML = 'Hello<br />I love you<br />wont you tell me your name?';" />
    <div id="here">numbers</div>


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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