jQuery Element Selection Discussion

Hello sir, could you please post the solution? just to know how you made it work!
Also congratulations for made it work sir!

If you have any doubt, please let us know so we can help you! :slight_smile:

Carlos Z.

Hello sir, if you can, please post your code to so we can check it out together to help you solve that issue.

@Zoltan check this one too please!
Use the “Preformatted Text” Button to encapsulate any kind of code you want to show.

I am a happy Preformatted Text box, please use me wisely!

If you have any doubt, please let us know so we can help you! :slight_smile:

Carlos Z.

Hello sir, both solutions are completely valid, the only difference, at least from my perspective, is that i would prefer to use the “id” attribute instead the variable name because it will save you from headache when your writing more complex code, because you might find more useful to just point an ID the than variable name when you have a lot of code. Still, both are completely valid, Ivan just prefer to use that because it looks better and will save you time when writing complex code.

Remember, that is my perspective, i could be wrong too.
If you have any doubt, please let us know so we can help you! :slight_smile:

Carlos Z.

Hi Carlos,
@thecil
This is a code for example… once I type into the input box, even if I refresh the page, the text in the box remains. When, Ivan wrote the code, and ran it in the video, I have noticed it was reset to empty, when he refreshed the page.
Please, have a look:
Thank you
Zoltan

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Website3</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
    <input id="textBox" type="text" name="" value="" placeholder="Type Here..."/>
    <br>
    <input id="number" type="number" placeholder="enter a number" />
    <br>
    <a href="https://commons.wikimedia.org/wiki/File:Monument_Valley_View,_Arizona,_by_Carol_M._Highsmith.jpg" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Monument_Valley_View%2C_Arizona%2C_by_Carol_M._Highsmith.jpg/1600px-Monument_Valley_View%2C_Arizona%2C_by_Carol_M._Highsmith.jpg" alt="juhee" width="200"  ></a>
    <br>
    <button id="myButton" type="button" name="button" >Subscribe</button>
    <ul>
      <li>Item</li>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Juice</li>
    </ul>
    <p>This is my paragraph</p>

      <h6>This will be in a div</h6>
      <a href="https://api.jquery.com/category/effects/fading/" style="color:green" target="_blank" >This is a site</a>
      <hr>
    <p>This is my second paragraph</p>
    <ol>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Juice</li>
    </ol>
</body>
<body>
    <script>

        $("#myButton").click(function(){
          let theText = $("#textBox").val();
          let theNumber = $("#number").val();
          if(theText && theNumber){
            alert(theText + "\n" + theNumber);
          }
          else{
            alert("Please type in the box!")
          }

        });

    $("p").click(function(){
      $(this).hide();
    });

    </script>
  </body>
</html>

I execute your code on my Brave browser and it does looks ok to me, i type something and a number, the alert windows will show up showing the input data, I refresh the page and it’s start clear to me.

Have you try it on a different browser?

If you have any doubt, please let us know so we can help you! :slight_smile:

Carlos Z.

Hi Carlos,
Yes, I was using Firefox. I ran this code in Brave too and you are right, upon refreshing the page, it resets the boxes. I don’t know why it doesn’t work in Firefox. Do you have any idea?
Thanks for taking the time to run the code!
Zoltan

1 Like

Hi guys, I’m trying to figure out why if I run this code, it displays my h1 element, and after the 2 seconds delay, the rest of the code gets displayed, but my h1 element disappears. Any idea why that is?
Thanks,
Zoltan

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Websiteprac</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  </head>
  <body>
    <h1>This is the header</h1>
  <script>
      function doNumberOfTimes(number){
        for(let i=0; i<number; i++){
          setTimeout(disp,2000);
        }
      };
      function disp(){
        document.write("<h2>THIS IS AN ALERT!<h2>");
      }
      doNumberOfTimes(7);
  </script>

  </body>
</html>

probably because firefox save the last input on a cache file, something you click at the 1st attempt maybe?

Still if your having troubles with firefox, try to use another browser just for this exercise, probably is just cache errors.

document.write will delete all existing HTML and replace it with the one you have inside that function.

To have a better understanding use this website: w3schools.com.

Hope you find this useful! :slight_smile:

Carlos Z.

1 Like

I have started to use Brave instead.

Thanks Carlos, I’ll check the link out.

1 Like

Hi guys. I have a question about the exercise “getting user input in the alert”.

It all works for me in this case, but I am not sure why Ivan does it in a longer way with a variable in the function before calling alert. Might it be needed in some other cases, like getting inputed text to console or even more important ones? Here is my code

<body>
    <label for="name">First name</label>
    <input id="inp" type="text" />
    <button id="btn">"Enter"</button>
  <script>
    $("#btn").click(function(){
      alert($("#inp").val());
    });
  </script>
</body>
1 Like

Yes, thats the correct answer sir, you can save the inputted text into a variable for other use cases, is just about the programming style of every programmer, although your code it’s correct, you already answer to yourself, so be proud of it! :muscle:

If you have any doubt, please let us know so we can help you! :slight_smile:

Carlos Z.

Thanks a lot! Got another one though. My code in “functions as arguments and timeouts” looks the same as Ivan’s, but it doesn’t run in my console for some reason.

<body>
  <script>

    function doThreeTimes(toDo){
      for(var counter=0;counter<0;counter++){
        toDo();
    }
  }

  function randomFunction(){
    console.log("hey");
  }

  doThreeTimes(randomFunction);

  </script>

</body>

if I add brackets after randomFunction doThreeTimes(randomFunction()); then I get it done 1 time. How come it works perfectly in the video for Ivan and doesn’t work for me? Checked it many times, looks like I didn’t miss anything

1 Like

The issue is on the for loop, counter start at 0, counter should be less than 0, so if the counter its 0, it will never add 1 to the counter.

    <h1>doThreeTimes</h1>
    <!--a button to invoke the fucntion -->
    <button type="button" onclick="doThreeTimes()">Start 3. </button>
    <script>
    function doThreeTimes(){
      //variable to input how many iterations
      var hey = prompt("How many 'Hey' you want to be printed?");
      //counter start at 0, counter less than variable hey, counter add 1 until it reach less than "hey" variable
      for(var counter=0;counter<hey;counter++){
        //print to console 
        console.log("hey");
    }
  }//end function doThreeTimes
  </script>

try that one instead, there is no need for a randomFunction.

Hope this gives you a clear view of the subject, keep learning! :slight_smile:

If you have any doubt, please let us know so we can help you!

Carlos Z.

2 Likes

jQuery uses names, id, classes, types, attributes, and/or values to select an HTML element in the JS.
Thanks, everyone for your posts, reading your codes helped me to see more clearly how to write code, and trying them out is great to observe the logic behind your code.
ThanQ all…slight_smile:

Thanks @ivan @filip @ivga80 @gabba

2 Likes

    <script>

            function randomFunction(){
              documnet.write("<h1> Hello Peope </h1>");
                    }

            setTimeout(randomFunction, 2000);

   </script>
website.html:18 Uncaught 
ReferenceError: documnet is not defined
    at randomFunction (website.html:18)
randomFunction

I get an error everytime following the Functions as Arguments and Timeout with ivan!

please help

Hey @Pendar!

Look at how you’ve spelt document, that’s the problem. That’s why it’s saying documnet not defined.

When you get an error like this, it tells you which line in your code to check carefully for spelling mistakes, syntax errors etc.

So, here you know to check line 18 really carefully :face_with_monocle:

2 Likes

i also got another one wrong… i really feel stuppid

  <script>



              seTimeout(function(){alert("hi");},1000);


          </script>

//This one says Uncaught ReferenceError: seTimeout is not defined

Hey @Pendar,

You musn’t feel stupid at all. We all do it all the time, it’s just that when you’re more experienced you develop a sixth sense for spotting them more quickly :slightly_smiling_face:

You can see the spelling mistake, right?

2 Likes

Yes, i saw it as soon as replied.

2 Likes

missing a t at for setTimeout

2 Likes