So I have multiple divs with the same id 'stick'. I want to iterate through all these elements and give each a random height. here is what I tried:
<script type="text/javascript">
for(var i = 0; i < 47; i++) {
var rand = 200;
document.getElementsById('stick')[i].style.height= rand+'px';
}
</script>
This code doesn't work sadly. Am I missing something?
Thanks.
So I have multiple divs with the same id 'stick'. I want to iterate through all these elements and give each a random height. here is what I tried:
<script type="text/javascript">
for(var i = 0; i < 47; i++) {
var rand = 200;
document.getElementsById('stick')[i].style.height= rand+'px';
}
</script>
This code doesn't work sadly. Am I missing something?
Thanks.
Share Improve this question edited Mar 16, 2013 at 6:58 ThinkingStiff 65.4k30 gold badges147 silver badges241 bronze badges asked Mar 9, 2013 at 9:08 Duncan PalmerDuncan Palmer 2,91311 gold badges65 silver badges93 bronze badges3 Answers
Reset to default 5You should not add same id for more than one element.
Use class names. And document.getElemetsById is not a defined function, only document.getElementById (without "s") that should return one element.
HTML:
<div class="stick"> </div>
<div class="stick"> </div>
JS:
<script type="text/javascript">
var divs = document.getElementsByClassName('stick');
for(var i = 0; i < divs.length; i++) {
var rand = 200 * Math.random();
divs[i].style.height= rand+'px';
}
</script>
This may works. But I remend to use jQuery framework, for JavaScript coding, because these lines bee a simpler code in jQuery:
<script type="text/javascript">
$('.stick').each(function(){ //iterates all elements having stick class
$(this).height(200 * Math.random()); //inside the callback the 'this' is the current html element. etc ...
});
</script>
jQuery homepage: http://jquery./
Fast including to your website, just import the jQuery from CDN url, inside the head:
<head>
...
<script src="//ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
</head>
ID's should be pletely unique within the document. Change your ID's to unique values, and you can reference them individually. If you wish to act on a collection of elements, use the class tag to link them together. To read up on CSS Classes you can look at this documentation. This will help you understand the purpose of classes in HTML and CSS.
Your problem
getElementsByID() doesn't work. getElementByID() is the correct syntax.
So
document.getElementsById('stick')[i].style.height= rand+'px';
Will bee
document.getElementById('stick')[i].style.height= rand+'px';
You can't have multiple elements with the same id. id must be unique. You need to use class and retrieve your elements using class name. You could use jquery to assist you: var elements = $('.stick')
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745429447a4627325.html
评论列表（0条）