getElementByID 不断返回 undefined答案

【问题标题】：getElementByID keeps returning undefinedgetElementByID 不断返回 undefined
【发布时间】：2019-07-18 00:58:25
【问题描述】：

我目前收到标题中显示的错误，我已尝试通过在 stackoverflow 上找到的许多解决方案来解决该问题，但目前还没有一个有效，任何建议/帮助将不胜感激。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title> Donor Request </title>
  </head>
  <body>
    <form>
      <div>
        <label> Blood Type </label>
        <input type="text" name="" id="bloodType" value="">
        <label> Location </label>
        <input type="text" name="" id="Location" value="">
      </div>
      <button type="submit" name="button"> Request </button>
    </form>
  </body>
  <script type="text/javascript">

      const { ipcRenderer } = require('electron').remote;

      const form = document.querySelector('form')

      form.addEventListener('submit', submitForm);

      window.onload = function(){
        const bloodType = document.getElementById("bloodType").value;
      }

      function submitForm(e){
        e.preventDefault();
        console.log("working");
        console.log(bloodType, "working");
        ipcRenderer.send('Request:bloodType', bloodType);
    }

  </script>
</html>

【问题讨论】：

但是这里没有任何getElementByID 代码。
@MadhawaPriyashantha 我看到我不小心复制了旧版本，我更新了问题。

标签： javascript html dom electron

【解决方案1】：

当您使用const 时，您的变量将被限制在声明它的函数的范围内。这意味着您无法在 window.onload 回调函数之外访问 bloodType。

相反，一种可能的解决方案是将bloodType 设为全局变量，然后在onload 回调中设置其值，如下所示：

let bloodType;
window.onload = function(){
  bloodType = document.getElementById("bloodType").value;
}

这样，您可以通过所有函数访问bloodType，而只需查询一次 DOM。

【讨论】：

【解决方案2】：

在 onLoad 外部将 bloodType 声明为 var 或 let 以使其在另一个方法中可访问，或从 submitForm 内部获取。

function submitForm(e){
    const bloodType = document.getElementById("bloodType").value;
    e.preventDefault();
    console.log("working");
    console.log(bloodType, "working");
    ipcRenderer.send('Request:bloodType', bloodType);
}

let bloodType;

window.onload = function(){
    bloodType = document.getElementById("bloodType").value;
}

function submitForm(e){
    e.preventDefault();
    console.log("working");
    console.log(bloodType, "working");
    ipcRenderer.send('Request:bloodType', bloodType);
}

【讨论】：

它不返回一个数组。
我将答案更改为状态arrayLike

【解决方案3】：

正如其他人所提到的，您需要在 window.onload 函数之外使用 let 或在 submitForm 函数内定义 bloodType。

function submitForm(e) {
  let bloodType = document.getElementById("bloodType").value;

  e.preventDefault();
  console.log("working");

  console.log(bloodType, "working");
  ipcRenderer.send('Request:bloodType', bloodType);
}

这里有趣的是，您在submitForm 中使用的bloodType 变量不会引发引用错误。因为bloodType 指的是带有id=bloodType 的实际输入元素。

如果你有一个元素

<div id="example">some text</div>

example.innerHTML 返回some text 无需不必手动创建let example = document.getElementById("example") 变量

因此，如果您要使用现有代码执行bloodType.value，它将起作用。但是，你应该使用document.getElementById("bloodType").value

【讨论】：