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 8 of 8
  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Replacing getElementById

    I don't know if replacement is necessary, but anyway. Basically, I have a code (see below) which sets up a variable as the Id of a specified element. My problem is, I need the variable to be whatever the user clicks on, rather than a set element, as there will be four of these clickable elements on the page. I'm assuming I'll have to remove getElementById and replace it, possibly with some kind of array code, but I'm not sure how to go about that. Any ideas?

    Code:
    <script type="text/javascript">
    	window.onload = function () 
    	{
    	var bob = document.getElementById('test2');
    	if (bob) 
    		{
    		bob.className = 'unactive';
    		bob.firstChild.onclick = function() 
    			{
    			if(this.parentNode.className == 'unactive') {
    			this.parentNode.className = 'active';
    			} 
    			else 
    				{
    				this.parentNode.className = 'unactive';
    				}
    			}
    		}
    	};
    </script>

  • #2
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not sure I have followed you here but i'd do it a little more like this....

    Code:
    <script>
    function changeCcls(id)
    {
    	var cls = document.getElementById(id).className;
    	if(cls == 'unactive'){
    		document.getElementById(id).className= 'active';
    	}else{
    		document.getElementById(id).className= 'unactive';
    	}
    }
    
    </script>
    <style>
    .active{color:red;}
    .unactive{color:blue;}
    </style>
    <div id='1' class='unactive' onmouseover='changeCcls("1")' onmouseout='changeCcls("1")'>123</div>
    <div id='2' class='unactive' onmouseover='changeCcls("2")' onmouseout='changeCcls("2")'>123</div>
    <div id='3' class='unactive' onmouseover='changeCcls("3")' onmouseout='changeCcls("3")'>123</div>
    But yes you could just use an array and run through that see if it has the id you want to accept then run the code... all up to you really.

    I hope that helps.

    edit//

    I should have mentioned if you just want this as a class change you could do it with css only.

    Code:
    <style>
    div{padding:10px}
    div:hover{color:white; background-color:#444;}
    </style>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    just add a class and change div to .classname and saves lots of lines.
    Last edited by reflect; 07-04-2012 at 09:14 PM. Reason: Improved

  • #3
    New Coder
    Join Date
    Jul 2012
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I should have explained that better; I'm not trying to change the look of the div, I'm trying to change its size. I'm also trying to get it to work when the div is clicked, not when its moused over. The css for that would, as you pointed out, be absurdly simple.

    The problem is that I want the script to apply to multiple div elements, and it is currently only able to work for one, because of getElementById. I don't know what to replace that with.

    EDIT: what do you mean by change div to .classname? Where would that change be implemented?
    Last edited by Xmonster; 07-05-2012 at 05:52 AM.

  • #4
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    328
    Thanks
    9
    Thanked 49 Times in 48 Posts
    I think you have to have those elements having something in common, e.g. having same class name equals to "test2":
    PHP Code:
    <div class="test2">
      <
    div>Bob</div>
      ...
    </
    div>
    <
    div class="test2">
      <
    div>Jane</div>
      ...
    </
    div
    And your new script may look like the following (untested):
    PHP Code:
    <script type="text/javascript">
        
    window.onload = function (){
            var 
    bobs document.getElementsByTagName('div');
            if (
    bobs.length 0){
                for (var 
    i=0i<bobs.lengthi++){
                    if (
    bobs[i].className == 'test2'){
                        
    // ... install click handlers and/or classname manipulations here.
                    
    }
                }
            }
        };
    </script> 
    Last edited by hdewantara; 07-05-2012 at 03:00 PM.

  • #5
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    It's easy to do this but it's not advisable to use .firstChild.

    Can you show an example of your markup?

  • #6
    New Coder
    Join Date
    Jul 2012
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The entire code looks like this;

    Code:
    <style type="text/css">
    body {
    background-image:url(images/background-grid.jpg);
    background-repeat:repeat-y,-x;
    }
    #test {
    background-color :white;
    color : #FFF;
    height : 20px;
    overflow : hidden;
    width : 240px;
    border-top-right-radius:10px;
    border-top-left-radius:10px;
    box-shadow: 2px 2px 2px 2px #888888;
    -moz-transition:1.5s;
    }
    #test.unactive {
    height : 20px !important;
    overflow : hidden !important;
    }
    #test.active {
    height :120;
    margin-left:50px;
    margin-top:50px;
    border-radius:10px;
    }
    #test.active #tabtop {
    background-color:#00054C;
    border-top-right-radius:10px;
    border-top-left-radius:10px;
    color:#ECC223;
    }
    #tabtop {
    background-color:#359ABC;
    height:20px;
    border-top-right-radius:10px;
    border-top-left-radius:10px;
    }
    #tabtop:hover {
    background-color:#00054C;
    border-top-right-radius:10px;
    border-top-left-radius:10px;
    color:#ECC223;
    }
    #test h2 {
    cursor : pointer;
    font : bold 9pt/20px sans-serif;
    height : 20px;
    margin : 0;
    margin-left:20px;
    padding : 0 10px;
    }
    #test p {
    margin-top:2px;
    margin-bottom:0;
    margin-left:5px;
    font:10px arial, sans-serif;
    color:#205C71;
    vertical-align:top;
    text-align:left;
    }
    ul {
    list-style:none;
    float:left;
    margin-right:5px;
    margin:0;
    vertical-align:top;
    margin-left:-10px;
    margin-top:7px;
    }
    li {
    text-align:left;
    font:12px arial, sans-serif;
    color:#359ABC;
    margin-top:3px;
    }
    
    
    #test2 {
    background-color :white;
    color : #FFF;
    height : 20px;
    overflow : hidden;
    width : 240px;
    border-top-right-radius:10px;
    border-top-left-radius:10px;
    box-shadow: 2px 2px 2px 2px #888888;
    -moz-transition:1.5s;
    }
    #test2.unactive {
    height : 20px !important;
    overflow : hidden !important;
    }
    #test2.active {
    height :120;
    margin-left:50px;
    margin-top:50px;
    border-radius:10px;
    }
    #test2.active #tabtop {
    background-color:#00054C;
    border-top-right-radius:10px;
    border-top-left-radius:10px;
    color:#ECC223;
    }
    #test2 h2 {
    cursor : pointer;
    font : bold 9pt/20px sans-serif;
    height : 20px;
    margin : 0;
    margin-left:20px;
    padding : 0 10px;
    }
    </style>
    
    <script type="text/javascript">
    	window.onload = function () 
    	{
    	var bob = document.getElementById('test2');
    	if (bob) 
    		{
    		bob.className = 'unactive';
    		bob.firstChild.onclick = function() 
    			{
    			if(this.parentNode.className == 'unactive') {
    			this.parentNode.className = 'active';
    			} 
    			else 
    				{
    				this.parentNode.className = 'unactive';
    				}
    			}
    		}
    	};
    </script>
    
    <title>Test</title>
    <div id="test"><div name="second" id="tabtop"><h2>technologies</h2></div>
    	
    	<p>supported technologies:</p>
    	<ul>
    		<li>sql</li>
    		<li>xslt</li>
    		<li>tomcat</li>
    	</ul>
    	<ul>
    		<li>html</li>
    		<li>xml<li>
    		<li>java</li>
    	</ul>
    	<ul>
    		<li>css</li>
    		<li>javascript</li>
    		<li>xhtml</li>
    	</ul>
    
    </div>
    <br/>
    <div id="test2"><div id="tabtop"><h2>technologies</h2></div>
    	
    	<p>supported technologies:</p>
    	<ul>
    		<li>sql</li>
    		<li>xslt</li>
    		<li>tomcat</li>
    	</ul>
    	<ul>
    		<li>html</li>
    		<li>xml<li>
    		<li>java</li>
    	</ul>
    	<ul>
    		<li>css</li>
    		<li>javascript</li>
    		<li>xhtml</li>
    	</ul>
    
    </div>

  • #7
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Just change the script block to this:

    Code:
    <script type="text/javascript">
    
    window.onload = function () 
    {
       setupDivs( "test", "test2" );     
    };
    
    function setupDivs( )
    {
      var bob, args = arguments;
      
      for( var i = 0; arguments[ i ]; i++ )
      {
        bob = document.getElementById( arguments[ i ] );
      
        if (bob) 
        {
          bob.className = 'unactive';
          bob.getElementsByTagName( '*' )[0].onclick = f;
        }
      }
      
      function f() 
      {
       this.parentNode.className =  (this.parentNode.className == 'unactive') ? 'active' : 'unactive' ;      
      }      
    }
    
    </script>

  • #8
    New Coder
    Join Date
    Jul 2012
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ali, you are awesome.


  •  

    Posting Permissions

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