Need help converting this code from Javascript to Jquery. Modify your Lab 1 assi
ID: 3870831 • Letter: N
Question
Need help converting this code from Javascript to Jquery.
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="cat.jpg" width="250px" height="150px" />
</p>
<!--Add an empty tag below image tag to show favourite number-->
<p>Here is your favorite number printed!</p>
<p id="p"></p>
</Form>
</body>
</html>
Explanation / Answer
Converted javascript to jQuery -
$(document).ready(function() {
var favColor = $('#fav_color')[0];
var nextFavColor = $('#next_fav_color')[0];
var inputFields = $("input");
for(var i = 0; i < inputFields.length; i++) {
if (inputFields[i].type == "text"){
inputFields[i].css("background-color", nextFavColor);
}
}
var image1Id = $('#image1');
$('#image1').mouseover(function () {
image1Id.src("cat.jpg");
});
$('#image1').mouseout(function () {
image1Id.src("grumpyCat.jpg");
});
var favNumber = $('#fav_num')[0];
var numbers = "";
for(var i = 1; i <= favNumber; i++) {
numbers += favNumber + ' ';
}
$('#p').html(numbers);
});
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.