CODEWITHSUNDEEP
javascriptphphtml
Developer
Developer

Reputation: 172

How I build code such http://fiddle.jshell.net/bwKZt/152/ - HTML & Javascript

I need build code such : http://fiddle.jshell.net/bwKZt/152/ but my code dosen't work ! I am a beginner. Please help me.

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>

Upvotes: 2

Views: 296

Answers (2)

Yves Kipondo
Yves Kipondo

Reputation: 5613

The first problem is because you haven't include jquery with a script tag to solve that add this code in the head of you html file if you have the Internet connection to load Jquery from CDN 

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

or you can download Jquery file from Jquery site and you will have it locally

after that you must execute this code after the executing the jquery ready function

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

Upvotes: 0

Tor
Tor

Reputation: 784

Some of the JavaScript here isn't native JavaScript , but is using a plugin called jQuery that makes searching and manipulating HTML elements easier.

When you see $(), that's the jQuery way of finding elements. But it won't work because you don't have jQuery referenced at all.

If you don't want to use jQuery, you can find elements with something like document.getElementById('label').

But lots of people use jQuery to make referencing page elements short and sweet, as with $('#label').

Try to reference jQuery first, like:

<!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>

Upvotes: 3

Related Questions