قمت بانشاء هذا الكود في الجافاسكريبت ولكني لا استطيع تبديل الصورة
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./assets/images/favicon-32x32.png"
/>
<title>Frontend Mentor | FAQ accordion</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<style>
/* @font-face {
font-family: myFirstFont;
src:local("/assets/fonts/WorkSans-Italic-VariableFont_wght.ttf");} */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: hsla(279, 100%, 97%, 1);
background-image: url(/assets/images/background-pattern-desktop.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 120%;
font-family: Work Sans;
}
.mainImg {
width: 25px;
}
.hiding {
display: flex;
}
.hiding img {
width: 50px;
}
.panel {
padding: 0 18px;
display: none;
/* background-color: white; */
overflow: hidden;
}
.accordion {
/* background-color: #eee; */
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
background-color: white;
display: flex;
justify-content: space-between;
align-items: center;
}
.box{
width: 40%;
background-color: white;
margin: auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.hiding{
display: flex;
/* justify-content: space-between; */
align-items: center;
}
p{
text-align: left;
}
</style>
</head>
<body>
<!--div box -->
<!-- hiding -->
<div class="hiding">
</div>
<!-- // hiding -->
<div class="box">
<div class="hiding">
<img class="mainImg" src="/assets/images/icon-star.svg" alt="" />
<h1>FAQs</h1>
</div>
<!-- question 1 -->
<button class="accordion">Wat is Frontend Mentor, and how will it help me?
<img class="imgaccordion" src="/assets/images/icon-plus.svg" alt=""/>
</button>
<div class="panel">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure
aliquam fuga eligendi saepe nostrum provident sapiente dignissimos
cum labore molestiae! Reiciendis, ut. Obcaecati ipsum maiores
voluptatem qui facilis beatae ab.
</p>
</div>
<button class="accordion">Wat is Frontend Mentor, and how will it help me?
<img class="imgaccordion" src="/assets/images/icon-plus.svg" alt=""/>
</button>
<div class="panel">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure
aliquam fuga eligendi saepe nostrum provident sapiente dignissimos
cum labore molestiae! Reiciendis, ut. Obcaecati ipsum maiores
voluptatem qui facilis beatae ab.
</p>
</div>
<button class="accordion">Wat is Frontend Mentor, and how will it help me? <img class="imgaccordion" src="/assets/images/icon-plus.svg" alt=""/></button>
<div class="panel">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure
aliquam fuga eligendi saepe nostrum provident sapiente dignissimos
cum labore molestiae! Reiciendis, ut. Obcaecati ipsum maiores
voluptatem qui facilis beatae ab.
</p>
</div>
<button class="accordion">Wat is Frontend Mentor, and how will it help me? <img class="imgaccordion" src="/assets/images/icon-plus.svg" alt=""/></button>
<div class="panel">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure
aliquam fuga eligendi saepe nostrum provident sapiente dignissimos
cum labore molestiae! Reiciendis, ut. Obcaecati ipsum maiores
voluptatem qui facilis beatae ab.
</p>
</div>
</div>
<div class="attribution">
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>
<div>Coded by <a href="#">HemaFars</a></div>
</div>
</body>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
var img = document.getElementsByClassName("imgaccordion");
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
img.src == "assets/images/icon-minus.svg"
} else {
panel.style.display = "block";
}
if(img.src === "assets/images/icon-plus.svg"){
img.src = "assets/images/icon-minus.svg"
}else
img.src = "assets/images/icon-plus.svg"
});
}
</script>
</script>
</html>
برجاء المساعدة وتوضيح سبب عدم استطاعتي علما بانني قد درست اساسيات جافاسكريبت وHTML , CSS
قمت بانشاء هذا الكود في الجافاسكريبت ولكني لا استطيع تبديل الصورة <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- displays site properly based on user's device --> <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png" /> <title>Frontend Mentor | FAQ accordion</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"> <style> /* @font-face { font-family: myFirstFont; src:local("/assets/fonts/WorkSans-Italic-VariableFont_wght.ttf");} */ * { padding: 0; margin: 0; box-sizing: border-box; } body { background-color: hsla(279, 100%, 97%, 1); background-image: url(/assets/images/background-pattern-desktop.svg); background-repeat: no-repeat; background-position: center; background-size: 120%; font-family: Work Sans; } .mainImg { width: 25px; } .hiding { display: flex; } .hiding img { width: 50px; } .panel { padding: 0 18px; display: none; /* background-color: white; */ overflow: hidden; } .accordion { /* background-color: #eee; */ color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; background-color: white; display: flex; justify-content: space-between; align-items: center; } .box{ width: 40%; background-color: white; margin: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .hiding{ display: flex; /* justify-content: space-between; */ align-items: center; } p{ text-align: left; } </style> </head> <body> <!--div box --> <!-- hiding --> <div class="hiding"> </div> <!-- // hiding --> <div class="box"> <div class="hiding"> <img class="mainImg" src="/assets/images/icon-star.svg" alt="" /> <h1>FAQs</h1> </div> <!-- question 1 --> <button class="accordion">Wat is Frontend Mentor, and how will it help me? <img class="imgaccordion" src="/assets/images/icon-plus.svg" alt=""/> </button> <div class="panel"> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure aliquam fuga eligendi saepe nostrum provident sapiente dignissimos cum labore molestiae! Reiciendis, ut. Obcaecati ipsum maiores voluptatem qui facilis beatae ab. </p> </div> <button class="accordion">Wat is Frontend Mentor, and how will it help me? <img class="imgaccordion" src="/assets/images/icon-plus.svg" alt=""/> </button> <div class="panel"> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure aliquam fuga eligendi saepe nostrum provident sapiente dignissimos cum labore molestiae! Reiciendis, ut. Obcaecati ipsum maiores voluptatem qui facilis beatae ab. </p> </div> <button class="accordion">Wat is Frontend Mentor, and how will it help me? <img class="imgaccordion" src="/assets/images/icon-plus.svg" alt=""/></button> <div class="panel"> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure aliquam fuga eligendi saepe nostrum provident sapiente dignissimos cum labore molestiae! Reiciendis, ut. Obcaecati ipsum maiores voluptatem qui facilis beatae ab. </p> </div> <button class="accordion">Wat is Frontend Mentor, and how will it help me? <img class="imgaccordion" src="/assets/images/icon-plus.svg" alt=""/></button> <div class="panel"> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure aliquam fuga eligendi saepe nostrum provident sapiente dignissimos cum labore molestiae! Reiciendis, ut. Obcaecati ipsum maiores voluptatem qui facilis beatae ab. </p> </div> </div> <div class="attribution"> <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a> <div>Coded by <a href="#">HemaFars</a></div> </div> </body> <script> var acc = document.getElementsByClassName("accordion"); var i; var img = document.getElementsByClassName("imgaccordion"); for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; img.src == "assets/images/icon-minus.svg" } else { panel.style.display = "block"; } if(img.src === "assets/images/icon-plus.svg"){ img.src = "assets/images/icon-minus.svg" }else img.src = "assets/images/icon-plus.svg" }); } </script> </script> </html> برجاء المساعدة وتوضيح سبب عدم استطاعتي علما بانني قد درست اساسيات جافاسكريبت وHTML , CSS
