Question

无法读取未定义的属性“className”

2018-03-14

6492

javascript html

我已经为多窗口表单编写了代码，但图像中显示错误

我是 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

长期潜水，第一次做出小小贡献 <3

在尝试寻找完全相同错误的解决方案时遇到了这个问题。我认为这是修改用作示例的多步骤表单此处

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

对于尝试修改示例并遇到相同错误的所有用户，请确保如果您已向表单添加了额外步骤，则还将它们添加到 </form> 之前的 HTML 代码的这一部分：

<!-- 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>

Answer 3

您可以使用 document.querySelector() 。

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

在本例中，您想在 img 标签上添加 active 类，因此在添加 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>