无法读取属性＆＃39; className＆＃39;未定义的

Question

我已编写多窗口格式的代码，但图像中显示错误

我是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";
}

Answer 1

这是如何删除班级名称

的

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

用于添加类执行此操作

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

参考：https://caniuse.com/#search=classList

注意：我假设您要通过此行x = document.getElementsByClassName("step");

获取元素

Answer 2

您可以使用document.querySelector()。

Document方法 querySelector（）返回文档中与指定选择器或选择器组匹配的第一个Element。如果未找到匹配项，则返回null。

在您的情况下，您希望在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>

Answer 3

长期潜伏者，我的第一笔小贡献<3

通过尝试找到完全相同的错误的解决方案来解决此问题。我认为这来自修改示例here

所用的“多步”表单

这可能不是最佳解决方案，请知道我只是一个初学者。

对于每个试图修改示例并得到相同错误的人，只需确保如果您已向表单添加了额外的步骤，那么您还必须将其添加到HTML代码的此部分中，{{1}之前}：

numbers = []
while len(numbers) < 2 or numbers[-1] + numbers[-2] != 12:
    numbers.append(random.randint(1,6))

Answer 4

从n的值运行fixStepIndicator（n）函数循环