具有相同 ID 的两个元素 - 试图找出我可以更改的内容

Question

我正在构建一个日程安排应用程序，我意识到我的保存按钮不起作用的原因是因为我有多个具有相同 ID 的元素。我的行有一个基于小时的 ID 编号 moment.js，它根据 past/present/future 突出显示它们。我的输入也有一个基于小时的 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}`);
        }
    }
});

感谢任何帮助。对不起，它有很多代码。非常感谢。

Answer 1

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

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

const val = document.querySelector('[id="' + hour + '"] .hourinput').value;

具有相同 ID 的两个元素 - 试图找出我可以更改的内容

Two elements with same ID- trying to figure out what I can change

javascript

local-storage

ids