jQuery Element Selection Discussion

Javascript Programming
#153

Gosh! You!! My Friends… are way ahead than I am. Wait for me I am caching up.
Thank you for all the solutions above. Its helping.

2 Likes
#154

So this was my coding to make the assignment work:

    <form id = "demo">
                <input id="name" placeholder = "Name" type = "text"/>
                <input type = "submit"/>
              </form>

              <script>

              document.getElementById("demo").onsubmit = function(){
                let name = document.getElementById("name").value;
                alert(name)
              }
              </script>
1 Like
#156

Assignment on Text Input Alert

Hope this is relevant to the forum, my solution was slightly different to Ivan’s and it worked… if I could get a feedback on it I’d appreciate it. Thanks !solution

1 Like
#157

I appreciate the way this whole JQuery section has been presented. Giving selectors and their meanings is so helpful. It seems really difficult in earlier sections because there are so many things that have to be remembered to execute each thing but the JQuery makes the process so much easier because it has already been written appropriately and you just have to access it. Learning the selectors is like its own alphabet or key components. It still takes work though.

2 Likes
#158

jQuery is very useful. It reduces the lengthy code from JS. For example,
JS: document.getElementById(“i”), document.getElementsByClassName(“c”)
jQ: $("#i"), $(".c")

3 Likes
#159

jQuery failed on my mac. Everything up to date as of today. Does anyone have a workaround for this? :confused:

#160 
$(document).ready(function(){

    $("#myButton").click(function(){
        var str = $("#myInput").val();
        alert(str);
    });

:nerd_face:

2 Likes
#161

$(document).ready(function(){

$("#myButton").click(function(){
    var str = $("#myInput").val();
    alert(str);
});
2 Likes
#162

I feel the same way :upside_down_face:

#163

Hi lextiby. Provide your code and the exception you get in the console.

#164

all making sense now that you can see what how the codes are actually used.

#165

Hi,

I am learnig JS for the first time and I have no previous experience on web development.

I am struggling to understand the “class” selector. For some reason, I thought that the “array” square brackets [ ] would be implemented in the code line in order to categorise elements that would be part of a particular class or group.

  1. Is there a relationship between array and class?
  2. Can you provide a real life/ practical code example where “class” comes handy in contrast to “id”?

Cheers,

#166

Just want to say thanks now i now why w3schools is so important and where web3 for blockchain comes from…dope!

2 Likes
#167

there is no relationship between array and class.

Classes and ids are used to identify any HTML tag with some objective. you can access html tags with name, but let suppose you want to apply same design to different html tags but don’t want to access all of them at the same time. so you will use class tag.

ids are unique. you will use Ids when you know there will be one of its kind in whole page.
but when one functionality can be used on number of different items you prefer Classes.

Real life example can be.
Use of DNA to access a person from a group of person.
Use of blood group class to access multiple person from same group of person.

I hope I didn’t confuse you more. good luck.

4 Likes
#168

When do you use the Parenthesis in functions and where do you not?

With Jquery you write $("#Button") for example but Button is an ID type not a sting but with Alert(“ALERT”) alert is a string. I’m confused when to use what and with which fucntions?

1 Like
#169

Great answer. Hope they’ve seen the reponse! :eyes:

1 Like
#170

This is the easy way i remember both:
id ==> targets a singular element.
class ==> targets a group of similar elements.

3 Likes
#172

It is fascinating how jQuery works. I was to animate a box to increase its height and width by 500px. I was able to reset it back to its original size of 100px. Here is the code if anyone is interested.

Animate height
Reset height

#174

That’s weird. I tried pasting my code and it wouldn’t show up.

**<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#box").animate({height: "500px"});
    $("#box").animate({width: "500px"});
  });
  $("#btn2").click(function(){
    $("#box").animate({height: "100px"});
    $("#box").animate({width: "100px"});
  });
});
</script>
</head>
<body>

<button id="btn1">Animate height</button>
<button id="btn2">Reset height</button>

<div id="box" style="background:#7850CE;height:100px;width:100px;margin:6px;"></div>

</body>
</html>
1 Like
#175

I can’t believe u made me do that to Chewbacca