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 14 of 14
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    17
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Variable GetElementByID?

    Hi, quick question:

    Code:
    function x() {
    	document.getElementById('myid').width += 200;
    }
    This works for "myid", but my document contains "myid1", "myid2", "myid3", and so forth. How can I alter the script to effect every instance of "myid" followed by a number?

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,773
    Thanks
    55
    Thanked 518 Times in 515 Posts
    Code:
    document.getElementById('myid'+i)
    where i is a variable, often changed by a for loop but that's up to you

  • #3
    New Coder
    Join Date
    Dec 2011
    Posts
    17
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    Code:
    document.getElementById('myid'+i)
    where i is a variable, often changed by a for loop but that's up to you
    Thanks! I don't know how to write that loop. It is like the script below?

    Code:
    var i = [0-9];
    
    function x() {
    	document.getElementById('myid'+i).width += 200;
    }

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,773
    Thanks
    55
    Thanked 518 Times in 515 Posts
    no.

    first you have to figure out how many elements you're working with. If you're working with every div on your page, it's simple using document.getElementsByTagName("div")

    then you loop through them. here's a simple example:

    Code:
    <body>
    <input type="button" value ="change divs" onclick="changeDivs()"/>
    <div id="myid0" style="background-color:red; width:100px">one</div>
    <div id="myid1" style="background-color:red; width:100px">two</div>
    <div id="myid2" style="background-color:red; width:100px">three</div>
    <script type="text/javascript">
    function changeDivs() {
    var divs=document.getElementsByTagName("div")
    for(var j = 0; j<divs.length; j++){
    document.getElementById('myid'+j).style.width= 200+"px";
        }
    }	
    </script>
    </body>
    but I assume from your += that what you want to do is to make them 200 pixels wider than what they already are, and what they already are need not be defined. is that the case?

  • #5
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by xelawho View Post
    Code:
    <script type="text/javascript">
    function changeDivs() {
    var divs = document.getElementsByTagName("div")
    for(var j = 0; j<divs.length; j++){
    document.getElementById('myid'+j).style.width= 200+"px";
        }
    }	
    </script>
    </body>
    That's rather fragile in that it breaks if any other unrelated divs are added to the page. Better to test the presence of IDs in the expected sequence.

    Code:
    <script type="text/javascript">
    
    function changeDivs() 
    {
      for( var j = 0, elem; ( elem = document.getElementById( 'myid' + j ) ); j++ )
        elem.style.width = parseInt( elem.style.width ) + 200 + "px";
    }	
    
    </script>
    Actually this can be made more robust by removing the need for all IDs in the sequence to be present, simply by testing all divs for the right ID format:
    Code:
    <script type="text/javascript">
    
    function changeDivs() 
    {
      var divs = document.getElementsByTagName( "div" );
    
      for( var j = 0, elem; ( elem = divs[ j ] ); j++ )
      {
        if( /^myid\d+/.test( elem.id ) )
          elem.style.width = parseInt( elem.style.width ) + 200 + "px";
      }
    
    }
    
    </script>
    Last edited by Logic Ali; 12-24-2011 at 12:51 AM.

  • #6
    New Coder
    Join Date
    Dec 2011
    Posts
    17
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Wow, this is getting rather complicated. Thank you for your help. I'd like to keep things simple, where possible. I'm trying to get around the ElementByID restrictions with the code below, but it doesn't work:

    Code:
    function plus() {
    	document.getElementsByTagName('img').width += 200;
    }
    
    function minus() {
    	document.getElementsByTagName('img').width -= 200;
    }
    Code:
    <a href="javascript:plus();">+</a>
    <a href="javascript:minus();">-</a>
    
    <img src="index/img/1.png" class="testclass">
    Code:
    .testclass {
    	border-bottom: 1px solid #BCBCBC;
    	border-right: 1px solid #BCBCBC;
    	border-left: 1px solid #EAEAEA;
    	border-top: 1px solid #EAEAEA;
    	margin-bottom: 25px;
    	width: 60%;
    }
    Last edited by Charlie8776; 12-24-2011 at 02:12 AM.

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,773
    Thanks
    55
    Thanked 518 Times in 515 Posts
    no, that's not going to work - getElementsByTagName returns a collection, even if there is only one element in the collection. You can select it like this:

    Code:
    function plus() {
    thepic=document.getElementsByTagName('img')[0]
    thepic.style.width= parseInt(thepic.style.width)+200+"px";
    }
    
    function minus() {
    thepic=document.getElementsByTagName('img')[0]
    thepic.style.width= parseInt(thepic.style.width)-200+"px";
    }
    but that will only work on the first image on your page. do you want to be able to resize all the images with one button click, or to have multiple buttons, each of which resize a specific image?

  • Users who have thanked xelawho for this post:

    Charlie8776 (12-24-2011)

  • #8
    New Coder
    Join Date
    Dec 2011
    Posts
    17
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    but that will only work on the first image on your page. do you want to be able to resize all the images with one button click, or to have multiple buttons, each of which resize a specific image?
    Aha! Brilliant. I'm looking to resize all the images on the page with a single "+" button and a single "-" button. Is that easy to accomplish?

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,773
    Thanks
    55
    Thanked 518 Times in 515 Posts
    depends what you call difficult. you have to loop through them all, but that's no big deal:

    Code:
    function plus() {
    var pics=document.getElementsByTagName('img');
    for(var j = 0; j<pics.length; j++){
    thepic=pics[j];
    thepic.style.width= parseInt(thepic.style.width)+200+"px";
        }
    }
    
    function minus() {
    var pics=document.getElementsByTagName('img');
    for(var k = 0; k<pics.length; k++){
    thepic=pics[k];
    thepic.style.width= parseInt(thepic.style.width)-200+"px";
        }
    }

  • #10
    New Coder
    Join Date
    Dec 2011
    Posts
    17
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    depends what you call difficult. you have to loop through them all, but that's no big deal:

    Code:
    function plus() {
    var pics=document.getElementsByTagName('img');
    for(var j = 0; j<pics.length; j++){
    thepic=pics[j];
    thepic.style.width= parseInt(thepic.style.width)+200+"px";
        }
    }
    
    function minus() {
    var pics=document.getElementsByTagName('img');
    for(var k = 0; k<pics.length; k++){
    thepic=pics[k];
    thepic.style.width= parseInt(thepic.style.width)-200+"px";
        }
    }
    Hmm, that doesn't seem to work quite right.

    Code:
    Message: Invalid argument.
    Line: 5
    Char: 1

  • #11
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,773
    Thanks
    55
    Thanked 518 Times in 515 Posts


    looks ok to me. What's on line 5 of your code? Or better, can we see your full code?

  • #12
    New Coder
    Join Date
    Dec 2011
    Posts
    17
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post


    looks ok to me. What's on line 5 of your code? Or better, can we see your full code?
    Sure, no problem.

    Code:
    function plus() {
    var pics=document.getElementsByTagName('img');
    for(var j = 0; j<pics.length; j++){
    thepic=pics[j];
    thepic.style.width= parseInt(thepic.style.width)+200+"px";
        }
    }
    
    function minus() {
    var pics=document.getElementsByTagName('img');
    for(var k = 0; k<pics.length; k++){
    thepic=pics[k];
    thepic.style.width= parseInt(thepic.style.width)-200+"px";
        }
    }
    Code:
    <!DOCTYPE html>
    <html>
    
    	<head>
    	<meta charset="utf-8">
    		<title>Viewer</title>
    <link rel="stylesheet" href="index/css/index.css" type="text/css">
    <script type="text/javascript" src="index/js/resize.js"></script>
    
    </head>
    <body oncontextmenu="return false;">
    
    <div id="wrapper">
    	<div id="banner">
        	<div id="tools">
            	<a href="javascript:plus();"><div id="zoom-in"></div></a>
                <a href="javascript:minus();"><div id="zoom-out"></div></a>
                <div id="outline"></div>
                <a href="index/pdf/full.pdf"><div id="save"></div></a>
            </div>
        </div>
        <div id="content"><center>
    
    <a name="1"></a><img src="index/img/1.png" class="pdfimg"><br />
    <a name="2"></a><img src="index/img/2.png" class="pdfimg"><br />
    <a name="3"></a><img src="index/img/3.png" class="pdfimg"><br />
    <a name="4"></a><img src="index/img/4.png" class="pdfimg"><br />
    <a name="5"></a><img src="index/img/5.png" class="pdfimg"><br />
    <a name="6"></a><img src="index/img/6.png" class="pdfimg"><br />
    <a name="7"></a><img src="index/img/7.png" class="pdfimg"><br />
    <a name="8"></a><img src="index/img/8.png" class="pdfimg"><br />
    <a name="9"></a><img src="index/img/9.png" class="pdfimg"><br />
    <a name="10"></a><img src="index/img/10.png" class="pdfimg">
    
        </center></div>    
        <div id="logo"></div>
    </div>
    
    </body>
    </html>
    Code:
    html {
    	height: 100%;
    }
    
    body {
    	margin: 0px;
    	height: 100%;
    	background-color: #FFFFFF;
    }
    
    img {
    	border: none;
    	-ms-interpolation-mode : bicubic;
    }
    
    a:link,a:visited,a:active {
    	color: #005DAA;
    	text-decoration: none;
    }
    
    a:hover {
    	color:#333333;
    	text-decoration: underline;
    }
    
    #wrapper {
    	position: absolute;
    	height: 100%;
    	width: 100%;
    	left: 0;
    	top: 0;	
    }
    
    #banner {
    	position: absolute;
    	background-color: #F4F4F4;
    	height: 188px;
    	width: 100%;
    	left: 0;
    	top: 0;	
    }
    
    #content {
    	overflow: scroll;
    	position: absolute;
    	padding: 50px 0 25px 0;
    	top: 188px;
    	bottom: 0;
    	right: 0;
    	left: 0;
    }
    
    div[id*="outlinepage"] {
    	border: 1px solid #BCBCBC;
    	width: 100px;
    }
    
    .pdfimg {
    	border-bottom: 1px solid #BCBCBC;
    	border-right: 1px solid #BCBCBC;
    	border-left: 1px solid #EAEAEA;
    	border-top: 1px solid #EAEAEA;
    	margin-bottom: 25px;
    	width: 60%;
    }
    
    #logo {
    	position: absolute;
    	background: url(../img/logo.png) top left no-repeat;
    	height: 240px;
    	width: 350px;
    	left: 0;
    	top: 0;
    }
    
    #tools {
    	position: absolute;
    	background: url(../img/tools.png) top left no-repeat;
    	height: 45px;
    	width: 204px;
    	bottom: 35px;
    	right: 40px;
    }
    
    #zoom-in {
    	position: absolute;
    	height: 45px;
    	width: 22px;
    	left: 0;
    	top: 0;	
    }
    
    #zoom-out {
    	position: absolute;
    	height: 45px;
    	width: 22px;
    	left: 54px;
    	top: 0;	
    }
    
    #outline {
    	position: absolute;
    	height: 45px;
    	width: 32px;
    	left: 110px;
    	top: 0;	
    }
    
    #save {
    	position: absolute;
    	height: 45px;
    	width: 26px;
    	left: 175px;
    	top: 0;	
    }
    
    .off {
    	display: none;	
    }
    
    .on {
    	display: inline;	
    }
    
    .handy {
    	cursor: pointer;
    	cursor: hand;	
    }

  • #13
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,773
    Thanks
    55
    Thanked 518 Times in 515 Posts
    now I'm even more confused

    This works:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style>
    
    .testclass {
    	border-bottom: 1px solid #BCBCBC;
    	border-right: 1px solid #BCBCBC;
    	border-left: 1px solid #EAEAEA;
    	border-top: 1px solid #EAEAEA;
    	margin-bottom: 25px;
    	width: 60%;
    }
    
    </style>
    </head>
    
    <body>
    <a href="#" onclick="plus()">+</a>
    <a href="#" onclick='minus()'>-</a>
    
    <img src="index/img/1.png">
    
    <script type="text/javascript">
    
    
    function plus() {
    var pics=document.getElementsByTagName('img');
    for(var j = 0; j<pics.length; j++){
    thepic=pics[j];
    thepic.width=thepic.width+200;
        } 
    }
    
    function minus() {
    var pics=document.getElementsByTagName('img');
    for(var k = 0; k<pics.length; k++){
    thepic=pics[k];
    thepic.width=thepic.width-200;
        }
    }
    </script>
    </body>
    </html>
    but if you add a classname to the image for css styling it stops working. But if you specify height and width attributes in the img tag it does work...

    W
    T
    F
    ?

    since when could you not override css with the DOM?

    sorry, Charlie, but this is where I jump off... maybe someone who knows what's going on would like to have a shot at it?

  • Users who have thanked xelawho for this post:

    Charlie8776 (12-24-2011)

  • #14
    New Coder
    Join Date
    Dec 2011
    Posts
    17
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks, xelawho. After you described your tests, I made some changes. First, rather than assign a class to each image tag, I simply added those properties under the IMG tag in the CSS file.

    Code:
    img {
    	border: none;
    	-ms-interpolation-mode : bicubic;
    	border-bottom: 1px solid #BCBCBC;
    	border-right: 1px solid #BCBCBC;
    	border-left: 1px solid #EAEAEA;
    	border-top: 1px solid #EAEAEA;
    	margin-bottom: 25px;
    }
    Then I added a third function to the script, which sets the initial size of the images upon page load. And it works! Although this method requires setting the initial size via pixels rather than by percent (but beggars can't be choosers - I invite someone to address the issue, if you can).

    Code:
    function pagesize () {
    var pics=document.getElementsByTagName('img');
    for(var k = 0; k<pics.length; k++){
    thepic=pics[k];
    thepic.width=900;
    	}
    }
    Code:
    <body onload="pagesize()">


  •  

    Tags for this Thread

    Posting Permissions

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