未捕获的TypeError:无法读取属性' addEventListener'在window.onload上的null
我收到了标题中提到的错误,大多数人提到的解决方案都是使用window.onload函数,但我已经这样做了所以我会请求大家提供正确的指导在这个问题上。
提前感谢您回答我的问题。
(function() {
var Applicant = {
flname: "",
add: "",
mobnum: "",
status: "",
lat: "",
lng: "",
inNeedof: "",
};
var storageLogic = {
saveItem: function() {
var lscount = localStorage.length;
var inputs = document.getElementByClassName("form-control");
Applicant.flname = inputs[0].value;
Applicant.add = inputs[1].value;
Applicant.mobnum = inputs[2].value;
Applicant.status = inputs[3].value;
Applicant.lat = inputs[4].value;
Applicant.lng = inputs[5].value;
Applicant.inNeedof = inputs[6].value;
localStorage.setItem("Applicant_" + lscount, JSON.stringify(Applicant));
location.reload();
},
loaddata: function() {
var datacount = localStorage.length;
if (datacount > 0) {
var render = "<table border='1'>";
render += "<tr><th>Name</th>" + "<th>Address</th>" + "<th>Mobile Number</th>" + "<th>Status</th>" + "<th>Latitude</th>" + "<th>Longitude</th>" + "<th>In Need Of</th>";
for (i = 0; i < datacount; i++) {
var key = localStorage.key(i);
var applicant = localStorage.getItem(key);
var data = JSON.parse(applicant);
render += "<tr><td>" + data.flname + "</td>";
render += "<tr><td>" + data.add + "</td>";
render += "<tr><td>" + data.mobnum + "</td>";
render += "<tr><td>" + data.status + "</td>";
render += "<tr><td>" + data.lat + "</td>";
render += "<tr><td>" + data.lng + "</td>";
render += "<tr><td>" + data.inNeedof + "</td>";
}
render += "</table";
var newTable = document.getElementById("dvContainer");
newTable.innerHTML = render;
}
}
};
window.onload = function() {
storageLogic.loaddata();
var btnsubmit = document.getElementById('btnsubmit');
btnsubmit.addEventListener('click', storageLogic.saveItem, false);
};
})();
&#13;
<!DOCTYPE html>
<html>
<head>
<title>EndUser</title>
<meta name="viewport" content="initial-scale=1.0">
<!--JavaScript Links-->
<script type="text/javascript" src="EndUser.js">
</script>
<!--CSS link-->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body id="b01">
<div id="container">
<div id="logo"></div>
<div id="banner"><img src="images/emr.jpg" alt="Main Image" width="775" height="326" /></div>
<div id="nav">
<ul>
<li class="nlink"> <a href="index.html"> Home</a></li>
<li class="nlink"></li>
</ul>
</div>
</div>
<form id="f01" name="EmergencyPortalForm" onSubmit="return validateForm()" method="post">
<fieldset>
<legend style="font-size:25px"><b>Register your incident</b></legend>
Enter your Name:
<input type="text" class="form-control" id="flname" required><br/><br/> Address:
<br/>
<textarea name="address" rows="9" cols="25" class="form-control" id="add" required></textarea><br/><br/> Mobile Number:
<input type="text" class="form-control" id="mobnum" required><br/><br/> In need of:
<input list="vehicles" class="form-control" id="inNeedof" required>
<datalist id="vehicles">
<option value="Ambulance">
<option value="Fire Brigade">
<option value="Police">
</datalist><br/><br/>
<input id="btnsubmit" type="Submit" class="button" value="Submit"><br/><br/>
</fieldset>
</form>
<h2 id="h01">Your Location:</h2>
<div id="map" style="height:500px;width:720px">
<script>
var map, infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 22.760970,
lng: 75.870431
},
zoom: 18
});
infoWindow = new google.maps.InfoWindow;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDf5KXWxfU0BeeQdillzgRc3yXF2TkxSXY&callback=initMap">
</script>
<div id="footer"></div>
</div>
</body>
</html>
&#13;