Question

我在学校有一项任务，我认为Java语言确实很难。现在开始时，我需要搜索所有内容，并且只能在不同的库中找到解决方案。

在这种情况下，我需要使用Vanilla JS。当我单击注销按钮时，它需要切换并显示登录按钮。

在任务中，我无法更改HTML，仅添加JS。

//学生

   <button class="signin-btn is-hidden">Log in </button>
    <button class="signout-btn">Log out </button>

Answer 1

您可以将点击事件侦听器添加到两个按钮，以将其自己的display更改为none并显示另一个按钮。

var login = document.querySelector('.signin-btn'),
logout = document.querySelector('.signout-btn');
login.addEventListener('click', function(e){
  this.classList.add('is-hidden');//adds is-hidden class
  logout.classList.remove('is-hidden');//removes is-hidden class
});
logout.addEventListener('click', function(e){
  this.classList.add('is-hidden');
  login.classList.remove('is-hidden');
});

.is-hidden{
  display: none;
}

<button class="signin-btn is-hidden">Log in </button>
<button class="signout-btn">Log out </button>

Answer 2

这是一种非常基本的方法，我建议以后再使用更高级的技术

function change() {
  document.getElementById('but').style.display = "none"
  document.getElementById('butother').style.display = "block"
}

function changeother() {
  document.getElementById('butother').style.display = "none"
  document.getElementById('but').style.display = "block"
}

<html>

<body>
  <button id="but" onclick='change()'>log in </button>
  <button id="butother" onclick='changeother()'>log out </button>
</body>

</html>

隐藏和显示按钮

2 个答案: