无法读取动态生成的 HTML 个对象的值

Question

Datos() 将转换为 HTML 对象的信息加载到一个 HTML 文件中，每个文件的 class 都已定义。我需要 save() 来读取生成的 input 的值，但是当我尝试使用 document.querySelector() 来通过它们的 class 找到它们时，显然 returns null 并给我这个错误：

infoPersonal.js:67 Uncaught TypeError: Cannot read property 'value' of null at HTMLSpanElement. (infoPersonal.js:67)

我是不是做错了什么？

（我会添加一个片段代码，但由于某些导入它不起作用，我希望 javascript 代码足够了）

const datos = () => {
  const token = localStorage.getItem('token')
  if (token) {
    return fetch('https://janfa.gharsnull.now.sh/api/auth/me', {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          authorization: token,
        },
      })
      .then(x => x.json())
      .then(user => {
          const datalist = document.querySelectorAll(".data")
          datalist.forEach(function(el) {
              var divInfo = document.createElement("div")
              divInfo.setAttribute("class", `divInfo-${el.getAttribute("data-target")}`)
              var divInput = document.createElement("div")
              divInput.setAttribute("class", `divInput-${el.getAttribute("data-target")}`)
              divInput.hidden = true
              var input
              var icon

              const template = '<p>' + user[el.getAttribute("data-target")] + '</p>'

              input = document.createElement("input")
              input.type = "text"
              input.setAttribute("class", `input-${el.getAttribute("data-target")}`)
              input.value = user[el.getAttribute("data-target")]

              icon = document.createElement("span")
              icon.setAttribute("class", "flaticon-diskette")
              icon.setAttribute("data-target", `${el.getAttribute("data-target")}`)
              divInfo.innerHTML = template
              divInput.appendChild(input)
              divInput.appendChild(icon)
              el.appendChild(divInfo)
              el.appendChild(divInput)
            }
          })
      }).then(() => {
    save()
  })
}
}

const save = () => {
  const saves = document.querySelectorAll(".flaticon-diskette")
  saves.forEach(function(save) {
    const input = document.querySelector(`.input-${save.getAttribute("data-target")}`)
    save.addEventListener('click', () => {
      console.log(input.value)
    })
  })
}

Answer 1

这是更正后的剧本，祝你有美好的一天！

const datos= () => {
    const token = localStorage.getItem('token')
    if (token) {
        return fetch('https://janfa.gharsnull.now.sh/api/auth/me', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                authorization : token,
            },
        })
        .then( x => x.json())
        .then( user =>{
            const datalist = document.querySelectorAll(".data")
            datalist.forEach( function(el){
                var divInfo= document.createElement("div")
                divInfo.setAttribute("class", `divInfo-${el.getAttribute("data-target")}`)
                var divInput = document.createElement("div")
                divInput.setAttribute("class", `divInput-${el.getAttribute("data-target")}`)
                divInput.hidden= true
                var input
                var icon

                const template = '<p>' + user[el.getAttribute("data-target")] + '</p>'

                input = document.createElement("input")
                input.type = "text"
                input.setAttribute("class" , `input-${el.getAttribute("data-target")}`)
                input.value = user[el.getAttribute("data-target")]

                icon = document.createElement("span")
                icon.setAttribute("class", "flaticon-diskette")
                icon.setAttribute("data-target", `${el.getAttribute("data-target")}`)
                divInfo.innerHTML = template
                divInput.appendChild(input)
                divInput.appendChild(icon)
                el.appendChild(divInfo)
                el.appendChild(divInput)
                }
            })
        }).then (() =>{
            save()
        })
    }
} 

const save = () =>{
    const saves= document.querySelectorAll(".flaticon-diskette")
    saves.forEach(function(save){
        const input = document.querySelector(`.input-${save.getAttribute("data-target")}`)
        save.addEventListener('click', () =>{
            console.log(input.value)
        })
    })
}

无法读取动态生成的 HTML 个对象的值

Can't read value of dynamically generated HTML objects

html

javascript

queryselector