Question

如何在点击这些自定义“按钮”时显示文字？我想这是一个if声明，但我不确定如何合并那些以及所有其他陈述都需要这样做，我已经尝试过但是没有成功，并且想知道是否有人可以提供帮助？

sed -i 's/[a-zA-Z0-9;}{]  *$/[a-zA-Z0-9;}{]/' file
                         ^ keep the original characters

function alter() {
  var button = document.getElementById('addButton');
  button.setAttribute('class', 'cancelButton');
}

function alter2() {
  var button = document.getElementById('leftButton');
  button.setAttribute('class', 'cancelLeftButton');
}

function alter3() {
  var button = document.getElementById('rightButton');
  button.setAttribute('class', 'cancelRightButton');
}

#addButton {
  background-color: black;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -50px;
  font-size: 60px;
  color: white;
  text-align: center;
  line-height: 90px;
}
.cancelButton {
  animation: turnToCross 1s forwards cubic-bezier(0.000, 1.650, 1.000, 1.650);
}
@keyframes turnToCross {
  to {
    border-radius: 0;
    transform: rotate(45deg);
    background-color: #AD80FF;
  }
  from {}
}
#leftButton {
  background-color: black;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: fixed;
  top: 50%;
  left: 25%;
  margin: -50px;
  font-size: 60px;
  color: white;
  text-align: center;
  line-height: 90px;
}
.cancelLeftButton {
  animation: turnToCross 1s forwards cubic-bezier(0.000, 1.650, 1.000, 1.650);
}
@keyframes turnToCross {
  to {
    border-radius: 0;
    transform: rotate(45deg);
    background-color: #AD80FF;
  }
  from {}
}
#rightButton {
  background-color: black;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: fixed;
  top: 50%;
  right: 25%;
  margin: -50px;
  font-size: 60px;
  color: white;
  text-align: center;
  line-height: 90px;
}
.cancelRightButton {
  animation: turnToCross 1s forwards cubic-bezier(0.000, 1.650, 1.000, 1.650);
}
@keyframes turnToCross {
  to {
    border-radius: 0;
    transform: rotate(45deg);
    background-color: #AD80FF;
  }
  from {}
}

Answer 1

首先，您需要添加要显示文本的元素

  <body>
        <div onclick="alter()" id="addButton">+</div>
        <div onclick="alter2()" id="leftButton">+</div>
        <div onclick="alter3()" id="rightButton">+</div>
        <div id="showhereid "></div>
    </body>

然后，在要点击的按钮功能内，你将插入这行代码

 document.getElementById('showhereid').innerHTML = "your text";

您的javascript代码如下所示：

<script>
            function alter() {
                var button = document.getElementById('addButton');
                button.setAttribute('class', 'cancelButton');
                document.getElementById('showhereid').innerHTML = "your text";
            }

            function alter2() {
                var button = document.getElementById('leftButton');
                button.setAttribute('class', 'cancelLeftButton');
               document.getElementById('showhereid').innerHTML = "your text";
            }

            function alter3() {
                var button = document.getElementById('rightButton');
                button.setAttribute('class', 'cancelRightButton');
                document.getElementById('showhereid').innerHTML = "your text";
            }
        </script>

看看是否有帮助：）

Answer 2

假设@Farhan是正确的，你可以这样做：

button.innerHTML = "Text";

代码中的示例：

function alter() {
    var button = document.getElementById('addButton');
    button.setAttribute('class', 'cancelButton');
    button.innerHTML = "My text";
}

Answer 3

根据我的理解，在每个点击功能中添加button.innerHTML = "place your text";

<script>
    function alter() {
        var button = document.getElementById('addButton');
        button.setAttribute('class', 'cancelButton');
        button.innerHTML = "place your text";
    }

    function alter2() {
        var button = document.getElementById('leftButton');
        button.setAttribute('class', 'cancelLeftButton');
        button.innerHTML = "place your text";
    }

    function alter3() {
        var button = document.getElementById('rightButton');
        button.setAttribute('class', 'cancelRightButton');
        button.innerHTML = "place your text";
    }
</script>

如何在点击时显示文字？

3 个答案: