Object verwacht?

Status
Niet open voor verdere reacties.
C

cdiepenbroek

Gebruiker
Lid geworden
29 okt 2007
Berichten
6
Mensen,

De code hieronder werkt niet. Dat wil zeggen, ik krijg een javascript error Object Verwacht regel 29 (de input:button regel). Vreemd want bij andere scripts werkt het wel op deze manier.. Iemand enig idee wat ik fout doe? De bedoeling is dat het 'nieuwe venstertje' zichtbaar wordt en groeit naar zijn uiteindelijke grootte.

Code: 
<html>
	<head>
		<script type="text/javascript">
			function grow(that) {
				var box = document.getElementById(that);
				var targetHeight = box.style.height.split('px')[0];
				var targetWidth = box.style.width.split('px')[0];
				var currentHeight = 1;
				var currentWidth = 1;
				box.style.width = currentWidth + 'px';
				box.style.height = currentHeight + 'px';
				box.style.display = 'block';
				interval = window.setInterval(
					function {
						currentHeight++;
						currentWidth++;
						box.style.width = currentWidth + 'px';
						box.style.height = currentHeight + 'px';
						if(currentHeight == targetHeight) {
							window.clearInterval(interval);
						}
					}
				, 10);
			}
		</script>
	</head>
	<body>
		<div id="divv" style="display: none; width: 400px; height: 200px; border: 1px solid #000000; position: absolute; left: 20px; top: 20px;">Blaat</div>
		<input type="button" onclick="grow('divv');" value="Knop">
	</body>
</html>

Thanks!!
 
Laatst bewerkt:
Je bent vergeten de getimede functie een naam te geven.
Zo werkt hij wel:
PHP: 
interval = window.setInterval(
          function gelijkmatig() {
            currentHeight++;
            currentWidth++;
            box.style.width = currentWidth + 'px';
            box.style.height = currentHeight + 'px';
            if(currentHeight == targetHeight) {
              window.clearInterval(interval);
            }
          }
        , 10);
 
Klopt maar in javascript mag je ook functies zonder naam declareren. Daarbij werkt de functie met naam nog steeds niet... Het gaat al mis voor die functie uberhaupt aan bod komt. "var box = document.getElementById(that);" werkt al niet.
 
Laatst bewerkt:
:confused:

Bij mij wel (Opera en IE6)

PHP: 
<html>
  <head>
    <script type="text/javascript">
      function grow(that) {
        var box = document.getElementById(that);
        var targetHeight = box.style.height.split('px')[0];
        var targetWidth = box.style.width.split('px')[0];
        var currentHeight = 1;
        var currentWidth = 1;
        box.style.width = currentWidth + 'px';
        box.style.height = currentHeight + 'px';
        box.style.display = 'block';
        interval = window.setInterval(
          function gelijkmatig() {
            currentHeight++;
            currentWidth++;
            box.style.width = currentWidth + 'px';
            box.style.height = currentHeight + 'px';
            if(currentHeight == targetHeight) {
              window.clearInterval(interval);
            }
          }
        , 10);
      }
    </script>
  </head>
  <body>
    <div id="divv" style="display: none; width: 400px; height: 200px; border: 1px solid #000000; position: absolute; left: 20px; top: 20px;">Blaat</div>
    <input type="button" onclick="grow('divv');" value="Knop">
  </body>
</html>
 
Bij mij werkt 't ook in IE6, Firefox en Opera. :)

Nog een versie met percentages:
PHP: 
<html>
 <head>
  <script type="text/javascript">
   function grow(that) {
    var box = document.getElementById(that);
    var pHeight = parseInt(box.style.height) / 100;
    var pWidth = parseInt(box.style.width) / 100;
    box.style.width = '0px';
    box.style.height = '0px';
    box.style.display = 'block';
    var percent = 0;
    var interval = window.setInterval(
     function gelijkmatig() {
      percent++;
      box.style.width = percent * pWidth + 'px';
      box.style.height = percent * pHeight + 'px';
      if (percent == 100) { window.clearInterval(interval); };
      }
     ,10);
    };
  </script>
 </head>
 <body>
  <div id="divv" style="display: none; overflow: hidden; width: 400px; height: 200px; border: 1px solid #000000; position: absolute; left: 20px; top: 20px;">Blaat</div>
  <input type="button" onclick="grow('divv');" value="Knop">
 </body>
</html>
Er staat overflow: hidden; in de style om klein te kunnen beginnen. :)

En een script met globale variabelen:
PHP: 
   var box, pWidth, pHeight, percent;

   function gelijkmatig() {
    percent++;
    box.style.width = percent * pWidth + 'px';
    box.style.height = percent * pHeight + 'px';
    if (percent < 100) setTimeout('gelijkmatig()',10);
    };

   function grow(that) {
    box = document.getElementById(that);
    pHeight = parseInt(box.style.height) / 100;
    pWidth = parseInt(box.style.width) / 100;
    box.style.width = '0px';
    box.style.height = '0px';
    box.style.display = 'block';
    percent = 0;
    gelijkmatig();
    };


Vr.Gr. Egel.
 
Laatst bewerkt:
Die globalen bevallen me wel, denk dat ik daar eens mee aan de slag ga. Thanks iedereen!!!
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan