0

我正在构建一个日程安排应用程序并意识到我的保存按钮不起作用的原因是因为我有多个具有相同 ID 的元素。我的行有一个基于时间的 ID 编号，moment.js 根据过去/现在/未来突出显示它们。我的输入也有一个基于小时的 ID 号，这与我的保存功能一起使用。我想出的一切来解决这个问题，只是把一切都搞砸了。有任何想法吗？谢谢。下面是我的 HTML 的一部分（我有 0900-1700 小时的行）和我的一些 JS。

HTML：

  <tr class="row" id="16">
            <th scope="time" id="hour16" class="time">16:00</th>
            <td><input type="text" class= "hourinput" id= "16"/></td>
            <td class="btnContainer">
              <button class="saveBtn" onclick="saveHour(16)"><i class="fas fa-save"></i></button>
            </td>
          </tr>
          <tr class="row" id="17">
            <th scope="time" id="hour17" class="time">17:00</th>
            <td><input type="text" class= "hourinput" id= "17"/></td>
            <td class="btnContainer">
              <button class="saveBtn" onclick="saveHour(17)"><i class="fas fa-save"></i></button>
            </td>
          </tr>

JS：

const rows = document.getElementsByClassName("row");
let currentHour = parseInt(moment().format('HH'));

Array.from(rows).forEach(row => {
  let
    rowIdString = row.id,rowHour;
    // TEST: console.log(rowIdString);
  if (rowIdString) {
    rowHour = parseInt(rowIdString);
  }
  if (rowHour) {
    // Compares row id to current hour and sets color with the setColor(); function----//
    if (currentHour === rowHour) {
      setColor(row, "rgb(181,88,110, 0.55");
    } else if (currentHour < rowHour) {
      setColor(row, "rgb(255,255,255,0.45");
    } else if (currentHour > rowHour) {
      setColor(row, "rgb(85,46,109, 0.35)");
    }
  }
});

// Set color function below----------------------------------------------------------//
function setColor(element, color) {
  element.style.backgroundColor = color;
};

// Add input to local storage-------------------------------------------------------//

const saveHour = (hour) => {
    const val = document.getElementById('hour').value;
    localStorage.setItem(`hour:${hour}`, val);
};

const savePlan = () => {
    const inputs = Array.from(document.getElementsByClassName('hourinput'));
    const plan = inputs.map((input) => input.value);
    localStorage.setItem('plan', JSON.stringify(plan));
}

window.addEventListener('load', () => {
    const inputs = document.getElementsByClassName('hourinput');
    const planStr = localStorage.getItem('plan');
    const plan = JSON.parse(planStr);

    // TEST:console.log(plan);

    if (plan) {
        for (let i = 0; i < inputs.length; i++) {
            inputs[i].value = plan[i];
        }
    } else {
        for (let i = 0; i < inputs.length; i++) {
            inputs[i].value = localStorage.getItem(`hour:${inputs[i].id}`);
        }
    }
});

任何帮助表示赞赏。抱歉，代码很多。非常感谢。

4

1 回答 1

0

你不应该使用数字id，id应该以字母开头

您可以使用querySelector()获取输入值：

const val = document.querySelector('[id="' + hour + '"] .hourinput').value;
于 2021-07-26T00:34:27.117 回答