jQuery Element Selection Discussion

Javascript Programming
#133

Hi to everyone & Ivan!

I’ve got a problem that I’ve been trying to solve…some help pls?

  1. :white_check_mark: I’ve created an html input field for data
  2. :white_check_mark: I’ve also created a html button
  3. :white_check_mark: I’ve inserted the ajax jQuery library ref link
  4. :white_check_mark: I’ve used this script code below to ref that html:
    button id= “myButton” & input id= "message"

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

The code calls/invokes the alert when you click the button. :white_check_mark:
(whether there’s text in the input field or not it pops up an alert.)

Does anyone know?
…but I would like a condition where if there’s no text in the field then the alert will pop up saying “Please enter your name.” before allowing the next click function alert to display with the text imputed…

I spent a lot of time researching/reading and watching the CS50 video again… I tried different if, else conditions, combinations,but I couldn’t get it to work?..help needed? :pensive:

Thx… :wink:

1 Like
#134

Hey @Johnb3, hope you are great.

Now I would love to help you fix the issue in your code, but it would be awesome for me if you could share the entire code so i can have a better understanding over your code logic.

You can use the “Preformatted Text” Button to encapsulate any kind of code you want to show.


function formatText(){

let words = “I’m a preformatted Text box, Please use me wisely!”

}

prefromatted_text-animated

preformatted text
preformatted text957×174 11.9 KB

Carlos Z.

#135

Hi Carlos! @thecil…

Thx for your response to my query…I’m only new at all this, but I’m excited at what is beginning to unfold… this was not a requirement of the assignment, but I was merely interested to know.

Frankly, I don’t wish to waste your time, so I think it will best be left for now…I think as time progresses and my programme syntax and logic expands this will all become clear. I basically just did research online for the topic (as Ivan suggested for the initial assignment) and tried to piece together how this might work (just self challenging)…I spent hrs reading and tried multiple script options presented from these different articles, which didn’t work. Algud bro…

Thanks so much Carlos!

I ended up deleting them all and kept the script that produced the result for assignment completion. I’m confident it will become clearer over time as I maintain focus with my attention. Cheers!!! 😉

Kind regards

Paul 👍

2 Likes
#136

Now thats a good attitude, I’m sure you will success in our courses easily, still I will be here waiting to help you when you need me :nerd_face:. So don’t hesitate on reach me or another Forum Team member :slight_smile:

Carlos Z

1 Like
#137

Good stuff, thanks for sharing

#138

i am struggling in making button in html

1 Like
#139

Hey @Ali_Ameen, hope you are ok.

Would you please share your code? so we can help you solve it?

You can use the “Preformatted Text” Button to encapsulate any kind of code you want to show.


function formatText(){

let words = “I’m a preformatted Text box, Please use me wisely!”

}

prefromatted_text-animated

preformatted text
preformatted text957×174 11.9 KB

Carlos Z.

#140

jQuery Element Selection Discussion.

"It is good practice to add jQuery in footer just before the closing tag "

Why Id and element selectors are used frequently in jQuery?

#141

it is the most easiest way to bind html variables to jquery.

You can read more about here:

Carlos Z.

1 Like
#142

This lecture was excellent for expanding our knowledge on the elements, id’s and classes as well as the concept of “selection” which is obviously very important when programming.

1 Like
#143

Thanks CarlosZ. I really appreciate your answer and references for more reading.

1 Like
#144

Hi,
I came across a mention that native Javascript tends to be more popular now for the types of things we’re doing here. Is that true and does it mean we should also learn the native equivalents for all these jQuery selectors and events?

1 Like
#145

Hey @Mirran, hope you are well.

In the JavaScript Programming course, there are some lessons referred to Jquery and some videos that will teach you the basics.

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

Carlos Z.

#146

I’m trying to make a button that says Bitcoin and when you click it, it says Bitcoin pumping all over the screen. I’m trying to find out what’s not working in my code. Any suggestions?

Bitcoin Pump

function myFunction() { document.getElementById("myFunction").innerHTML = "Bitcoin will be pumping"; }
2 Likes
#147

Hi @inzhagey, hope you are great.

Now your code is incomplete, I might need to check your HTML code and JS to help you figure it out.

You can use the “Preformatted Text” Button to encapsulate any kind of code you want to show.


function formatText(){
X	
let words = “I’m a preformatted Text box, Please use me wisely!”

}

prefromatted_text-animated

preformatted text
preformatted text957×174 11.9 KB

Carlos Z.

1 Like
#148 
<html>
  <head>
  <script> src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <body>
  <button id="bitButton">Bit Button</button>

  <script>
  $("#bitButton").click(function(toDo){
  function bitWork(toDo){
    for (var i = 0;i<100; i++)
    toDo();
  }
});
    function done (){
      document.write("Button Clicked");
  };
        bitWork(done);

  </script>
  </head>
  </body>
</html>
1 Like
#149

Is there an easy way to remember all the JQuery features? As someone new to programming, what is the best way to remember the difference between an “id” and a “class”?

2 Likes
#150

ok about your code, i encounter some errors while debugging it.

first error in code line #3 which is the script to connect with jquery, you must have the src inside the first <script> tag, so it should something like <script src=...> and then should work.

Also you have redundant code, you have a anonymous function that have an argument toDo, then the bitWork that also have the same argument, then inside bitWork its a for loop and then inside of it, it calls another function toDo() which has not been define it.

You can achieve the same without the bitWork function, also the done() is defined but not invoked.

Here is your code but modified so it can work, use it to compare it with yours to understand it.

<html>
  <head>
  <script  src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <body>
  <button id="bitButton">Bit Button</button>

  <script>
  $("#bitButton").click(function(toDo){
    for (var i = 0;i<100; i++)
    done()
});
    function done (){
      document.write("Button Clicked");
  };
  </script>
  </head>
  </body>
</html>

Now for me is just practice, id is used has identification for that exactly tag, the class is used for stylish (css properties).

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

Carlos Z.

1 Like
#151

all the different selectors are really cool. But why would you want to hide something ?

1 Like
#152

It’s amazing how the further you progress through these courses, the pieces fit together perfectly. :slight_smile:

3 Likes