getElementByID 不断返回 undefined
[英]getElementByID keeps returning undefined
问题描述
Im currently getting the error shown in the title and I've tried to fix the problem with numerous solutions found on stackoverflow but none have worked as of yet, any suggestions/help would be appreciated.
我目前收到标题中显示的错误，我尝试使用在 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>
3 个解决方案
解决方案1
1 2019-02-24 13:38:48
When you use const your variable will be confined to the scope of the function it was declared within.当您使用const您的变量将被限制在它声明的函数的范围内。 This means that you cannot access bloodType outside your window.onload callback function.这意味着您无法在window.onload回调函数之外访问bloodType 。
Instead, one possible solution could be to make bloodType a global variable, and then set its value within your onload callback like so:相反，一种可能的解决方案是将bloodType全局变量，然后在您的onload回调中设置其值，如下所示：
let bloodType;
window.onload = function(){
bloodType = document.getElementById("bloodType").value;
}
This way, you can access bloodType through all your functions, with only having to query the DOM once.这样，您就可以通过所有函数访问bloodType ，而只需查询一次 DOM。
解决方案2
0 已采纳 2019-02-24 13:31:39
Declare bloodType as a var or let outside of onLoad to make it accessible inside another method, or obtain it from inside submitForm .将bloodType声明为var或let在 onLoad 外部使其可在另一个方法中访问，或从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);
}
解决方案3
0 2019-02-24 13:41:59
As others have mentioned, you need to define bloodType outside of the window.onload function using let or inside the submitForm function.正如其他人所提到的，您需要在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);
}
The interesting thing here is that bloodType variable you use in your submitForm will not throw a reference error.有趣的是，您在submitForm使用的bloodType变量不会引发引用错误。 Because bloodType refers to the actual input element with the id=bloodType .因为bloodType是指具有id=bloodType的实际输入元素。
If you have an element如果你有一个元素
<div id="example">some text</div>
example.innerHTML returns some text without having to create let example = document.getElementById("example") variable manually example.innerHTML返回some text而无需手动创建let example = document.getElementById("example")变量
So, if you were to do bloodType.value with your existing code, it will work.因此，如果您要使用现有代码执行bloodType.value ，它将起作用。 But, you should use document.getElementById("bloodType").value但是，您应该使用document.getElementById("bloodType").value
More info: Do DOM tree elements with ids become global variables?更多信息：带有 id 的 DOM 树元素会成为全局变量吗？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.