Bootstrap

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

问题:

很简单的一个题,找了半天错误发现是把 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>
;