Variable GetElementByID?

Charlie8776 · 12-23-2011, 10:55 PM

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?

xelawho · 12-23-2011, 11:06 PM

Code:

document.getElementById('myid'+i)

where i is a variable, often changed by a for loop but that's up to you

Charlie8776 · 12-23-2011, 11:17 PM

Quote:

Originally Posted by xelawho

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;
}

xelawho · 12-23-2011, 11:46 PM

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?

Logic Ali · 12-24-2011, 12:19 AM

Quote:

Originally Posted by xelawho

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>

Charlie8776 · 12-24-2011, 01:50 AM

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%;
}

xelawho · 12-24-2011, 02:22 AM

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?

Charlie8776 · 12-24-2011, 02:32 AM

Quote:

Originally Posted by xelawho

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?

xelawho · 12-24-2011, 02:42 AM

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";
    }
}

Charlie8776 · 12-24-2011, 03:01 AM

Quote:

Originally Posted by xelawho

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

xelawho · 12-24-2011, 03:15 AM

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

Charlie8776 · 12-24-2011, 03:35 AM

Quote:

Originally Posted by xelawho

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;	
}

xelawho · 12-24-2011, 04:09 AM

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?

Charlie8776 · 12-24-2011, 04:34 AM

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()">