Retour à Forum de programmation

Ce javascript ne fonctionne pas, et de son de mon premier essai

  • mindfullsilence
  • Professor
  • Professor
  • Avatar de l’utilisateur
  • Inscription: Aoû 04, 2008
  • Messages: 846
  • Status: Offline

Message Mai 12th, 2009, 4:45 pm

Ive jamais traité dans JS parce que, pour être honnête, j'ai eu peur de le prendre sur - Im pas un programmeur par tout moyen.

Im essayant d'obtenir un div à obtenir progressivement afin qu'il ressemble à une animation. Im montrant pas d'erreur dans le code de sorte Im pensant peut-être quelque chose d'im leaving que je n'ai pas pensé ou entendu parler.
Code: [ Select ]
<html>
<head>
<script type="text/javascript">
function makeBig()
{
  var grow;
 
    if (document.documentElement || document.all)
    {
        grow = document.getElementById(the_div);
        grow.style.height = grow.style.height + 5;
    }
 
    if (grow.style.height < 200)
    {
        setTimeout("makeBig();", 10);
    }
}
</script>
 
<style type="text/css">
#the_div {
    background-image:url(bg_image.jpg);
    width: 200;
    height: 0;
}
</style>
 
</HEAD>
<BODY>
 
<form>
<input name="submit" type="button" value="submit" onClick="makeBig();">
</form>
<div id="the_div">
 
</div>
</BODY>
</HTML>
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function makeBig()
  5. {
  6.   var grow;
  7.  
  8.     if (document.documentElement || document.all)
  9.     {
  10.         grow = document.getElementById(the_div);
  11.         grow.style.height = grow.style.height + 5;
  12.     }
  13.  
  14.     if (grow.style.height < 200)
  15.     {
  16.         setTimeout("makeBig();", 10);
  17.     }
  18. }
  19. </script>
  20.  
  21. <style type="text/css">
  22. #the_div {
  23.     background-image:url(bg_image.jpg);
  24.     width: 200;
  25.     height: 0;
  26. }
  27. </style>
  28.  
  29. </HEAD>
  30. <BODY>
  31.  
  32. <form>
  33. <input name="submit" type="button" value="submit" onClick="makeBig();">
  34. </form>
  35. <div id="the_div">
  36.  
  37. </div>
  38. </BODY>
  39. </HTML>

Quelqu'un sait pourquoi cela ne fonctionne pas?
Use your words like arrows to shoot toward your goal.
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Mai 12th, 2009, 4:45 pm

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • Avatar de l’utilisateur
  • Inscription: Juil 25, 2005
  • Messages: 2735
  • Loc: Nashville, TN
  • Status: Offline

Message Mai 12th, 2009, 5:52 pm

Essayez quelque chose comme cela.

Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
    
        <script type="text/javascript">
            function grow(id) {
                h=document.getElementById(id).offsetHeight;
                if(h<500) {
                    document.getElementById(id).style.height=h+10+'px';
                }
            }
            setInterval("grow('the_div')",500);
        </script>
        
        <style type="text/css">
            #the_div { border: 2px solid #000; width: 300px;}
        </style>
        
    </head>
    <body>
    
        <div id="the_div"></div>
    
    </body>
</html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4.     <head>
  5.     
  6.         <script type="text/javascript">
  7.             function grow(id) {
  8.                 h=document.getElementById(id).offsetHeight;
  9.                 if(h<500) {
  10.                     document.getElementById(id).style.height=h+10+'px';
  11.                 }
  12.             }
  13.             setInterval("grow('the_div')",500);
  14.         </script>
  15.         
  16.         <style type="text/css">
  17.             #the_div { border: 2px solid #000; width: 300px;}
  18.         </style>
  19.         
  20.     </head>
  21.     <body>
  22.     
  23.         <div id="the_div"></div>
  24.     
  25.     </body>
  26. </html>
I'd love to change the world, but they won't give me the source code.
  • mindfullsilence
  • Professor
  • Professor
  • Avatar de l’utilisateur
  • Inscription: Aoû 04, 2008
  • Messages: 846
  • Status: Offline

Message Mai 12th, 2009, 6:22 pm

awesome, thanks a ton. Comment puis-je l'empêcher de l'exécution jusqu'à ce que l'on clique sur un bouton?

Selon http://www.w3schools.com/js/js_functions.asp une fonction ne doit pas aller jusqu'à son appelé par un événement.
Use your words like arrows to shoot toward your goal.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • Avatar de l’utilisateur
  • Inscription: Juil 25, 2005
  • Messages: 2735
  • Loc: Nashville, TN
  • Status: Offline

Message Mai 12th, 2009, 6:29 pm

Code: [ Select ]
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
   
        <script type="text/javascript">
            function grow(id) {
                h=document.getElementById(id).offsetHeight;
                if(h<500) {
                    document.getElementById(id).style.height=h+10+'px';
                }
            }
        </script>
       
        <style type="text/css">
            #the_div { border: 2px solid #000; width: 300px;}
        </style>
       
    </head>
    <body>
   
        <div id="the_div"></div>
   
        <input type="button" value="clicky!" onClick="setInterval('grow(\'the_div\')',500);" />
    </body>
</html>
 
  1.  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  3. "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5.     <head>
  6.    
  7.         <script type="text/javascript">
  8.             function grow(id) {
  9.                 h=document.getElementById(id).offsetHeight;
  10.                 if(h<500) {
  11.                     document.getElementById(id).style.height=h+10+'px';
  12.                 }
  13.             }
  14.         </script>
  15.        
  16.         <style type="text/css">
  17.             #the_div { border: 2px solid #000; width: 300px;}
  18.         </style>
  19.        
  20.     </head>
  21.     <body>
  22.    
  23.         <div id="the_div"></div>
  24.    
  25.         <input type="button" value="clicky!" onClick="setInterval('grow(\'the_div\')',500);" />
  26.     </body>
  27. </html>
  28.  


Je mis à jour mon site d'inclure le bouton de tir de la croissance.

De la même:
Quote:
Une fonction contient le code qui sera exécuté par un événement ou d'un appel à la fonction


Quels ont été faites ici est d'appeler la fonction via un écouteur d'événements. Ce que le code a montré la première ligne était un appel direct à la fonction (par setTimeout, qui a été appelé juste sous notre fonction).
I'd love to change the world, but they won't give me the source code.
  • mindfullsilence
  • Professor
  • Professor
  • Avatar de l’utilisateur
  • Inscription: Aoû 04, 2008
  • Messages: 846
  • Status: Offline

Message Mai 12th, 2009, 6:32 pm

hm, encore en cours sur pageload...
Use your words like arrows to shoot toward your goal.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • Avatar de l’utilisateur
  • Inscription: Juil 25, 2005
  • Messages: 2735
  • Loc: Nashville, TN
  • Status: Offline

Message Mai 12th, 2009, 6:34 pm

Votre copie de mon exemple, ou un? Essayez d'actualiser la page (CTRL + R version), b / c pas le mien le feu jusqu'à ce que vous appuyez sur la touche.
I'd love to change the world, but they won't give me the source code.
  • mindfullsilence
  • Professor
  • Professor
  • Avatar de l’utilisateur
  • Inscription: Aoû 04, 2008
  • Messages: 846
  • Status: Offline

Message Mai 12th, 2009, 6:37 pm

ah, hélas! Merci une tonne mate! Vous ne savez pas où est la folie (I a rafraîchi quelques temps). Guess j'ai fait un changement, je ne pense pas qu'il serait en effet de cette manière. Son travail et attend fantastique. Merci encore pour le temps passé!
Use your words like arrows to shoot toward your goal.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • Avatar de l’utilisateur
  • Inscription: Juil 25, 2005
  • Messages: 2735
  • Loc: Nashville, TN
  • Status: Offline

Message Mai 12th, 2009, 6:38 pm

Toute fois, je suis heureux d'avoir pu aider.
I'd love to change the world, but they won't give me the source code.
  • mindfullsilence
  • Professor
  • Professor
  • Avatar de l’utilisateur
  • Inscription: Aoû 04, 2008
  • Messages: 846
  • Status: Offline

Message Mai 12th, 2009, 6:42 pm

viens de lire votre montage, j'ai collé la forme mais ne supprime pas la ligne "setInterval". Il ya donc qu'il ya, la raison, il ne fonctionnait pas. Aujourd'hui javascript - demain le monde! Muahahaha.
Use your words like arrows to shoot toward your goal.

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 9 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 260 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC