Issue
When I click on the "Sign Out" anchor, I want the body of my design.html document to turn black and for a pop up blurb, like a speech bubble, to pop up next to where the word sign out originally was. Having this effect means you shouldn't be able to see "Sign Out" because the color of that list element is also black.
I'm working on the first part--getting hovering over a list element to change the color of the body of the document.
The JavaScript I've posted does nothing to my web page. No changes when we mouse over or mouse out.
What changes should I make to get the desired effect?
document.getElementsByTagName("li").addEventListener("mouseover", function ()
document.body.style.background = black
);
document.getElementsByTagName("li").addEventListener("mouseout", function ()
document.body.style.background = pink
);body {
position: absolute;
text-align: center;
width: 100%;
height: 100%;
}
ul {
list-style-type: none;
}
li {
margin: 50px;
}
#leftlist {
position: absolute;
left: 0%;
bottom: 40%;
}
#rightlist {
position: absolute;
right: 0%;
bottom: 40%;
}
#bottomlist {
position: absolute;
right: 25%;
bottom: 10%;
}
#bottomlist li {
display: inline;
}
a {
text-decoration: none;
color: inherit;
}<body>
<h3 id="header">Design Mode</h3>
<ul id="leftlist">
<li>View </li>
<li>Coping Skills</li>
<li>Notes to Self</li>
</ul>
<ul id="rightlist">
<li>Objects</li>
<li>Background</li>
<li>Sound</li>
</ul>
<ul id="bottomlist">
<li><a href="../homepage/index.html">Sign Out</a></li>
<li width=10px>Sign in Using Different Username</li>
<li>Save</li>
</ul>
<!-- script type="text/javascript" src="scriptdesign.js" defer -->
</body>Solution
You should use querySelectorAll() to get a collection of elements which you can then iterate over with forEach to add the event handlers.
Also, you need to put quotes around the colours you want to use.
document.querySelectorAll("li").forEach(el => {
el.addEventListener("mouseover", () => {
document.body.style.background = "black"
})
});
document.querySelectorAll("li").forEach(el => {
el.addEventListener("mouseout", () => {
document.body.style.background = "pink"
})
});body {
position: absolute;
text-align: center;
width: 100%;
height: 100%;
}
ul {
list-style-type: none;
}
li {
margin: 50px;
}
#leftlist {
position: absolute;
left: 0%;
bottom: 40%;
}
#rightlist {
position: absolute;
right: 0%;
bottom: 40%;
}
#bottomlist {
position: absolute;
right: 25%;
bottom: 10%;
}
#bottomlist li {
display: inline;
}
a {
text-decoration: none;
color: inherit;
}<body>
<h3 id="header">Design Mode</h3>
<ul id="leftlist">
<li>View </li>
<li>Coping Skills</li>
<li>Notes to Self</li>
</ul>
<ul id="rightlist">
<li>Objects</li>
<li>Background</li>
<li>Sound</li>
</ul>
<ul id="bottomlist">
<li><a href="../homepage/index.html">Sign Out</a></li>
<li width=10px>Sign in Using Different Username</li>
<li>Save</li>
</ul>
<!-- script type="text/javascript" src="scriptdesign.js" defer -->
</body>Answered By - PeterJames
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.