2 votes

Comment je construis du code tel que http://fiddle.jshell.net/bwKZt/152/ - HTML & Javascript

J'ai besoin d'un code de construction tel que : http://fiddle.jshell.net/bwKZt/152/ mais mon code ne fonctionne pas ! Je suis un débutant. Merci de m'aider.

index.php :

<!DOCTYPE html><html>

    <head>
      <script>
        $("#label").bind("keyup", changed).bind("change", changed);
        function changed() {
          $("#url").val(this.value);
        }
      </script>
    </head>

    <body>
      <input type="text" id="label" />
      <input type="text" id="url" readonly />
    </body>

</html>

3voto

Tor Points 653

Une partie du JavaScript ici n'est pas du JavaScript natif, mais utilise un plugin appelé jQuery qui facilite la recherche et la manipulation des éléments HTML.

Quand vous voyez $() C'est la façon jQuery de trouver des éléments. Mais cela ne fonctionnera pas car vous n'avez pas du tout référencé jQuery.

Si vous ne voulez pas utiliser jQuery, vous pouvez trouver des éléments avec quelque chose comme document.getElementById('label') .

Mais beaucoup de gens utilisent jQuery pour rendre le référencement des éléments de la page plus court et plus doux, comme avec $('#label') .

Essayez de faire référence à jQuery en premier, comme :

<!DOCTYPE html><html>

    <head>
      <!-- The below line references an externally hosted copy of jQuery 2.2.4 -->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

      <script>
        // The below chunk is telling it to bind to the keyup event only AFTER the document has fully loaded.
        // Sometimes when your binding code is executed, the elements you wish to bind to aren't loaded yet. 
        $(document).ready(function(){
            $("#label").bind("keyup", changed).bind("change", changed);
        });

        function changed() {
          $("#url").val(this.value);
        }
      </script>
    </head>

    <body>
      <input type="text" id="label" />
      <input type="text" id="url" readonly />
    </body>

</html>

0voto

Yves Kipondo Points 1383

Le premier problème est que vous n'avez pas inclus Jquery avec une balise script. Pour résoudre ce problème, ajoutez ce code dans l'en-tête de votre fichier html si vous avez la connexion Internet pour charger Jquery depuis un CDN.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 

ou vous pouvez télécharger le fichier Jquery à partir de Site Jquery et vous l'aurez localement

Après cela, vous devez exécuter ce code après l'exécution de la fonction jquery ready.

$(document).ready(function(){
    $("#label").bind("keyup", changed).bind("change", changed);
    function changed() {
       $("#url").val(this.value);
    }
})

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X