debugging 按钮图标开关(类属性)？[重复]

9nvpjoqh 于 2023-01-09 发布在其他

关注(0)|答案(3)|浏览(144)

- 此问题在此处已有答案**：

Radio button onclick not working（5个答案）
3天前关闭。
截至3天前，社区正在审查是否重新讨论此问题。
有点新，为什么不工作？我创建了两个按钮，一个是播放按钮图标，一个是向下箭头图标。按钮应该通过改变"class"属性切换到不同的按钮。我尝试了一些东西，但显然不工作。我想我的问题是我不知道如何声明div1和div2变量。

var div1 = document.getElementById("div1")
    var div2 = document.getElementById("div2")

function updateButton() {
    var className = div1.getAttribute("class");
    if(className=="fa-solid fa-play") {
    div1.className = "fa-solid fa-pause";
    }
    if(className=="fa-solid fa-pause") {
    div1.className = "fa-solid fa-play";
    }
    }

    function updateButton2() {
        const div2 = document.getElementById(div2)
    var className = div2.getAttribute("class");
    if(className=="fa-solid fa-angle-down") {
    div2.className = "fa-solid fa-angle-up";
    }
    if(className=="fa-solid fa-angle-up") {
    div2.className = "fa-solid fa-angle-down";
    }
    }

<!DOCTYPE html>
<html>
<head>
    <script src="https://kit.fontawesome.com/0055907593.js" crossorigin="anonymous"></script>
</head>
<body>

    <div>
        <button class="player__button toggle" title="Toggle Play"><i class="fa-solid fa-play" id="div1" onclick="updateButton"></i></button>
        
         <button class="player__button toggle" title="Toggle Play"><i class="fa-solid fa-angle-down" id="div2" onclick="updateButton2"></i></button>
          </div>
</body>
</html>

debugging

来源：https://stackoverflow.com/questions/75021872/button-icon-switch-class-attribute

3条答案

按热度按时间

nbnkbykc1#

您应该删除行const div2 = document.getElementById(div2)，因为div2已经是元素引用，或者将其替换为const div2 = document.getElementById("div2")

赞(0）回复(0）举报 2023-01-09

twh00eeo2#

因此，我会将onclick...移动到button，而不是i，然后添加()
将onclick留在i上意味着只有在单击图像时才会发生更改（参见第二个按钮未更改，单击最角落不会更改第二个按钮，但第一个按钮会更改）

var div1 = document.getElementById("div1")
var div2 = document.getElementById("div2")

function updateButton() {
  var className = div1.getAttribute("class");
  if(className=="fa-solid fa-play") {
    div1.className = "fa-solid fa-pause";
  }
  if(className=="fa-solid fa-pause") {
    div1.className = "fa-solid fa-play";
  }
}

function updateButton2() {
  var className = div2.getAttribute("class");
  if(className=="fa-solid fa-angle-down") {
    div2.className = "fa-solid fa-angle-up";
  }
  if(className=="fa-solid fa-angle-up") {
    div2.className = "fa-solid fa-angle-down";
  }
}

<script src="https://kit.fontawesome.com/0055907593.js" crossorigin="anonymous"></script>

<div>
  <button class="player__button toggle" title="Toggle Play" onclick="updateButton()">
    <i class="fa-solid fa-play" id="div1"></i>
  </button>
        
  <button class="player__button toggle" title="Toggle Play">
    <i class="fa-solid fa-angle-down" id="div2" onclick="updateButton2()"></i>
  </button>
</div>

赞(0）回复(0）举报 2023-01-09

fkvaft9z3#

两个小问题1）add（）到你的函数调用。2）div2已经定义了。

var div1 = document.getElementById("div1")
var div2 = document.getElementById("div2")

function updateButton() {
  console.log("inside")
  var className = div1.getAttribute("class");
  if (className == "fa-solid fa-play") {
    div1.className = "fa-solid fa-pause";
  }
  if (className == "fa-solid fa-pause") {
    div1.className = "fa-solid fa-play";
  }
}

function updateButton2() {
 // const div2 = document.getElementById(div2)
  var className = div2.getAttribute("class");
  if (className == "fa-solid fa-angle-down") {
    div2.className = "fa-solid fa-angle-up";
  }
  if (className == "fa-solid fa-angle-up") {
    div2.className = "fa-solid fa-angle-down";
  }
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://kit.fontawesome.com/0055907593.js" crossorigin="anonymous"></script>
</head>

<body>

  <div>
    <button class="player__button toggle" title="Toggle Play"><i class="fa-solid fa-play" id="div1" onclick="updateButton()"></i></button>

    <button class="player__button toggle" title="Toggle Play"><i class="fa-solid fa-angle-down" id="div2" onclick="updateButton2()"></i></button>
  </div>
</body>

</html>

赞(0）回复(0）举报 2023-01-09

我来回答

debugging 按钮图标开关(类属性)？[重复]

3条答案

相关问题

热门标签

最新问答