need a soluion to a jquery asignment needs to be within separate files, I.E. js,
ID: 3704727 • Letter: N
Question
need a soluion to a jquery asignment needs to be within separate files, I.E. js, css, html.
in the html file need to import content of anything that interest you. IE Hobby, sports team ect.
Create event handlers for mouse enter, leave and click. On the enter and leave event you should style the button accordingly so the user can tell they are triggering events.
On button click you should have the page append an image file relation to the content you wrote above. You should also have the button styled so the user knows they have clicked that event.
Next step is to have another button dynamically created on the page. I want to create a generic click function that will then get applied to the new button added to the DOM. Hint be think about the on method in jquery. Also easiest way would be to give the button an ID
Explanation / Answer
Could not understand the part about dynamically created button rest follows
index.html:
<!DOCTYPE html>
<html>
<head>
<title>JS button</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="default.css"/>
</head>
<body>
<h1>Soccer</h1>
<p>
Association football, more commonly known as football or soccer, is a team sport
played between two teams of eleven players with a spherical ball.
It is played by 250 million players in over 200 countries and dependencies,
making it the world's most popular sport.
The game is played on a rectangular field with a goal at each end.
The object of the game is to score by moving the ball beyond the goal line into the opposing goal.
</p>
<button type="button" id="clickme">Show Image</button>
<script src="jq.js"></script>
</body>
</html>
jq.js:
var clicked = false;
$('button').mouseenter(function () {
$(this).css('color','violet');
});
$('button').mouseleave(function () {
$(this).css('color','white');
});
$('button').click(function () {
if(clicked){
return;
}
clicked = true;
$(this).css({
'background-color':'red',
'border-style': 'solid',
'border-color': 'yellow',
'border-width': '10px'
});
image = document.createElement("img");
image.src = "football.jpg";
$('h1').after(image);
});
default.css:
button {
background-color: green;
color: white;
border-style: none;
width: 100%;
height: 2.5em;
align: center;
border-radius: 7em;
font-size: 5em;
}
Note:You need to have a football.jpg for the code to function properly
You may clarify the last part in the comments. In that case I'll try to answer.
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.