Setting div's height/width via javascript

**spirtokouto** · 04:24 PM

<html>
<title>
malakas
</title>
<body style="width:800px;height:600px;border:1px black solid;">

<script type="text/javascript">
var xmlDoc=null;
if (window.ActiveXObject)
{// code for IE
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation.createDocument)
{// code for Mozilla, Firefox, Opera, etc.
xmlDoc=document.implementation.createDocument(""," ",null);
}
else
{
alert('Your browser cannot handle this script');
}

if (xmlDoc!=null)
{
xmlDoc.async=false;
xmlDoc.load("note4.xml");

var x=xmlDoc.getElementsByTagName("item");

for (i=0;i<13;i++)
{

title = x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;

description = x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue;

score = x[i].getElementsByTagName("score")[0].childNodes[0].nodeValue;

document.write('<div id="mydiv" style="background:red">');
document.write(transform(score,"mydiv"));
document.write("<h3>"+title+"</h3>");
document.write("<br/>");
document.write(description);
document.write("<br/>");
document.write("Score : ");
document.write(score);
document.write("<br/>");
document.write("</div>");

}

}

function transform(scr,divname)
{
var div = document.getElementById(divname);

if(scr>0.7) {

div.style.height = 0.3*document.body.offsetHeight +'px';
div.style.width = 0.2*document.body.offsetWidth + 'px';
}

}

</script>

</body>
</html>

My problem is that my code changes the height/width of the first element only(with score>0.7) all the other elements-divs have the same height/width although some of them have score>0.7.
Why is that?
helppppppp pleaseeeeee!!!!!!!

**chrishirst** · 01-06-2009, 07:14 PM

IDs have to be unique.

**tripy** · 01-06-2009, 07:14 PM

Because, without looking in depth, you are not using the element name but it's id.
An id value should be unique, if not, the browser returns the first one he find starting from top.
You must give different id to each divs you create, as for the parameter you pass to the transform() call.

Or really use the name attribute, and use a call to getElementsByName('theName) to get back not 1 DOM element, but an array of DOM elements.
https://developer.mozilla.org/En/DOM...mentsByTagName

Edit: d.a.m.n, Chris beat me to it, once again...

**spirtokouto** · 08:31 PM

firstly thanks for your help so far!!!!!!
You mean i should have 13 different ids for my divs?

Is there an other way to do that?
Another mistake i noticed is that altough the first element has score=0.6 its height/width is modified!!!

**tripy** · 02:37 AM

Quote:

You mean i should have 13 different ids for my divs?

yes, or you should drop the id, and use the name and adapt your transform() function to get a list of the element with the same name and process them in a for loop.
Using DOM functions, your code would be written like:

Code:

//generate the divs
for(cptDiv=0;cptDiv<10;cptDiv++){
  newDiv=document.createElement('div');
  newDiv.name='myDiv'; //note it's .name, not .id that it's used here
  document.getElementsByTagName('body')[0].appendChild(newDiv);
}

function process(){
  var aryDivs=document.getElementsByName('myDiv'); //returns an array of 10 div's
  for(cptDiv=0;cptDiv<aryDivs.length;cptDiv++){
    elm=aryDivs[cptDiv]
    //Process your div here, working on "elm"
    ...
  }
}