I am building a small social media site to enhance my skills in HTML CSS & JS, but I have ran into a problem.
I have an <img> in a <button>, and I am trying to change that image onclick() [the button will hide some text under the button].
The problem is that the image will not load. When I click the button, the new image will not load, and when I re-click the image to reload the image that was in the fist place, it won't load either.
The only clue I have is this error massage every time I click the buttton GET file:///C:/Users/emile/Desktop/Mini%20learning%20projects/Social%20App/scripts/iconsarrow-up.webp net::ERR_FILE_NOT_FOUND. This last part net::ERR_FILE_NOT_FOUND is weird because I copied the path of the image.
And when I try to open the image from the console in a new tab, it will tell me Your file couldn’t be accessedIt may have been moved, edited, or deleted. ERR_FILE_NOT_FOUND
Any ideas ?
Here is the code:
function ButtonHide() {
const element = document.getElementById('friend-request-container');
const personnaInfoDiv = document.getElementById('personnal-info');
const sideBarArrowTooltip = document.getElementById('sidebup-arrow-tooltip');
const friendRequestCount = document.getElementById('friend-request-count');
const sidebarArrowImage = document.getElementById('friends-arrow');
if (element.style.display === 'none') {
element.style.display = 'inline-block';
document.getElementById("personnal-info").style.marginBottom = "0px";
sideBarArrowTooltip.innerHTML = 'Hide Requests';
sidebarArrowImage.src = 'icons\arrow-up.webp';
} else {
element.style.display = 'none';
friendRequestCount.style = 'display: inline-block; position: absolute; top: 0px; width: 200px;';
document.getElementById("personnal-info").style.marginBottom = "15px";
sideBarArrowTooltip .innerHTML = 'Show Requests';
sidebarArrowImage.src = 'icons\vector-down-arrow.png';
}
}.sidebar {
position: fixed;
left: 0;
bottom: 0;
top: 55px;
background-color: white;
z-index: 100;
padding-top: 5px;
width: 372px;
margin-left: 20px;
margin-right: 30px;
}
.sidebar-top-container {
border-bottom: solid 2px rgb(199, 199, 199);;
}
.home {
display: inline-block;
font-size: 35px;
font-family: Roboto, Arial;
}
.create-button {
display: inline-block;
font-size: 17px;
color: rgb(23, 93, 255);
text-decoration: none;
margin-left: 223px;
font-family: Roboto, Arial;
font-weight: bold;
margin-bottom: 50px;
}
.personnal-info,
.friend-request-container {
position: relative;
}
.sidebar-profile-picture {
height: 30px;
border-radius: 16px;
margin-right: 8px;
}
.my-user-name {
display: inline-block;
font-size: 16px;
font-family: Roboto, Arial;
font-weight: bold;
position: absolute;
top: -8px;
margin-left: 2px;
}
.up-arrow {
width: 25px;
position: absolute;
top: 7.5px;
display: inline-block;
margin-bottom: 5px;
}
.friend-request-container {
margin-top: 10px;
}
.friend-request-image {
display: inline-block;
height: 46px;
border-radius: 23px;
margin-left: -9px;
}
.friend-request-count {
display: inline-block;
position: absolute;
top: 0px;
}
.sidebar-container {
display: inline-block;
margin-left: 190px;
width: 30px;
height: 30px;
}
.name-and-profile {
position: relative;
}
.up-arrow {
position: absolute;
top: -26px;
}
.name-and-profile {
position: relative;
}
.hide-requests-button{
background-color: transparent;
display: inline-block;
border: none;
height: 35px;
width: 35px;
padding: 4px;
border-radius: 22px;
margin-bottom: 85px;
margin-top: 4px;
margin-left: 308px;
padding-right: 30px;
padding-left: 5px;
cursor: pointer;
margin-top: 26.5px;
}
.hide-requests-button:hover {
background-color: rgb(215, 215, 215);
}
.hide-requests-button:active {
background-color: rgb(180, 180, 180);
}
.friend-request-count {
font-size: 15px;
font-weight: bold;
font-family: Roboto, Arial;
color: rgb(118, 118, 118);
}
.sidebar-container .tooltip {
margin-left: 300px;
}
.sidebar-container .tooltip {
z-index: 200;
}
.sidebar-container:hover .tooltip{
opacity: 1;
}
.sidebar-container .tooltip {
font-family: Roboto, Arial;
position: absolute;
background-color: gray;
color: white;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 8px;
padding-right: 8px;
border-radius: 2px;
font-size: 12px;
bottom: -30px;
opacity: 0;
transition: opacity 0.15s;
pointer-events: none;
white-space: nowrap;
}
.sidebar-container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
cursor: pointer;
} <div class="sidebar">
<div class="sidebar-top-container">
<div class="sidebar-heading">
<h1 class="home">Home</h1>
<a class="create-button" href="C:\Users\emile\Desktop\Mini learning projects\Social App\scripts\Home Page.html">Create</a>
</div>
<div class="personnal-info" style="height: 32px;" id="personnal-info">
<div class="name-and-profile">
<img class="sidebar-profile-picture" src="C:\Users\emile\Desktop\New HTML Course\icons\my profile.jpg">
<p class="my-user-name">Emile Feghali</p>
</div>
<div class="sidebar-container">
<button class="hide-requests-button" onclick="ButtonHide()">
<img class="up-arrow" id="friends-arrow" src="C:\Users\emile\Desktop\New HTML Course\icons\arrow-up.webp">
</button>
<div class="tooltip" id="sidebup-arrow-tooltip">Hide Requests</div>
</div>
</div>
<div class="friend-request-container" id="friend-request-container">
<img class="friend-request-image" src="C:\Users\emile\Desktop\New HTML Course\icons\add-friends-image.jpg">
<p class="friend-request-count" id="friend-request-count">2 pending friend requests</p>
</div>
</div>