在一个函数中，将创建一个HTML输入元素。调用该函数后，该元素将显示在该位置上，我可以键入该元素，但无法通过我的脚本访问它。
经过研究，我添加了一个检查元素是否确实存在，如果仍然存在，我仍然无法在脚本中更改其值...我可以在控制台中使用document.getElementById（“ txtSearchBelow”）。value ='access me'
更改值<div id = "searchResults"></div>
document.getElementById("searchResults").innerHTML = '<input id="txtSearchBelow"class="form-control" type="text" placeholder="Search..">'+'<br>';
var inputBelow = document.getElementById("txtSearchBelow");
console.log(inputBelow);
console.log('until here it seems fine.');
var element = document.getElementById("txtSearchBelow");
//If it isn't "undefined" and it isn't "null", then it exists.
if(typeof(element) != 'undefined' && element != null){
alert('Element exists!');
// this here doesnt work. why not?
document.getElementById("txtSearchBelow").value = 'eyyy please access me';
} else{
alert('Element does not exist!');
}
我怎么可以通过控制台而不是在脚本中更改值？
编辑：
该代码是一个示例，实际功能更大，更复杂。当我第一次想到在这里提问时，我写了一个简单得多的版本并进行了尝试，并且有效。所以我真的不明白为什么它可以工作，但是在我的实际代码中却不行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="A website that shows social circus projects all around the globe!">
<meta name="Milan Freund">
<!--small icon at tab bar -->
<link rel="icon" href="img/worldwide.svg">
<!-- Icon made by turccub <a href="https://www.flaticon.com/authors/turkkub" title="turkkub">turkkub</a> from <a href="https://www.flaticon.com/" title="Flaticon"> www.flaticon.com</a>-->
<title>social circus map</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/main.css" rel="stylesheet">
<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<!-- Leaflet Plugin: MarkerCluster: -->
<link rel="stylesheet" href="libs/leaflet_markercluster/MarkerCluster.css">
<link rel="stylesheet" href="libs/leaflet_markercluster/MarkerCluster.Default.css">
<script src="libs/leaflet_markercluster/leaflet.markercluster.js"></script>
<!-- array that has the info about the circus projects -->
<script src="data/zirkusArray.js"></script>
<!-- font awesome -->
<link rel="stylesheet" href="libs/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- bootstrap 4 nav bar -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="index.html" data-toggle="tooltip" title="reload the page">social circus map</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample03">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="about.html" data-toggle="tooltip" title="information about this project">about</a>
</li>
</ul>
<form class="form-inline my-2 my-md-0" id="inputForm" onSubmit="return false;">
<input id="txtSearch" class="form-control" type="text" placeholder="Search.." data-toggle="tooltip" title="searchresults will also be listed below the map">
<button id="clearInput" class="btn bg-transparent" style="margin-left: -40px; z-index: 100;" data-toggle="tooltip" title="clears the input, all projects will be shown again">
<i class="fa fa-times"></i>
</button>
</form>
</div>
</nav>
<!-- Div with search results -->
<div id = "map" class="jumbotron"></div>
<div id="searchResults"></div>
<!-- Footer -->
<footer class="page-footer font-small teal pt-4">
<!-- Copyright -->
<div class="footer-copyright text-center py-3">©
<script>document.write(new Date().getFullYear()+" ")</script>
Copyright:<a href="https://www.cirquedusoleil.com/citizenship" target="_blank"> Cirque du Soleil</a>
</div>
</footer>
<script>
////////////// map container//////////////////
var map = L.map('map', {
center: [ 32.84267363195431,0],
zoom: 2
});
// create stamen watercolor layer //
var stamen_Watercolor = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
subdomains: 'abcd',
minZoom: 1,
maxZoom: 16,
ext: 'jpg'
});
// create osm basemap layer //
var osm = L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
// add stamen layer as basemap //
stamen_Watercolor.addTo( map );
// eventlistener to get the zoomlevel //
map.addEventListener("zoomend", changeBasemap);
function changeBasemap() {
const zoomLevel = map.getZoom();
// if the zoomlevel is under 5 show osm as basemap for more details //
if ( zoomLevel < 4 && map.hasLayer(osm) ) {
map.removeLayer(osm);
stamen_Watercolor.addTo(map);
return;
}
// if the zoomlevel is greater 4 show stamen basemap for more beauty and less nation states //
if ( zoomLevel > 3 && map.hasLayer(stamen_Watercolor) ) {
map.removeLayer(stamen_Watercolor);
osm.addTo(map);
return;
}
}
// add empty marker cluster group before actually adding the point data //
var markers = L.markerClusterGroup({
maxClusterRadius: 30
});
markers.addTo(map);
function searchCircus() {
markers.clearLayers()
var inputText = document.getElementById('txtSearch').value.toLowerCase();
//console.log('searched for:', inputText);
var searchArray = [];
if (inputText === "") {
for (i=0; i < zirkusArray.length; i++) {
var lat = zirkusArray[i][1].toFixed(4);
var lon = zirkusArray[i][2].toFixed(4);
var zirkusName = zirkusArray[i][0];
var zirkusCity = zirkusArray[i][3];
var zirkusCountry = zirkusArray[i][4];
var zirkusLink = zirkusArray[i][5];
//variable für den marker anlegen
var zirkusMarker = L.marker([lat, lon]);
//die marker der clustergruppe hinzufügen
markers.addLayer(zirkusMarker);
// Popup mit HTML erstellen // Popup an Marker anbinden
zirkusMarker.bindPopup('<a href="'+zirkusLink+'" target="_blank">'+zirkusName+'</a>' + '<br>' + zirkusCity + ', ' + zirkusCountry);
// in case the linklist is not clear.. clear it //
document.getElementById("searchResults").innerHTML = '';
}
} else {
for (i = 0; i < zirkusArray.length; i++) {
var name = zirkusArray[i][0].toLowerCase();
var lat = zirkusArray[i][1];
var lon = zirkusArray[i][2];
var city = zirkusArray[i][3].toLowerCase();
var country = zirkusArray[i][4].toLowerCase();
var zirkusLink = zirkusArray[i][5];
if ( (name.indexOf(inputText) != -1) || (city.indexOf(inputText) != -1) || (country.indexOf(inputText) != -1)) {
// console.log('Found!');
searchArray.push(zirkusArray[i]);
}
}
searchArray = searchArray.sort();
console.log(searchArray);
for (i=0; i < searchArray.length; i++) {
var name = searchArray[i][0].toLowerCase();
var lat = searchArray[i][1];
var lon = searchArray[i][2];
var city = searchArray[i][3].toLowerCase();
var country = searchArray[i][4].toLowerCase();
var zirkusLink = searchArray[i][5];
//variable für den marker anlegen
var zirkusMarker = L.marker([lat, lon]);
//add markers to clustergroup
markers.addLayer(zirkusMarker);
// edit poput // bind to markers //
zirkusMarker.bindPopup('<a href="'+zirkusLink+'" target="_blank">'+name+'</a>' + '<br>' + city + ', ' + country);
}
document.getElementById("searchResults").innerHTML = '<h4>'+"Searched for: "+inputText+'</h4>'+'<p>'+"Click on the links to visit the project homepgages."+'<br>'+"Or change your search."+'</p>'+'<input id="txtSearchBelow" class="form-control" type="text" placeholder="Search..">'+'<br>';
//console.log("searchbar");
var inputBelow = document.getElementById("txtSearchBelow");
console.log(inputBelow);
console.log('Bis hierher läuft es noch ganz gut.');
var element = document.getElementById("txtSearchBelow");
//If it isn't "undefined" and it isn't "null", then it exists.
if(typeof(element) != 'undefined' && element != null){
alert('Element exists!');
document.getElementById("txtSearchBelow").value = 'eyyy';
} else{
alert('Element does not exist!');
}
searchArray.forEach(fillSearchList);
function fillSearchList(item, index) {
document.getElementById("searchResults").innerHTML += '<a href="' +item[5] + '" target="_blank">' +item[0]+ '</a><br>';
}
}}
// Get the input field
var input = document.getElementById("txtSearch");
// Execute a function when the user releases a key on the keyboard
input.addEventListener("keyup", function(event) {
// Number 13 is the "Enter" key on the keyboard
if (event.keyCode === 13) {
// Cancel the default action, if needed
event.preventDefault();
searchCircus();
}
});
/*
document.getElementById("textSearchBelow").addEventListener("keyup", function(event) {
// Number 13 is the "Enter" key on the keyboard
if (event.keyCode === 13) {
// Cancel the default action, if needed
event.preventDefault();
//searchCircus();
}
});
} */
// call the function to initially fill the map with the markers //
searchCircus();
// clear the search field on x-button click //
var clearIt = document.getElementById("clearInput");
clearIt.addEventListener("mouseup", function(){
document.getElementById("txtSearch").value = "";
searchCircus();
document.getElementById("txtSearch").focus();
});
</script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="libs/jquery-slim.min.js"><\/script>')</script>
<script src="libs/popper.min.js"></script>
<script src="libs/bootstrap.min.js"></script>
</body>
我会说这是因为创建元素所需的渲染时间比其后的逻辑要长。
意味着您的var元素= document.getElementById（“ txtSearchBelow”）;在浏览器知道该元素之前正在执行。
在调用document.getElementById（“ txtSearchBelow”）之前放入延迟计时器
效果很好，我没有收到您的抱怨...
document.getElementById("searchResults").innerHTML = '<input id="txtSearchBelow"class="form-control" type="text" placeholder="Search..">'+'<br>';
var inputBelow = document.getElementById("txtSearchBelow");
console.log(inputBelow);
console.log('until here it seems fine.');
var element = document.getElementById("txtSearchBelow");
// If it isn't "undefined" and it isn't "null", then it exists.
if (typeof(element) != 'undefined' && element != null) {
console.log('Element exists!');
// This line works for me...!
document.getElementById("txtSearchBelow").value = 'eyyy please access me';
} else {
console.log('Element does not exist!');
}<div id="searchResults"></div>也许是浏览器问题？计算机系统和加载延迟是可能的。我可以运行它