Please Help convert javascript to jquery! jQuery Practice Modify your Lab 1 assi
ID: 3871433 • Letter: P
Question
Please Help convert javascript to jquery!
jQuery Practice Modify your Lab 1 assignment to use jQuery.
Be sure to use jQuery for:
Registering all events
Selecting any elements
Modifying the contents or attributes of any elements
None of the script code should appear within the HTML body.
<html>
<head>
<script>
function ChangeColor(){
<!--Get favourite color using id of corresponding field-->
var favColor=document.getElementById('fav_color').value;
document.body.style.backgroundColor = favColor;
<!--Get next favourite color using id of corresponding field-->
var nextFavColor=document.getElementById('next_fav_color').value;
<!--Get all the input fields-->
var inputFields=document.getElementsByTagName("input");
for(var i=0; i < inputFields.length; i++){
<!--Change color of fields with type text only-->
if(inputFields[i].type == "text"){
inputFields[i].style.backgroundColor=nextFavColor;
}
}
<!--Get image element-->
var image1Id= document.getElementById("image1");
<!--onmouseover ,change image's src value to show another image-->
image1Id.onmouseover=function(){
image1Id.src = "cat.jpg";
}
<!--onmouseout ,change image's src value to show default image-->
image1Id.onmouseout = function(){
image1Id.src = "grumpyCat.jpg";
}
<!--Get favourite number from fav_num field-->
var favNumber=document.getElementById('fav_num').value;
var numbers="";
<!--Iterate loop till that number and concatenate the favourite number to a variable numbers-->
for(var i=1;i<=favNumber;i++){
numbers+=favNumber+" ";
}
<!--And then show that value on p tag-->
document.getElementById('p').innerHTML =numbers;
}
</script>
</head>
<body id="body">
<!-- Give a heading using heading tab-->
<h3>Change values on button click </h3>
<!--Create a form tag-->
<Form>
<!-- Create three text fields for favourite color, next favourite color and favourite number-->
Favorite color:<input type="text" id="fav_color"><br><br>
Next Favorite color:<input type="text"id="next_fav_color"><br><br>
Favorite number:<input type="text" id="fav_num"><br><br>
<!--Add a button to change values on button click-->
<input type="button" value="Show">
<!--Display an image-->
<p><img id="image1" src="grumpyCat.jpg"/>
</p>
<!--Add an empty tag below image tag to show favourite number-->
<p id="p"></p>
</Form>
</body>
</html>
Explanation / Answer
Note: In Jquery everything we do by using id of the respoective tag like input,button,image etc
1 ) $(document).ready(function() --> it will called once the document is ready
2 ) $("#colorButton").click(function(){ --> click event ,colorButton is id given to the button
3 ) $("form#jquForm :input") --> It is used the value of input fields.jquForm is the form name
4 ) $("#image1").mouseover(function() { --> MouseOver Event in jquery
5 ) $("#image1").mouseout(function() { --> MouseOut Event in jquery
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#colorButton").click(function(){
var favColor = $('#fav_color').val();
document.body.style.backgroundColor = favColor;
var nextFavColor = $('#next_fav_color').val();
$("form#jquForm :input").each(function(){
var inputFields = $(this);
for(var i=0; i < inputFields.length; i++){
if(inputFields[i].type == "text"){
inputFields[i].style.backgroundColor=nextFavColor;
}
}
});
var favNumber = $('#fav_num').val();
var numbers="";
for(var i=1;i<=favNumber;i++){
numbers+=favNumber+" ";
}
document.getElementById('p').innerHTML =numbers;
});
$("#image1").mouseover(function() {
$("#image1").attr('src', 'http://www.imgion.com/images/01/Voilet-Flower-.jpg');
});
$("#image1").mouseout(function() {
$("#image1").attr('src', 'http://www.imgion.com/images/01/Vector-with-illustion-.jpg');
});
});
</script>
</head>
<body id="body">
<!-- Give a heading using heading tab-->
<h3>Change values on button click </h3>
<!--Create a form tag-->
<Form id='jquForm'>
<!-- Create three text fields for favourite color, next favourite color and favourite number-->
Favorite color:<input type="text" id="fav_color"><br><br>
Next Favorite color:<input type="text"id="next_fav_color"><br><br>
Favorite number:<input type="text" id="fav_num"><br><br>
<!--Add a button to change values on button click-->
<input type="button" id="colorButton" value="Show">
<!--Display an image-->
<p><img id="image1" src="http://www.imgion.com/images/01/Vector-with-illustion-.jpg"/>
</p>
<!--Add an empty tag below image tag to show favourite number-->
<p id="p"></p>
</Form>
</body>
</html>