我正在尝试获取 div 中的按钮以及输入以仅将信息保存在本地存储中答案

【问题标题】：I'm trying to get a button that's in a div along with an input to save just the information in local storage我正在尝试获取 div 中的按钮以及输入以仅将信息保存在本地存储中
【发布时间】：2021-01-06 01:36:40
【问题描述】：

我在尝试通过单击按钮将输入保存到本地存储时遇到问题。

我希望按钮查看它自己的 div，找到与之关联的输入并仅使用原生 JavaScript 保存到本地存储。

不一定要寻找交给我的答案，但也许可以通过步行或我可以看看的资源/项目会有所帮助。我还是个初学者，所以不能 100% 确定所有内容的名称或查找内容。

let times = 
    [
        {time:'5:00 a.m.', key: 1},
        {time:'6:00 a.m.', key: 2},
        {time:'7:00 a.m.', key: 3},
        {time:'8:00 a.m.', key: 4},
        {time:'9:00 a.m.', key: 5},
        {time:'10:00 a.m.', key: 6},
        {time:'11:00 a.m.', key: 7},
        {time:'12:00 p.m.', key: 8},
        {time:'1:00 p.m.', key: 9},
        {time:'2:00 p.m.', key: 10},
        {time:'3:00 p.m.', key: 11},
        {time:'4:00 p.m.', key: 12},
        {time:'5:00 p.m.', key: 13},
        {time:'6:00 p.m.', key: 14},
        {time:'7:00 p.m.', key: 15},
        {time:'8:00 p.m.', key: 16},
        {time:'9:00 p.m.', key: 17},
        {time:'10:00 p.m.', key: 18}
    ];

// mock localStorage to make this code runnable in StackOverflow
mockLocalStorage = {
  getItem: function(key) {
    const found = times.find(el => el.key === key);
  }
}

function genList() {
  for (let i = 0; i < times.length; i++) {
    let newTimeBlock = document.createElement('form')
    newTimeBlock.classList.add('row', 'hour');
    newTimeBlock.setAttribute('key', times[i].key);
    document.querySelector('.dailyList').appendChild(newTimeBlock);

    //add the individual col per row
    //time Column
    let timeText = document.createElement('p');
    timeText.classList.add('col-2')
    timeText.textContent = times[i].time;
    newTimeBlock.appendChild(timeText);

    //input column
    let inputText = document.createElement('input');
    inputText.classList.add('col-9')
    inputText.style.width = '100%';
    inputText.id = 'inputs';
    // mock localStorage to make this code snippet runnable
    inputText.value = mockLocalStorage.getItem(times[i].key)
    newTimeBlock.appendChild(inputText);

    //save button column
    let saveBut = document.createElement('button')
    saveBut.classList.add('col-1', 'save');
    saveBut.textContent = 'Save';
    newTimeBlock.appendChild(saveBut);
  }
}



genList();

&lt;div class="dailyList"&gt;&lt;/div&gt;

【问题讨论】：

标签： javascript local-storage

【解决方案1】：

这是您的代码生成的 HTML：

<div class="dailyList">
  <form class="row hour" key="1"><p class="col-2">5:00 a.m.</p><input
    class="col-9" id="inputs" style="width: 100%;">
    <button class="col-1 save">Save</button>
  </form>
  <form class="row hour" key="2"><p class="col-2">6:00 a.m.</p><input
    class="col-9" id="inputs" style="width: 100%;">
    <button class="col-1 save">Save</button>
  </form>
  <!-- etc. -->
</div>

在继续之前需要更正几件事：

您的所有input 元素都具有相同的id 属性。这是无效的，所有 id 必须是唯一的。要么删除这些 id 属性，要么给每个 input 一个唯一的 id。
您的input 元素没有分配value 属性，因此它们显示为“未定义”。在最小值处，将value="" 添加到每个input。
您的form 元素具有key 属性。 key 是无效属性。如果要设置自定义属性，可以使用data-key。

解决这个问题：

我希望按钮查看它自己的 div，找到与之关联的输入...

每个按钮都需要有一个点击处理函数。像这样的：

saveBut.onclick = function (evt) {

  // get the button that was clicked
  const thisBtn = evt.currentTarget;

  // the button's associated input element is the prior sibling
  const thisInput = thisBtn.previousElementSibling;

  // get the input's value
  const val = thisInput.value;

  // etc.
  
}

【讨论】：

这很有帮助。你说它是作为类名而不是类出现的，这也很奇怪……当我将它加载到浏览器中时，它显示为类。还将表单更改为 div，删除键 attr 并将其更改为 ids。还有 localStorage.getItem 的值。抱歉，如果问题措辞不当。不久前才开始尝试处理所有事情。
@adumbcoder 对于我的className 评论，我深表歉意。我使用的编辑器自动将您的所有class 属性更改为className。我已经删除了上面的className 评论。

【解决方案2】：

尝试执行以下操作，看看是否有效：

...
saveBut.onclick = () => localStorage.setItem(times[i].key, times[i].time)
newTimeBlock.appendChild(saveBut)

您可以使用this repository 中的源代码查看此running example。
它直接来自这个MDN 文档，其中包括Storage.getItem/setItem 的所有详细文档。

还有一些小技巧：

尝试始终使用 const 而不是 let
由于 localStorage 始终保存为纯字符串，您可能必须使用 JSON.parse(...) 转换其数据

【讨论】：