Question

CHALLENGE ACTIVITY 11.3.1: jQuery events.

Write and register an event handler that displays "Event reaction" on the console log when the p receives a mouseout event.

I have some working if you look below the one that states ✖Checking console log after mouseout event on p element is the one I need help on.

HTML

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

<h1>Header1</h1>

<h2>Header2</h2>

<h3>Header3</h3>

<p>Paragraph</p>

<a href="https://www.example.org/"Example.org</a>

JavaScript This is what I need help

var $pElement = $("p:eq(0)");

/* Your solution goes here */
$(document).ready(function() {
var $pElement = $("p:eq(0)");
$pElement.on( "mouseout",function() {
console.log("Event reaction");
});  
});

checkmark.pngChecking console log before any events on p element

Yours Yours has no output

✖Checking console log after mouseout event on p element

Yours and expected differ. See highlights below.

Yours Yours has no output

Expected Event reaction

checkmark.pngChecking console log after mouseout event on h1 element

Yours Yours has no output

checkmark.pngChecking console log after mouseout event on h2 element

Yours Yours has no output

checkmark.png

Checking console log after mouseout event on h3 element

Yours

Yours has no output

checkmark.png

Checking console log after mouseout event on a element

Yours

Yours has no output

0 0
Add a comment Improve this question Transcribed image text
Answer #1

Code -

<html>

<head>

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

    <script>

        /* Your solution goes here */

        $(document).ready(function () {

            /* add event listner mouseout to p element like below */

            /* whenever some mouse enter event happen on p elements and when mouse move out

            this function will be triggered */

            $("p").mouseout(function () {

                console.log("Event reaction");

            });

        });

    </script>

</head>

<body>

    <h1>Header1</h1>

    <h2>Header2</h2>

    <h3>Header3</h3>

    <p>Paragraph</p>

    <a href="https://www.example.org/">Example.org</a>

</body>

</html>

Screenshots -

Console is clear

Performance Header1 O Header2 2 Elements top != No messages No user me... No errors A No warnings 6 No info & No verbose Sour

On mouse over on p elements it print Event Reaction in consolePerformance Security Audits Header1 Memory Application Default levels O Header2 2 Elements top = 2 messages 2 user mess... ®

pls do give a like , thank you

Add a comment
Know the answer?
Add Answer to:
CHALLENGE ACTIVITY 11.3.1: jQuery events. Write and register an event handler that displays "Event reaction" on...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions
  • Write and register an event handler that displays "Event reaction" on the console log when the...

    Write and register an event handler that displays "Event reaction" on the console log when the p receives a click event. HTML JavaScript 1 var pElement = document.getElementsByTagName("p")[0]; HNM+ 3 * Your solution goes here */ HTML JavaScript U AWNE <h1>Header 1</h1> <h2>Header 2</h2> 3 <h3>Header 3</h3> 4 <p>Paragraph</p> 5 <a href="https://www.example.org/">Example.org</a>

  • image_gallery.js: $(document).ready(function() { $("#image_list a").each(function() {    // get the image URL and caption for each...

    image_gallery.js: $(document).ready(function() { $("#image_list a").each(function() {    // get the image URL and caption for each image    var imageURL = $(this).attr("href");    var caption = $(this).attr("title");       // preload the image for each link              var galleryImage = new Image();        galleryImage.src = imageURL;               // set up the event handlers for each link        $(this).click(function(evt) {            $("#image").attr("src", imageURL);        $("#caption").text(caption);              // cancel...

  • QUESTION Z 125 MARIS 1. Write the equilibrium espression for ch of the following reacties: N...

    QUESTION Z 125 MARIS 1. Write the equilibrium espression for ch of the following reacties: N 11, tại vì 2 MH MI 2. The disociation of the CHCOOH. has inquilibrium 25Caf1. 810 The actions CH.COOH CH.000 If the equilibrium concentration of CH.COOH is 0.46 moles in 500 Lo wner and that ofCH.CD0 1 0. moles in the same 0.500L. calculate for the ruction 500 m, (Pro) -0.150 ring raction, wts mu 3. Gre the initial partial pressures of (as) -...

  • Website Case Study 59 JavaJam Coffee Hous Home Dobs Gear avaJam Gear Jnva)am Shirt Figure 12.6 Ne...

    JavaJam Gear Page We were unable to transcribe this imageWebsite Case Study 59 JavaJam Coffee Hous Home Dobs Gear avaJam Gear Jnva)am Shirt Figure 12.6 New JavaJam Gear page Task 4: Create the New Gear Page. One way to be productive is to create pages based on earlier work. Launch a text editor and cpen the Music page (music.html). Save the file your as gearhtml. This will give you a head start and ensure that the pages on the website...

  • Program Requirements First, find all the prime numbers between 2 and a user-inputted number from the...

    Program Requirements First, find all the prime numbers between 2 and a user-inputted number from the console (inclusive). The identified prime numbers must be stored in an array . The inputted number should be between 0 and 1000 (inclusive). array is large enough to o Make sure your hold all the prim e numbers. Dynamic memory allocation is not required for this assignment, so you can have unused space in your array Make sure you can handle the cases of...

  • A. B. Please follow the steps of hypothesis testing, including identifying the alternative and null hypothesis,...

    A. B. Please follow the steps of hypothesis testing, including identifying the alternative and null hypothesis, calculating the test statistic, finding the p-value, and making a conclusions about the null hypothesis and a final conclusion that addresses the original claim. Use a significance level of 0.10. Is the conclusion affected by whether the significance level is 0.10 or 0.01? Test Statistic=______ (Round to two decimal places) P-Value=______ (Round to three decimal places) Answer choices below: a) ​Yes, the conclusion is...

  • I need your help ASAP! please show all work for this activity sheet f True/False Write...

    I need your help ASAP! please show all work for this activity sheet f True/False Write T for true, F for false a) Prostaglandins are used to make steroid hormones b) Prostaglandins are synthesized only in the liver c) Prostaglandins can be used to induce labor d) Prostaglandins are synthesized in the cell only when it is needed e) Prostaglandins prevent the inflammation response Prostaglandins can cause fever and pain sensitivity g) Phospholipids are the only lipids found in a...

  • Q1 Error detection/correction Can these schemes correct bit errors: Internet checksums, two-dimendional parity, cyclic...

    Q1 Error detection/correction Can these schemes correct bit errors: Internet checksums, two-dimendional parity, cyclic redundancy check (CRC) A. Yes, No, No B. No, Yes, Yes c. No, Yes, No D. No, No, Yes E. Ho, hum, ha Q2 CRC vs Internet checksums Which of these is not true? A. CRC's are commonly used at the link layer B. CRC's can detect any bit error of up to r bits with an r-bit EDC. c. CRC's are more resilient to bursty...

  • The both files are included. Where are these which are colorful. Point.h and point.cpp Hor this assignment you are provided the files for a class called point. Download the h and .cpp files and incl...

    The both files are included. Where are these which are colorful. Point.h and point.cpp Hor this assignment you are provided the files for a class called point. Download the h and .cpp files and include them in your project. IheじML diagram below details the class Point くくfriend>> ostream& operator.((ostream&, point&) <ごfriend::. İstream& operator:..イ1stream&-point& - : double - v doublc getX) double getYO double - sctX( double): void - set Y(double) : void - point(double-0.0, double-0.0 operator-(const point& bool perator< const...

  • Write a C program for: One technique for dealing with deadlock is called “detect and recover.” In...

    Write a C program for: One technique for dealing with deadlock is called “detect and recover.” In this scheme, some procedure is used to identify when a deadlock occurs, and then another procedure is used to deal with the blocked processes. One technique to identify a deadlock is to maintain a resource graph that identifies all processes, all resources, and the relationships between them (that is, which processes exclusively own which resources, and which processes are blocked waiting for which...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT