So, add the following line to your function: Note the similarity with the jQuery ID Selector, except that instead of the hash symbol #, we use the period. Instead of using the ID Selector, this time we make use of the jQuery Class Selector. We know that all the text to be replace are within elements, and have the class="cow_color". Var inputValue = $("#input_color").val() It is worth noting that you can actually perform the same action without the use of the input variable as follows: So, next add in the following two lines, making sure that they are in the click function. val() method to retrieve the current entered text in the input field. In order to retrieve the text currently in the input field, we will first need to use the ID Selector, as we did in Step 1, but with id="input_color". Step 3: Retrieving and storing the input value Actions to take upon button click goes here. ![]() Attaching the listener to the button should be done as follows: Next, we want to attach a listener for clicks on the button. This ensures you are selecting the element with id="button_change". Thus, write the following line.īe sure to include the # symbol. Because the button has the id="button_change", we can make use of jQuery's ID Selector. Replace the text with the stored value.ĭetailed Instructions Step 1: Selecting the Change! buttonįirst, you want some way to get the button element and assign it to a variable.Find and select all occurrences of the relevant text.Retrieve and store the value currently in the input field.Set a click listener on the button to capture click events.All occurrences of the desired text to be replaced are enclosed within tags, and have the class="cow_color".The input field has the id="input_color".The Change! button has the id="button_change".Take a moment to understand HTML/CSS code that's present. Now, open lab2_ex1.html in your text editor. The input field currently has the world Purple. The desired behavior is when the button is clicked, all occurrences of the word Blue should be changed to the text specified in the input field. This is because our Javascript and jQuery code has not yet been put in place. You will notice that it doesn't do anything currently. Try clicking on the button named Change!. You should see the a page that looks something like this: ![]() Exercise 1: Selecting Elements, Getting Values, and Setting Valuesįor this exercise, open up lab2_ex1.html in your internet browser. (This is research code, in beta, and only approved for use in this class, please don't redistribute!)ĭownload the files required for this lab here.ĭownload the complete solution for this lab here.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |