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

9nvpjoqh  于 2023-01-09  发布在  其他
关注(0)|答案(3)|浏览(130)
    • 此问题在此处已有答案**:

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

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

nbnkbykc1#

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

twh00eeo

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

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>

相关问题