change width of a div dynamically
css, html, javascript, width
Solution
Don't do it the hard way. Get rid of the fixed width of the `inner` div (which is the cause of all that unnecessary JavaScript problems) and just solve it with help of a good shot of CSS. Even more, the inner div is technically superfluous. Here's an SSCCE, just copy'n'paste'n'run it:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2172338</title>
<style>
#carousel {
width: 150px;
height: 100px;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<div id="carousel">
<img src="http://sstatic.net/so/img/logo.png" width="250" height="61">
<img src="http://sstatic.net/so/img/logo.png" width="250" height="61">
<img src="http://sstatic.net/so/img/logo.png" width="250" height="61">
</div>
</body>
</html>
Problem
I am trying to change my "inner" div's width dynamically on the click that the images are changed (which works) with a similar script. I cannot get the script to work, any help fixing it, or changing it would be appreciated. I am a noob in javascript so please be nice ;-) ``` <script type="text/javascript"> function setBase(baseval) { var images = document.getElementById("mylist").getElementsByTagName("img"); for (var i = 0; i < images.length; i++) { images[i].src = baseval + ((i<9)?0+i:i) + ".jpg"; } } </script> <script type="text/javascript"> function setStyle(baseval) { var style = document.getElementById("inner").getElementsByTagName("div"); for (var i = 0; i < images.length; i++) { style[i].style = baseval + "px"; } } </script> </head> <body> <div id="mylist" style=" height: 481px; width: 700px; overflow-x: auto; "> <div id="inner" style="width: 7300px "> <img src="carousel_img/1/1.jpg" height="450" /> <img src="carousel_img/1/2.jpg" height="450" /> <img src="carousel_img/1/3.jpg" height="450" /> <img src="carousel_img/1/4.jpg" height="450" /> <img src="carousel_img/1/5.jpg" height="450" /> <img src="carousel_img/1/6.jpg" height="450" /> <img src="carousel_img/1/7.jpg" height="450" /> <img src="carousel_img/1/8.jpg" height="450" /> <img src="carousel_img/1/9.jpg" height="450" /> <img src="carousel_img/1/10.jpg" height="450" /> <img src="carousel_img/1/0.jpg" height="450" /> <img src="carousel_img/1/11.jpg" height="450" /> </div> </div> <p> <a href="#" onclick="setBase('carousel_img/1/'); setStyle('7300'); return false;">Set A</a> <a href="#" onclick="setBase('carousel_img/3/'); setStyle('6300'); return false;">Set B</a> </p> ```