【js】加减号，关于属性值设置的一个小点

茄茄茄子eggplant

于 2023-03-21 11:00:40 发布

阅读量87

点赞数 1

分类专栏： js学习文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_43226415/article/details/129684071

版权

js学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

该文章展示了一个简单的HTML结构，包含两个按钮（加、减）和一个只读输入框，用于显示数字并允许用户增加或减少数值。JavaScript代码负责监听点击事件，更新输入框的值并根据条件禁用按钮。错误在于将`disabled=true`误写为`disabled=true`，导致功能失效。修复此问题后，按钮的禁用状态能正确根据数字范围更新。

摘要由CSDN通过智能技术生成

问题：

很简单的一个题，找了半天错误发现是把 disabled=true设置成disabled=“true” 了，忘了这是直接设置的属性值，设置style下的那些不加 ""会被当成变量。

原题：

做效果：
在这里插入图片描述

 div {
        width: 80px;
      }

      input[type="text"] {
        width: 50px;
        height: 44px;
        outline: none;
        border: 1px solid #ccc;
        text-align: center;
        border-right: 0;
      }

      input[type="button"] {
        height: 24px;
        width: 22px;
        cursor: pointer;
      }

      input {
        float: left;
        border: 1px solid #ccc;
      }

 <div>
      <input type="text" id="total" value="1" readonly />
      <input type="button" value="+" id="add" />
      <input type="button" value="-" id="reduce" />
      <script>
        const content = document.querySelector("#total");
        const inputs = document.querySelector("div");
        const add = document.querySelector("#add");
        const reduce = document.querySelector("#reduce");

        inputs.addEventListener("click", function (e) {
          if (e.target.id === "add") {
            content.value = Number(content.value) + 1;
            reduce.disabled = false;
            if (content.value >= 5) {
              add.disabled = true;
            }
          } else if (e.target.id === "reduce") {
            content.value = Number(content.value) - 1;
            add.disabled = false;
            if (content.value <= 0) {
              reduce.disabled = true;
            }
          }
        });
      </script>
    </div>