JS: Warum geht das nicht? [Archiv]

BigRob

2010-12-15, 20:05:04

Hi,

könnte mir evtl. jemand einen tipp geben, warum die schleife nicht funktioniert? Sie wird wohl nur einmal durchlaufen.

var c_width = 10;
var c_max = 30;

function slide()
{
while(c_width < c_max)
{
takt = setTimeout("slide_in()",1000);
}}

function slide_in()
{
var counter = document.getElementById("counter").style;
if(c_width < c_max)
{c_width+=5;}
else {c_width = c_max;}
counter.width = c_width;
}

Außerdem:

warum geht das nicht:

var c_width = document.getElementById("counter").offsetWidth;

Schon mal danke!

darph

2010-12-15, 20:55:26

Hier mal zwei schnelle Möglichkeiten, wie du das machen kannst.

<html>
<head>
<style type="text/css">
#box {
width: 300px;
height: 15px;
background-color: magenta;
margin: 0px;
padding: 0px;
border: 0px;
overflow: hidden;
}

#counter {
width: 1px;
height: 15px;
margin: 0px;
padding: 0px;
border: 0px;
background-color: yellow;
}
</style>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>

<script type="text/javascript">
$(document).ready(function() {
$("#button").click(function() {
alert("nicht so hart!");
var $counter = $("#counter").width("1px");

var maxWidth = $("#box").width();
var curWidth = $("#counter").width();
var step = 5;

var interval = setInterval(function() {
if (curWidth > maxWidth) {
clearInterval(interval);
alert("done");
} else {
curWidth += step;
$counter.animate({
width : curWidth + "px"
}, 100);
}
}, 200);
});

$("#button2").click(function() {
var maxWidth = $("#box").width();

$("#counter").width("1px").animate({
width : maxWidth + "px"
}, 5000, function() {
alert("done");
});
});
});
</script>

</head>
<body>
<div id="box">
<div id="counter"></div>
</div>
<button id="button">click mich hart!</button>
<button id="button2">click auch hart!</button>
</body>
</html>

Versuch mal, durchzusteigen, wenn du Fragen hast, poste einfach. :)

Außerdem:

warum geht das nicht:

var c_width = document.getElementById("counter").offsetWidth;

Schon mal danke!

console.log(c_width) ;)