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

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

我正在构建一个日程安排应用程序并意识到我的保存按钮不起作用的原因是因为我有多个具有相同 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,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}`);
        }
    }
});

任何帮助表示赞赏。对不起，这是很多代码。非常感谢。

解决方法

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

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

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