Issue
What I'm trying to do here is create a design page for a user to be able to design a safe space. I give the user lots of different tools mentioned as list elements to be able to edit, move to different pages, and other functionalities. In the center of the screen will be an image of the virtual space the user is designing.
Currently, the center of the screen is an image of a waterfall. I want to be able to hover over any of the list elements (excluding the "background" list element) and make the image of the waterfall disappear, as everything else turns black except for the list element the user is hovering over.
After adding in some new code, I still wasn't able to get my desired result.
Any suggestions?
Here is the code I am working with:
My HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styledesign.css">
</head>
<body>
<h1 id="header">Design Mode</h1>
<img src="./imagesdesign/purplewaterfall.png">
<ul id="rightlist">
<li>View </li>
<li id="blurb">Coping Skills</li>
<li id="blurb">Notes to Self</li>
</ul>
<ul id="leftlist">
<li>Objects</li>
<li id="backgroundli">Background</li>
<li>Sound</li>
</ul>
<ul id="bottomlist">
<li><a href="../homepage/index.html">Sign Out</a></li>
<li width=10px><a href="../loginpage/login.html">
Sign in Using Different Username</a></li>
<li>Save</li>
</ul>
<script type="text/javascript" src="scriptdesign.js"></script>
</body>
</html>
My JavaScript:
//change color of list element when hovering over it
//change color of list element back when not hovering over it
//make my background image disappear when hovering over any li element...
//...other than the background li...
//...and reappear once stopped hovering
document.querySelectorAll("li").forEach(el => {
el.addEventListener("mouseover", () => {
document.body.style.background = "black";
el.style.color = "white";
//document.querySelector("img").style.display = "none";
})
});
document.querySelectorAll("li").forEach(el => {
el.addEventListener("mouseout", () => {
document.body.style.background = "pink";
el.style.color = "black";
//document.querySelector("img").style.display = "block";
})
});
//document.getElementById("backgroundli").addEventListener("mouseover", () => {
// document.querySelector("img").style.display = "block"
// })
//});
Solution
Firstly, you can group most of the changes you're making into a couple forEach loops since the event listener and element which you are targeting are the same for most of your loops. I've grouped them into three event listener forEach loops.
Second, there were just a few syntax errors within your code which I cleaned up as well. You spelt ocument.querySelector("img") instead of document.querySelector("img") and added an extra }) at the end of your last line of JavaScript.
document.querySelectorAll("li").forEach(el => {
el.addEventListener("mouseover", () => {
//change the color of the body when hovering over any list item
document.body.style.background = "black"
//change the color of the hovered list element when hovering over it
el.style.color = "white"
//make all images disappear when hovering over any li element
document.querySelector("img").style.display = "none"
})
});
document.querySelectorAll("li").forEach(el => {
el.addEventListener("mouseout", () => {
//change the color of the body to pink when finished hovering over any list item
document.body.style.background = "pink"
//change the color of the hovered list element back to black when finished hovering over it
el.style.color = "black"
//make all images reappear when finished hovering over any li element
document.querySelector("img").style.display = "block"
})
});
document.getElementById("backgroundli").addEventListener("mouseover", () => {
//other than the background li...
document.querySelector("img").style.display = "block"
});<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styledesign.css">
</head>
<body>
<h1 id="header">Design Mode</h1>
<img src="./imagesdesign/purplewaterfall.png">
<ul id="rightlist">
<li>View </li>
<li id="blurb">Coping Skills</li>
<li id="blurb">Notes to Self</li>
</ul>
<ul id="leftlist">
<li>Objects</li>
<li id="backgroundli">Background</li>
<li>Sound</li>
</ul>
<ul id="bottomlist">
<li><a href="../homepage/index.html">Sign Out</a></li>
<li width=10px><a href="../loginpage/login.html">
Sign in Using Different Username</a></li>
<li>Save</li>
</ul>
</body>
<script type="text/javascript" src="scriptdesign.js"></script>
</html>I've added comments to the JavaScript above some lines to describe what is going on. Let me know if you need further clarification.
Answered By - Nick Friesen
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.