javascriptjqueryjsfiddlecodepen

How to copy and apply code from a live demo?

I've recently got into coding, and there's a problem that I encounter lots of time. And that is when I'm trying to copy a code from live demo, such as this: https://www.w3resource.com/jquery-exercises/part1/jquery-practical-exercise-17.php

I've tried all kinds of combination, but I can't make it work. I copied all the text provided, yet, why is it not working? Please help me understand how to do this, cause there's a lot of great codes I would to experiment with but can't make it work if it comes from live demos like there's some hidden code not showing up on the codes.

Here's how I tried to do it:

<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>How to get the value of a textbox using jQuery</title>
</head>
<body>
<input type="text" value="Input text here">
</body>

<script>
$( "input" )
  .keyup(function() {
    var tvalue = $( this ).val();
    console.log(tvalue);
  })
.keyup();
</script>

</html>

Solution

  • So let me go into it step by step.

    I assume you know how the rest of your code is working. So I'll only focus on the script tag that you provided.

    Here it is:

    1 $("input").keyup(function() {
2    var tvalue = $(this).val();
3    console.log(tvalue);
4  }).keyup();

    Let's get into it line by line: