Блог

Главная - Вопросы по программированию - Почему при изменении текста точки не меняются

Почему при изменении текста точки не меняются

#javascript #html #css

#язык JavaScript #HTML #CSS

Вопрос:

Я хочу, чтобы при изменении текста класс «слайдер-точка-активен» вступил в силу, но он не работает.

По какой-то причине, когда текст меняется, точки не изменяются и не адаптируют класс slider-dot-active, я новичок в этом, так что же именно я делаю не так?

 //Intervals for changing text and circles let bannerTxt = document.querySelector('.banner-txt'); let textArr = ['Monitor All Employee Activies', 'Add New Employee Details With Speech', 'Turn Employee Management To An Easier Task']; let changeTextCounter = 0  let sliderDots = document.querySelectorAll('.slider-dot');  function changeDots() {  for (let sliderDot of sliderDots) {  sliderDots[sliderDot].className.replace('slider-dot-active', "")  }   sliderDots[changeTextCounter - 1].className  = 'slider-dot-active'; }   function changeTxt() {  bannerTxt.innerHTML = textArr[changeTextCounter]  changeDots()  changeTextCounter    if (changeTextCounter gt;= textArr.length) {  changeTextCounter = 0  } }  let inst = setInterval(changeTxt, 3000) 
 .column-2 {  background-color: royalblue;  width: 50%; }  .thunder {  width: 300px;  margin-top: 1rem; }  .column-content h3 {  margin-top: -1rem; }  .column-content p {  color: #808080; }  .google-button {  width: 100%; }  .google-button svg {  margin-right: 0.5rem; }  .separator hr {  width: 20%;  margin-right: 0.5rem; }  .second-hr {  margin-right: 0;  margin-left: 0.5rem; }  .submit-btn {  width: 100%;  background-color: #29abe2;  color: white;  border-radius: 20px;  transition: all 1s ease; }  .submit-btn:hover {  border: 1px solid black; }  .create-account span {  color: #29abe2; }  .create-account span:hover {  text-decoration: underline; }  .create-account a {  text-decoration: none; }  .column-2 img {  height: 100vh;  width: 100%;  position: relative; }  .banner-heading {  text-align: center; }  .banner-txt {  position: absolute;  bottom: 8rem;  color: white;  font-family: "Poppins", sans-serif;  font-weight: 700; }  .banner-paragrapgh {  position: absolute;  bottom: 4rem;  color: white;  font-family: "Poppins", sans-serif; }  .matching-txt {  display: none;  font-size: 0.8rem; }  .banner-rectangles {  position: absolute;  bottom: 3rem; }  .slider-dot {  width: 10px;  height: 10px;  background-color: white;  margin-right: 1rem; }  .slider-dot-active {  width: 16px;  height: 7px;  background-color: white;  margin-right: 1rem; } 
 lt;div class="column-2"gt;  lt;img class="img-fluid" src="/Picture2.png" alt=""gt;  lt;div class="banner-heading d-flex justify-content-center"gt;  lt;h3 class="banner-txt"gt;Turn Employee Managment lt;spangt;lt;brgt;To An Easier Task.lt;/spangt;lt;/h3gt;  lt;div class="banner-rectangles d-flex"gt;  lt;div class="slider-dot"gt;lt;/divgt;  lt;div class="slider-dot"gt;lt;/divgt;  lt;div class="slider-dot"gt;lt;/divgt;  lt;/divgt;  lt;p class="banner-paragrapgh"gt;It gets easier after each step!lt;/pgt;  lt;/divgt; lt;/divgt; lt;/divgt;

Комментарии:

1. replace() возвращает новую строку, она не заменяет ее в/месте. Вам нужно сделать ...className = ...classname.replace(...)

Ответ №1:

Попробуйте это:

 function changeDots() {  for (let sliderDot of sliderDots) {  sliderDot.classList.remove('slider-dot-active')  }   sliderDots[changeTextCounter - 1].classList.add('slider-dot-active'); }

Комментарии:

1. Я получаю эту ошибку (Неперехваченная ошибка типа: Не удается прочитать свойства неопределенного (чтение «Списка классов») в changeTxt) @Saeed Shamloo

2. Сейчас это работает , я просто поместил функцию changeDots под changeTextCounter в другую функцию

3. может быть, это происходит, когда changeTextCounter равно 0. проверьте это. sliderDots[changeTextCounter == 0 ? 0 : changeTextCounter- 1].classList.add('slider-dot-active')

Метки: