Please help me with div 9, 10, 11 and 12 <!DOCTYPE html> <html> <head> <title>Ja
ID: 3563850 • Letter: P
Question
Please help me with div 9, 10, 11 and 12
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Exercise 2</title>
<style>
body { width: 980px; margin: 0 auto; }
div { margin: 15px; padding: 15px; cursor: pointer; }
.lightGray { background-color: #cccccc; }
.gold
background-color: gold;
color: maroon;
}
</style>
<script type="text/javascript" src="/student/common/scripts/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$("#Div1").click(function(){
$("#Div1").css("font-size","40px");
});
$("#Div2").click(function(){
$("#Div2").css({"background":"crimson","color":"blue"});
});
$("#Div3").click(function(){
$("div").css("background","beige");
});
$("#Div4").click(function(){
$("#Div4").hide(1500);
});
$("#Div5").click(function(){
$("#Div4").show(1500);
});
$("#Div7").click(function(){
$("#Div7").after("I am alive!");
});
$("#Div8").click(function(){
$("#Div4 ,#Div5 ,#Div7 ,#Div8").addClass("lightGray");
});
$("div12").click ({"border-color": "#999",
"border-width":"1px",
"border-style":"solid"});
});
</script>
</head>
<body>
<!-- Examples -->
<!-- Div1 says: Change my font size to 40px -->
<div id="Div1">Change my font size!</div>
<!-- Div2 says: Make my background to crimson and font color to blue -->
<div id="Div2">Change my background and color!</div>
<!-- Div3 is bossy and says: Make the background of all divs beige color -->
<div id="Div3">Change all backgrounds!</div>
<!-- Step 6: Div 10 says: Change my inner HTML content to a h2 heading with the text "I have new content!" -->
<div id="Div10"> Add a heading to me! </div>
<!-- Step 7: Div 11 says: Change the text color and background of my paragraph by adding the gold class to it -->
<div id="Div11">Change the color of my paragraph!<p> I am Div11's paragraph!</p></div>
<!-- Step 8: Div 12 wants to be different and says: Draw a border (1px solid #999) around all divs, except for me (hint: :not(selector)) -->
<div id="Div12">Draw a border around all divs except me!</div>
</body>
</html>
Explanation / Answer
Hi ,
1) As Div 10 says: Change my inner HTML content to a h2 heading with the text "I have new content!" ,
jquery has a the function ' ("element").html ' for getting or setting the html content of that element , more like javascript has ' element.innerHTML '
so, the answer for that would be ,
$("#Div10").click(function(){
$("#Div10").html("<h2>I have new content!</h2>");
});
2) as <!-- Div 11 says: Change the text color and background of my paragraph by adding the gold class to it -->
but here the paragraph element is a child to the div11 element .
jquery has a child selector which looks like ( "#div11 > p" ) , which returns all the paragraph elements that are children to div11.
so the answer would be ,
$("#Div11").click(function(){
$("#Div11 > p")..addClass("gold");
});
3) As <!-- Div 12 wants to be different and says: Draw a border (1px solid #999) around all divs, except for me (hint: :not(selector)) -->
as it is hinted to use the not selector , the answer would be
$("#Div12").click(function(){
$("div:not(#Div12)").css({ border : '1px solid #999' });
});
but , the border property creates inconsistencies with various browsers .
you forgot to put the question about div9 or it was mistakenly oomitted .
also , in <style> , u forgot to put the opening paranthesis for 'gold' class ...
hope it helps , please rate if helpful