JavaScript如何实现点击按钮切换非只读sensor.value的布尔值

核心修改逻辑 #

• 为value展示区域添加可识别的选择器，修改值后可以直接更新页面显示
• 按钮绑定的点击事件直接使用当前循环作用域内的sensor变量，避免全局作用域访问不到局部变量的问题
• 修正赋值语法错误，切换值直接用取反逻辑简化代码
• 按钮追加到当前sensor对应的卡片内，不是全局容器中

完整可运行script.js代码 #

const container = document.getElementById("container");

// api url
const api_url = "https://hf3xzw.deta.dev/";

fetch(api_url)
  .then((r) => r.json())
  .then((body) => {
    for (let index = 0; index < 8; index++) {
      const sensor = JSONToSensor(body["sensors"][index]);

      let newCard = document.createElement("div");
      newCard.classList.add("card");

      // 给value的展示元素加类标识，方便后续修改
      newCard.innerHTML = `<br>
      <h2><span style="font-weight: normal;">Description: </span>${sensor.description}</h2>
      <h2><span style="font-weight: normal;">ID: </span>${sensor.id}</h2>
      <h2><span style="font-weight: normal;">Lat: </span>${sensor.lat}</h2>
      <h2><span style="font-weight: normal;">Lng: </span>${sensor.lng}</h2>
      <h2><span style="font-weight: normal;">Place: </span>${sensor.place}</h2>
      <h2><span style="font-weight: normal;">Read Only: </span>${sensor.readonly}</h2>
      <h2><span style="font-weight: normal;">State Code: </span>${sensor.state_code}</h2>
      <h2 class="sensor-value"><span style="font-weight: normal;">Value: </span>${sensor.value}</h2>
      `;

      // 非只读状态添加切换按钮
      if (!sensor.readonly) {
        let btn = document.createElement("button");
        btn.innerHTML = "Change value";
        btn.onclick = function () {
          // 直接取反切换布尔值
          sensor.value = !sensor.value;
          // 同步更新页面上的value展示
          newCard.querySelector('.sensor-value').innerHTML = `<span style="font-weight: normal;">Value: </span>${sensor.value}`;
        }
        // 按钮加到当前传感器卡片内
        newCard.appendChild(btn);
      }

      container.appendChild(newCard);
    }
  });

之前的代码问题说明 #

• 赋值时误用了比较运算符==，应该用赋值运算符=
• sensor是循环内的局部变量，全局声明的change函数无法访问到对应循环内的sensor实例
• 修改完sensor.value后没有更新页面上的对应展示内容
• 按钮直接追加到了全局容器，没有和对应的sensor卡片绑定

内容的提问来源于stack exchange，提问作者Yrvie