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>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:
line 1: It contains three different parts the first of them is $ sign where it exists to define/access jQuery (in this case we're accessing something in the DOM). The second part is a selector to "query (or find)" HTML elements (in this case we're going to find an HTML tag which name is input). Finally, the third part consists on a jQuery action() to be performed on the element which is a keyup action (The keyup event is sent to an element when the user releases a key on the keyboard, for more information about it you can read this). Also, we should act something in our keyup action so we need to add a function into it just like the code you provided.
line 2: Within the provided function we got some actions, so in this exact line we're doing two things. First is to get the queried element value with this piece of code $(this).val() where the first part is accessing the this element which is the actual input in our case (but I strongly recommend read more about this here) and in the following we get the value of it with val() (The val() method is primarily used to get the values of form elements such as input, select and textarea. When called on an empty collection, it returns undefined.). In the other side of the equation, we got var tvalue (var is a statement that declares a function-scoped or globally-scoped variable, so we got function-scoped variable tvalue here) where it will be undefined since the right side of our equation gets evaluated, then it will fill with the actual value of our input.
line 3: This is the amazing part of all the code that we got here console.log(tvalue), console itself is not a javascript feature, function or whatever, (where we have seen some places that it will introduce it as a function within a javascript but it's truly not) it is the browser API that provided for javascript and browser for communication. So every browser has a console for you to use when you call such a thing it will be only foundable within your browser dev tools console or in some weird place like IDE terminal (actually when you use SSR's you will found the log into the IDE terminal). So as @Gabriele Petrioli said you can read instruction to access different browsers console in this link. So whenever you call it you should look for results in the browser console mostly.
NOTE: The console object can be accessed from any global object. Window on browsing scopes and WorkerGlobalScope as specific variants in workers via the property console. It's exposed as Window.console, and can be referenced as simply console. You can read more about console here.
line 4: It is exactly the same as previous keyup but it will fire the keyup event for the very first time.