Question

每当我单击按钮时，我都试图在div上显示数字。因此，我创建了2个按钮，一个按钮用于从数字中减去“ 1”，另一个按钮用于增加数字。但是，每当我单击减量按钮时，它甚至都没有起作用，但是增加按钮却一次起作用，然后两个按钮都消失了

<!DOCTYPE html>
<html>
<head>
    <title>
        hello
    </title>
    <style type="text/css">
        .container
         {
            height:500px;
            width: 500px;
            background-color: #494d5f;
            position: relative;
            color:white;
            font-size: 50px;
            text-align: center;
            line-height:500px; 
         }
        .left,.right
        {
            position: absolute;
            top:50%;
            color: black;
        }
        .right
        {
            right: 0;
        }
        .left
        {
            left:0;
        }
    </style>
</head>
<body>
    <div class="container">1
        <button class="left" onclick="minus()"><</button>
        <button class="right" onclick="plus()">></button>

    </div>
    <script type="text/javascript">
        var selected=1;
         function minus()
             {
               selected-=1;
               document.querySelector(".container").textContent=selected;
             }
         function plus()
             {
               selected+=1;
               document.querySelector(".container").textContent=selected;
             } 
    </script>
</body>
</html>

。

Answer 1

由于要替换容器的内容，因此必须将数字包装在另一个元素中，如下所示：

<div class="container">
    <span id="number">1</span>
    <button class="left" onclick="minus()"><</button>
    <button class="right" onclick="plus()">></button>
</div>

在函数中：

<script type="text/javascript">
    var selected=1;
     function minus()
         {
           selected-=1;
           document.querySelector("#number").textContent=selected;
         }
     function plus()
         {
           selected+=1;
           document.querySelector("#number").textContent=selected;
         } 
</script>

摘要：

<!DOCTYPE html>
<html>
<head>
    <title>
        hello
    </title>
    <style type="text/css">
        .container
         {
            height:500px;
            width: 500px;
            background-color: #494d5f;
            position: relative;
            color:white;
            font-size: 50px;
            text-align: center;
            line-height:500px; 
         }
        .left,.right
        {
            position: absolute;
            top:50%;
            color: black;
        }
        .right
        {
            right: 0;
        }
        .left
        {
            left:0;
        }
    </style>
</head>
<body>
    <div class="container">
        <span id="number">1</span>
        <button class="left" onclick="minus()"><</button>
        <button class="right" onclick="plus()">></button>

    </div>
    <script type="text/javascript">
        var selected=1;
         function minus()
             {
               selected-=1;
               document.querySelector("#number").textContent=selected;
             }
         function plus()
             {
               selected+=1;
               document.querySelector("#number").textContent=selected;
             } 
    </script>
</body>
</html>

Answer 2

它用选定的任何值替换容器的内容，这也意味着它删除按钮，因为它们在容器中。我建议将您要更改的内容单独包装起来。

<!DOCTYPE html>
<html>

<head>
  <title>
    hello
  </title>
  <style type="text/css">
    .container {
      height: 500px;
      width: 500px;
      background-color: #494d5f;
      position: relative;
      color: white;
      font-size: 50px;
      text-align: center;
      line-height: 500px;
    }
    
    .left,
    .right {
      position: absolute;
      top: 50%;
      color: black;
    }
    
    .right {
      right: 0;
    }
    
    .left {
      left: 0;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="main-content">1</div>
    <button class="left" onclick="minus()"><</button>
    <button class="right" onclick="plus()">></button>

  </div>
  <script type="text/javascript">
    var selected = 1;

    function minus() {
      selected -= 1;
      document.querySelector(".main-content").textContent = selected;
    }

    function plus() {
      selected += 1;
      document.querySelector(".main-content").textContent = selected;
    }
  </script>
</body>

</html>

为什么单击按钮时按钮消失了？

2 个答案: