Question

我在我的网站上插入了一个禁用按钮，我希望它在单击另一个启用按钮时启用。我已经为它编写了代码。

代码（物化CSS）

var btn = document.getElementById("btn")

btn.addEventListener("click", function() {

  document.getElementById("btnn").classList.replace("btn disabled",
    "waves-effect waves-light btn");

})

<!DOCTYPE html>
<html>

<head>

  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />

  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <script type="text/javascript" src="js/file.js"></script>
</head>

<body>


  <nav>
    <div class="nav-wrapper">

    </div>
  </nav>

  <br>
  <br>
  <br>
  <br>
  <div align="middle" hspace="30>
      

      <a href=" https://vimeo.com/271908370 "><font size="4 ">Click </font> <a 
      class="btn disabled " id ="btnn ">Skip Ad</a> </a><font size="4 "> to skip 
      the ad and play the video.</font>
    </a> 
    </p>
    <br>

    <iframe src="https://player.vimeo.com/video/271908370? autoplay=1&title=0&byline=0&portrait=0 " width="640 " height="360 " 
    frameborder="0 " webkitallowfullscreen mozallowfullscreen allowfullscreen> 
    </iframe>

     <br>

      <a class="waves-effect waves-light btn " id="btn ">button</a>



      <!--JavaScript at end of body for optimized loading-->
      <script type="text/javascript " src="js/materialize.min.js "></script>
    </body>
    </html>

然而，这不起作用。即使单击启用按钮后，禁用的按钮仍处于禁用状态。我不知道我哪里出错了。任何帮助，将不胜感激。感谢。

Answer 1

您的代码抛出错误，因为const params = BotChat.queryParams(location.search);方法不能包含多个类（实际上是空格）。要解决您的问题，您必须调用classList.replace和classList.remove方法。

您更新的JS：

classList.add

Answer 2

.replace()只能用于将一个类替换为另一个类，不能给它多个类。如果要替换多个类，请使用.remove()和.add()。

HTML中的id属性中还有额外的空格。 id="btnn "应为id="btn"。这导致document.getElementById()失败。

var btn = document.getElementById("btn");

btn.addEventListener("click", function() {

  document.getElementById("btnn").classList.remove("disabled");
  document.getElementById("btnn").classList.add("waves-effect", "waves-light");

})

.disabled {
  color: grey;
}

.waves-effect {
  color: yellow;
}

.waves-light {
  background-color: blue;
}

<a class="btn disabled" id="btnn">Skip Ad</a> </a>
<br>
<a class="waves-effect waves-light btn" id="btn">button</a>

Answer 3

var btn = document.getElementById("btnn");
btn.className =
btn.className.replace("btn disabled",
    "waves-effect waves-light btn");

替换为空格，只能发生在字符串上。

替换类名

3 个答案: