javascript - 如何使用内部文本作为对象键

Question

我的一些代码有问题。我将对象的键设置为 ID 的值，但我需要它作为标签的文本。

 function formObj(elems) {
  let form = {};
  let label = document.querySelectorAll('label')
  for(let elem of elems) {
    let key = elem.label.innerText;
    let val = elem.value;
    if(key && val)
      form[key] = key ==="age" ? Number(val) : val;
  }
  console.log(form)
  return form;
}

<form>
    <label for='name'>name</label>
    <input type='text' id='name' value="Harry"/>

    <label for='email'>email</label>
    <input type='email' id='email' value="[e-mail]"/>

    <label for='age'>age</label>
    <input type='text' id='age' value="22"/>
<form/>

我不确定如何使用.innerHTML来完成此操作。
请帮忙

标签： javascript

Answer 1

您可以使用获取标签的文本，document.querySelector并innerText获取对应的标签，使用它而不是elem.id

let form = {};

let label = document.querySelectorAll('label');

let elements = document.querySelectorAll('form *')

const formObj = elems => {
  for (let elem of elems) {
    if (!elem.id) continue;
    let key = document.querySelector('label[for="' + elem.id + '"]').innerText;
    let val = elem.value;
    if (key && val)
      form[key] = key === "age" ? Number(val) : val;
  }

  console.log(form)
  return form;
}

formObj(elements);

<form>
  <label for='name'>nameA</label>
  <input type='text' id='name' value="Harry" />

  <label for='email'>emailB</label>
  <input type='email' id='email' value="[e-mail]" />

  <label for='age'>ageC</label>
  <input type='text' id='age' value="22" />
  <form/>