Кажется, Javascript не взаимодействует с моим веб-сайтом даже после того, как я связал его с моей HTML-страницей.

Кажется, Javascript не взаимодействует с моим веб-сайтом даже после того, как я связал его с моей HTML-страницей. ⇐ CSS

1 сообщение • Страница 1 из 1

Anonymous

Кажется, Javascript не взаимодействует с моим веб-сайтом даже после того, как я связал его с моей HTML-страницей.

Цитата

Сообщение Anonymous » 16 апр 2024, 08:18

Я новичок в программировании на HTML, CSS и JavaScript.
Мне нужна помощь с веб-сайтом-портфолио, который я создаю. Проблема связана с моим JavaScript, поскольку он не взаимодействует с моим веб-сайтом даже после привязки его к моей HTML-странице.
Области, где мне нужна помощь:

Мне нужно руководство по автоматическому перемещению ползунка без необходимости нажимать кнопку «Далее». Кроме того, когда я нажимаю «Далее», видео, встроенное в слайдер, не воспроизводится.
Функция «Гармошка» не открывается, когда я нажмите на знак плюса.

Я не уверен в основной причине этих проблем. Возможно, их причиной может быть структура моей веб-страницы. И слайдер, и аккордеон находятся на разных HTML-страницах, но используют один и тот же файл JavaScript.
Вот мои HTML и CSS для слайдера:
HTML:

Код: Выделить всё






[*]







[url=NEWMSK.html]
[img]grade1.jpg[/img]



2/2



❮[/url]
[url=https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css]







[img]Suffian-Name.png[/img]
[/url]

[list]
[url=#]Contact Me[/url]
[*][url=Project.html]Projects[/url]
[*][url=Experience.html]Experience[/url]
[*][url=Education.html]Education[/url]
[*][url=NEWMSK.html]Home[/url]
[/list]


[img]work-experince.jpg[/img]

 WORK EXPERIENCE





Work, Managerial Experience,Internship and Volunteering


 CURRENT JOB

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque vero autem ratione doloribus sapiente magni id saepe officiis doloremque, recusandae aliquam quibusdam, accusantium tempora reprehenderit sunt magnam accusamus? Et, obcaecati.





 MANAGERIAL EXPERIENCE/TEAM LEADER

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque vero autem ratione doloribus sapiente magni id saepe officiis doloremque, recusandae aliquam quibusdam, accusantium tempora reprehenderit sunt magnam accusamus? Et, obcaecati.





 RETAIL

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque vero autem ratione doloribus sapiente magni id saepe officiis doloremque, recusandae aliquam quibusdam, accusantium tempora reprehenderit sunt magnam accusamus? Et, obcaecati.





 INTERNSHIP

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque vero autem ratione doloribus sapiente magni id saepe officiis doloremque, recusandae aliquam quibusdam, accusantium tempora reprehenderit sunt magnam accusamus? Et, obcaecati.





 VOLUNTEERING

Lorem ipsum dolor sit amet consectetur adipisicing elit.  Eaque vero autem ratione doloribus sapiente magni id saepe officiis doloremque, recusandae aliquam quibusdam, accusantium tempora reprehenderit sunt magnam accusamus? Et, obcaecati.




©2024 MADE WITH ❤️ BY

вот CSS для аккордеона:

Код: Выделить всё

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: Hoefler Text;
background-color: rgb(233, 245, 248);
}

header {
margin: 3% 10%;
padding: 37px 0;
display: flex;
justify-content: space-between;
align-items: center;
}

.logo img {
max-width: 650px;
}

.main-nav {
font-size: 20px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #00BFFF;
}

.main-nav li {
float: right;
}

.main-nav li a {
display: block;
color: #ffffff;
text-align: center;
padding: 10px 12px;
text-decoration: none;
}

.main-nav li:hover {
background: #D3D3D3;
}

.work-wrapper {
margin: 10px;
width: 100%;
height: 100%;
display: flex;
gap: 2rem;

}

.workex {
max-width: 50%;
padding: 20px;
}

.text-container {
padding:20px;
text-align: center;

}

.text-word {
padding-top: 10px;
text-align: center;
margin-bottom: 10px;

}

span {
color: #00BFFF;
}

.word-box {
width: 100%;

}
.word-box p{
background-color: #00BFFF;
border-radius: 13px;
padding:2rem ;
border:2px solid #000000;}

@media screen and (max-width: 768px) {
header {
margin: 3% 5%;
}

.logo img {
max-width: 250px;
}

.work-wrapper {
flex-direction: column;
}

.workex {
max-width: 100%;
}

.text-container {
padding: 20px;
text-align: center;
}
}

.experience-heading-sub-text {
padding-top: 100px;
text-align: center;
margin: 0;
color: #00BFFF;
}
.accordion{
max-width: 800px;
margin: 0 auto;
}
.accordion .contentBx{
position: relative;
margin: 10px 20px;
}
.accordion .contentBx .label{
padding: 10px;
background: #00BFFF;
color: #ffffff;
cursor: pointer;
text-align: center;
}
.accordion .contentBx .label::before{
content: '+';
position: absolute;
top: 50%;
right: 5px;
transform: translateY(-50%);
font-size: 1.5em;
}
.accordion .contentBx .active .label::before{
content: '-';

}
.accordion .contentBx .content{
position: relative;
background:#fff;
height: 0;
overflow: hidden;
transition: 0.5s;
overflow-y: auto;
}
.contentBx.active .content{
height: 200px;
}

.footer-bottom {
background: rgb(233, 245, 248);
padding: 10px;
position: relative;
text-align: center;
align-items: center;
bottom: 0;
width: 100%;

}

.footer-bottom p {
font-size: 15px;
word-spacing: 2px;
text-transform: capitalize;
}

а вот файл JavaScript, общий для слайдера и аккордеона:

Код: Выделить всё

// The Slider//
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length;  i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
// Accordion//
const accordion = document.getElementsByClassName('contentBx');
for (let i = 0; i < accordion.length; i++) {
accordion[i].addEventListener('click', function() {
this.classList.toggle('active');
});
}

Я все перепробовал, ничего не помогает.

Подробнее здесь: https://stackoverflow.com/questions/783 ... g-it-to-my

1713244733

Anonymous

Я новичок в программировании на HTML, CSS и JavaScript.
Мне нужна помощь с веб-сайтом-портфолио, который я создаю. Проблема связана с моим JavaScript, поскольку он не взаимодействует с моим веб-сайтом даже после привязки его к моей HTML-странице.
Области, где мне нужна помощь:
[list]
[*]Мне нужно руководство по автоматическому перемещению ползунка без необходимости нажимать кнопку «Далее». Кроме того, когда я нажимаю «Далее», видео, встроенное в слайдер, не воспроизводится.

[*]Функция «Гармошка» не открывается, когда я нажмите на знак плюса.

[/list]
Я не уверен в основной причине этих проблем. Возможно, их причиной может быть структура моей веб-страницы.  И слайдер, и аккордеон находятся на разных HTML-страницах, но используют один и тот же файл JavaScript.
Вот мои HTML и CSS для слайдера:
HTML:
[code]





[*]







[url=NEWMSK.html]
[img]grade1.jpg[/img]



2/2



❮[/url]
[url=https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css]







[img]Suffian-Name.png[/img]
[/url]

[list]
[url=#]Contact Me[/url]
[*][url=Project.html]Projects[/url]
[*][url=Experience.html]Experience[/url]
[*][url=Education.html]Education[/url]
[*][url=NEWMSK.html]Home[/url]
[/list]


[img]work-experince.jpg[/img]

 WORK EXPERIENCE





Work, Managerial Experience,Internship and Volunteering


 CURRENT JOB

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque vero autem ratione doloribus sapiente magni id saepe officiis doloremque, recusandae aliquam quibusdam, accusantium tempora reprehenderit sunt magnam accusamus? Et, obcaecati.





 MANAGERIAL EXPERIENCE/TEAM LEADER

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque vero autem ratione doloribus sapiente magni id saepe officiis doloremque, recusandae aliquam quibusdam, accusantium tempora reprehenderit sunt magnam accusamus? Et, obcaecati.





 RETAIL

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque vero autem ratione doloribus sapiente magni id saepe officiis doloremque, recusandae aliquam quibusdam, accusantium tempora reprehenderit sunt magnam accusamus? Et, obcaecati.





 INTERNSHIP

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque vero autem ratione doloribus sapiente magni id saepe officiis doloremque, recusandae aliquam quibusdam, accusantium tempora reprehenderit sunt magnam accusamus? Et, obcaecati.





 VOLUNTEERING

Lorem ipsum dolor sit amet consectetur adipisicing elit.  Eaque vero autem ratione doloribus sapiente magni id saepe officiis doloremque, recusandae aliquam quibusdam, accusantium tempora reprehenderit sunt magnam accusamus? Et, obcaecati.




©2024 MADE WITH ❤️ BY 








[/code]
вот CSS для аккордеона:
[code]*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: Hoefler Text;
background-color: rgb(233, 245, 248);
}

header {
margin: 3% 10%;
padding: 37px 0;
display: flex;
justify-content: space-between;
align-items: center;
}

.logo img {
max-width: 650px;
}

.main-nav {
font-size: 20px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #00BFFF;
}

.main-nav li {
float: right;
}

.main-nav li a {
display: block;
color: #ffffff;
text-align: center;
padding: 10px 12px;
text-decoration: none;
}

.main-nav li:hover {
background: #D3D3D3;
}

.work-wrapper {
margin: 10px;
width: 100%;
height: 100%;
display: flex;
gap: 2rem;

}

.workex {
max-width: 50%;
padding: 20px;
}

.text-container {
padding:20px;
text-align: center;

}

.text-word {
padding-top: 10px;
text-align: center;
margin-bottom: 10px;

}

span {
color: #00BFFF;
}

.word-box {
width: 100%;

}
.word-box p{
background-color: #00BFFF;
border-radius: 13px;
padding:2rem ;
border:2px solid #000000;}

@media screen and (max-width: 768px) {
header {
margin: 3% 5%;
}

.logo img {
max-width: 250px;
}

.work-wrapper {
flex-direction: column;
}

.workex {
max-width: 100%;
}

.text-container {
padding: 20px;
text-align: center;
}
}

.experience-heading-sub-text {
padding-top: 100px;
text-align: center;
margin: 0;
color: #00BFFF;
}
.accordion{
max-width: 800px;
margin: 0 auto;
}
.accordion .contentBx{
position: relative;
margin: 10px 20px;
}
.accordion .contentBx .label{
padding: 10px;
background: #00BFFF;
color: #ffffff;
cursor: pointer;
text-align: center;
}
.accordion .contentBx .label::before{
content: '+';
position: absolute;
top: 50%;
right: 5px;
transform: translateY(-50%);
font-size: 1.5em;
}
.accordion .contentBx .active .label::before{
content: '-';

}
.accordion .contentBx .content{
position: relative;
background:#fff;
height: 0;
overflow: hidden;
transition: 0.5s;
overflow-y: auto;
}
.contentBx.active .content{
height: 200px;
}

.footer-bottom {
background: rgb(233, 245, 248);
padding: 10px;
position: relative;
text-align: center;
align-items: center;
bottom: 0;
width: 100%;

}

.footer-bottom p {
font-size: 15px;
word-spacing: 2px;
text-transform: capitalize;
}

[/code]
а вот файл JavaScript, общий для слайдера и аккордеона:
[code]// The Slider//
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length;  i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
// Accordion//
const accordion = document.getElementsByClassName('contentBx');
for (let i = 0; i < accordion.length; i++) {
accordion[i].addEventListener('click', function() {
this.classList.toggle('active');
});
}
[/code]
Я все перепробовал, ничего не помогает. 

Подробнее здесь: [url]https://stackoverflow.com/questions/78332090/javascript-doesnt-seem-to-interact-with-my-website-even-after-linking-it-to-my[/url]