显示微调器 onclick

Question

我构建了一个微调器并使用 CSS 对其进行动画处理，现在我试图隐藏微调器并在单击按钮时显示它。到目前为止，我已经写了这段代码，当我点击提交时它没有显示 <button>

我用 display:none 隐藏了微调器，并尝试使用 JavaScript 将 <div> 更改为 display:block ，但它不起作用。

CSS：

 * {
margin: 0;
padding: 0;
}

.loader {
   display: none;
   top: 50%;
   left: 50%;
   position: absolute;
   transform: translate(-50%, -50%);
}

.loading {
   border: 2px solid #ccc;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   border-top-color: #1ecd97;
   border-left-color:  #1ecd97;
   animation: spin 1s infinite ease-in;
}

@keyframes spin {
   0% {
       transform: rotate(0deg);
   }
   100% {
       transform: rotate(360deg);
   }
}

脚本：

  function spinner() {
 document.getElementsByClassName("loader").style.display = "block";
 }

HTML:

 <button type="submit" class="sbtn btn btn-secondary btn-c"
onclick="spinner()" >Log in</button>

我是 Javascript 的新手，所以我想我会在这里得到一些指导。

原文由 slimderek 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果要向微调器添加样式，则必须获取函数返回的第一个元素 getElementsByClassName 。

getElementsByClassName 返回一个列表，其中包含具有该特定类的元素。

getElementById 返回一个具有给定 ID 的元素。

在你的情况下，我建议给加载程序一个 ID 并执行 getElementById 。但是如果你想使用 getElementsByClassName 你可以这样做：

 document.getElementsByClassName("loader")[0].style.display = "block";

这是一个工作的尖晶石：

 * {
  margin: 0;
  padding: 0;
}

.loader {
  display: none;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

.loading {
  border: 2px solid #ccc;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border-top-color: #1ecd97;
  border-left-color: #1ecd97;
  animation: spin 1s infinite ease-in;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

 <button type="submit" class="sbtn btn btn-secondary btn-c" onclick="spinner()">Log in</button>
<div class="loader">
  <div class="loading">
  </div>
</div>

<script type="text/javascript">
    function spinner() {
        document.getElementsByClassName("loader")[0].style.display = "block";
    }
</script>

原文由 Diogo Peres 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你没有让我们知道你想在哪里添加微调器，所以我创建了 <div> 它将包含微调器的动画，如下所示：

HTML:

 <button type="submit" id="btn" class="sbtn btn btn-secondary btn-c">Log in</button>

<div class='spinner-displayer'></div>

CSS：

 * {
  margin: 0;
  padding: 0;
}

.loader {
  display: none;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

.loading {
  border: 2px solid #ccc;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border-top-color: #1ecd97;
  border-left-color:  #1ecd97;
  animation: spin 1s infinite ease-in;
}

@keyframes spin {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

脚本：

 function spinner() {
    const spinnerDisplayer = document.querySelector('.spinner-displayer');
    const btn = document.getElementById('btn');

    btn.addEventListener('click', () => {
    spinnerDisplayer.classList.add('loading');
  })
}

spinner();

检查此 工作代码示例。

我建议您不要在 HTML 上使用 内联事件处理程序， 这是个坏主意。

原文由 Manuel Abascal 发布，翻译遵循 CC BY-SA 4.0 许可协议