Не удается прочитать свойство className неопределенного

Я написал код для многооконной формы, но на изображении введите здесь описание изображения

я новичок в JavaScript, не могли бы вы помочь мне, спросите меня о чем-нибудь, что вам нужно, кроме этого

function fixStepIndicator(n) {
    // This function removes the "active" class of all steps...
    var i, x = document.getElementsByClassName("step");
    for (i = 0; i < x.length; i++) {
        x[i].className = x[i].className.replace(" active", "");
    }
    //... and adds the "active" class to the current step:
    x[n].className += " active";
}

javascript html
person Pranav Mandlik    schedule 14.03.2018    source источник
comment
это javascript, jquery не нужен, дайте мне знать, если вам нужно решение jquery   -  person Pranay Rana    schedule 14.03.2018
comment
Возможный дубликат stackoverflow .com/questions/11215258/   -  person Athul Nath    schedule 14.03.2018
comment
В какой строке ошибка?   -  person Agney    schedule 14.03.2018
comment
x[i].className = x[i].className.replace(активный,); Вот этот   -  person Pranav Mandlik    schedule 14.03.2018

Ответы (4)


arrow_upward
2
arrow_downward

вот как вы можете удалить имя класса

 var element = document.getElementById("myDIV");
 element.classList.remove("classname");

для добавления класса сделайте это

document.getElementById("myDIV").classList.add("classname");

Ссылка: https://caniuse.com/#search=classList

Примечание. Я предполагаю, что вы получаете элементы по этой строке x = document.getElementsByClassName("step");

person Pranay Rana    schedule 14.03.2018

arrow_upward
0
arrow_downward

Вы можете использовать document.querySelector().

Метод документа querySelector() возвращает первый элемент в документе, соответствующий указанному селектору или группе селекторов. Если совпадений не найдено, возвращается ноль.

В вашем случае вы хотите добавить класс active в тег img, поэтому, прежде чем добавлять class, вам нужно сначала проверить, уже ли active уже добавлен или не такой

//This function will call on image click
function onImgClik(event) {
    var activeImg = document.querySelector('img.active');
    if (activeImg) {
        activeImg.classList.remove('active');
    }
    event.target.classList.add('active');
    document.querySelector('button').disabled = false;
}


function onImgClik(event) {
    var activeImg = document.querySelector('img.active');
    if (activeImg) {
        activeImg.classList.remove('active');
    }
    event.target.classList.add('active');
    document.querySelector('button').disabled = false;
}
.container{
    display: grid;
}

.imageCnt{
  display: inline-flex;
  
}
.imageCnt img{
    height: 100px;
    border-radius: 50%;
    border: 2px solid #316eb5;
    margin: 5px;
}

.reg{
    background: green;
    color: #fff;
    border: 0px;
    padding: 8px;
    width: 138px;
    margin: 0 auto;
    font-weight: bold;
    border-radius: 0.3em;
    cursor: pointer;
}
.active{
    border-color: orange !important;
 }
<div class="container">
   <div class="imageCnt">
      <img onclick="onImgClik(event)"  src="https://www.qualitylogoproducts.com/images/_icons/icon_blue_add-user.svg">
      <img onclick="onImgClik(event)" src="https://www.qualitylogoproducts.com/images/_icons/icon_blue_add-user.svg">
      <img onclick="onImgClik(event)" src="https://www.qualitylogoproducts.com/images/_icons/icon_blue_add-user.svg">
      <img onclick="onImgClik(event)" src="https://www.qualitylogoproducts.com/images/_icons/icon_blue_add-user.svg">
   </div>
   <button disabled=true class="reg">Register</button>
</div>

person Narendra Jadhav    schedule 14.03.2018

arrow_upward
0
arrow_downward

Давний соглядатай, делаю свой первый небольшой вклад ‹3

Пришел к этому вопросу, пытаясь найти решение для той же ошибки. Я полагаю, что это произошло из-за изменения многошаговой формы, используемой в качестве примера здесь

Это может быть не лучшее решение, пожалуйста, знайте, что я только новичок.

Всем, кто пытается изменить пример и получает ту же ошибку, просто убедитесь, что если вы добавили дополнительные шаги в форму, вы также добавили их в эту часть HTML-кода перед </form>:

<!-- Circles which indicates the steps of the form: -->
<div style="text-align:center;margin-top:40px;">
  <span class="step"></span>
  <span class="step"></span>
  <span class="step"></span>
  <span class="step"></span>
  <span class="step"></span>  /*This extra step added manually fixed the error for us*/
</div>
</form>
person Jotaf    schedule 04.12.2019

arrow_upward
0
arrow_downward

Запустить функциональный цикл fixStepIndicator(n) со значением n

person gauraw tiwari    schedule 15.11.2020
comment
Не думайте, что это ответ, который ищет ОП. В консоли вы можете увидеть, что ошибка не может прочитать свойство className of undefined Это означает, что x[i] не определено. Я думаю, что одной из основных проблем является var i, x = document.getElementsByClassName. Я бы предложил попробовать определить их отдельно. - person Sebastian Karlsson; 15.11.2020