因此，基本上，我试图使错误消息在用户输入错误信息时默认显示为隐藏。但是，该消息没有出现。因此，我使用了调试器，并发现js顶部的错误节点元素。代码成功地在HTML中找到了元素，并且还成功地更改了它的属性。然而什么也没发生。因此，经过一些研究，我发现有一个名为isConnected的属性，该属性显示节点是否已连接到文档。发现我的元素在找到元素后立即已连接（true），但在进入errorHandler（）函数时已断开连接（false）。因此，在进行了一些调试之后，我再次发现onPageLoad函数的底线是导致此问题的原因。它曾经是rootUl.innerHTML + = template（countriesObj）;但是那打破了它。但是，当我将HTML中的错误元素从ul移到id =“ root” div之外时，它工作正常。只有当元素位于ul内部时，它才破裂。最终，我改用Element.insertAdjacentHTML（）修复了该问题，它不会切断error元素和Document之间的连接。因此，经过大约一个小时的努力，我很好奇为什么会发生这种情况，并且rootUl.innerHTML + = template（countriesObj）之间有什么区别？和rootUl.insertAdjacentHTML（'beforeend'，template（countriesObj））;仅需添加，即使被其他未在此处显示的功能使用，rootUl.innerHTML + = template（countriesObj）也会断开连接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>List Towns</title>
<script src="../handlebars.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p style="text-align: center; font-size: 18px; font-weight: 700; font-family: Arial, Helvetica, sans-serif;">
Input in the following format: "{Country}: {town}, {town} {Country}: {town}, {town}" and so on. Matching is case-insensitive. Non-english characters are not supported. Numbers are not supported. Check regex for more info. Reset button deletes entire database and refreshes page.
</p>
<form action="#" class="content">
<label for="towns">Towns</label>
<input id="towns" type="text" placeholder="ex. Bulgaria: Burgas, Varna Turkey: Ankara"/>
<button id="btnLoadTowns">Load</button>
</form>
<div id="root">
<ul>
<!--When the element was here, innerHTML wasn't working correctly-->
<h4 id="error" style="color: rgb(136, 9, 0); display: none;" >Error. Input string not in correct format. Look at instructions above.</h4>
</ul>
</div>
<!--When the element was here, innerHTML was working fine-->
<!-- <h4 id="error" style="color: rgb(136, 9, 0); display: none;" >Error. Input string not in correct format. Look at instructions above.</h4> -->
<button id="reset">Reset</button>
<h4 id="empty-database" style="color: rgb(136, 9, 0); display: none;" >Database is currently empty.</h4>
</body>
<script src="./app.js"></script>
</html>
async function pageApp(){
//Misc
let error = document.querySelector('#error');
let emptyDatabase = document.getElementById('empty-database');
// Grab the unordered list of countries
let rootUl = document.querySelector('#root ul');
// Extract(GET request) data from database
let database = await getRequestForCountries();
// Get the two templates: One is for both country and town, another is just for town when country already exists
let template = await getTemplate();
let templateTown = await getTemplateTown();
// Load countries on page load
onPageLoad();
//Attach load event to button
attachLoadEvent();
//Reset button for deleting the database
resetButton()
function errorHandler(){
error.style.display = 'block';
setTimeout(function(){
error.style.color = 'rgb(136, 9, 0)';
error.style.background = 'none';
}, 150)
error.style.color = 'red';
error.style.background = 'rgb(136, 9, 0)';
}
function onPageLoad(){
database.forEach(entry => {
let townsArr = entry.towns;
let countryName = entry.countryName;
let townsArrObj = townsArr.reduce((acc, cur) =>{
let townObj = {
name: cur
}
acc.push(townObj);
return acc;
},[]);
let countriesObj = {
countries:[
{
name: countryName,
towns: townsArrObj
}
]
}
//Was rootUl.innerHTML += template(countriesObj); But that breaks the DOM of error and makes error.isConnected = false;
// rootUl.innerHTML += template(countriesObj);
rootUl.insertAdjacentHTML('beforeend', template(countriesObj));
})
}
[Element.innerHTML +=，在元素内获取HTML代码，并附加一些内容。
document.querySelector('p').innerHTML += `<span>Appended span</span>`;<p>
Lorem Ipsum
<span style="color: red">Something</span>
<p>而Element.insertAdjacentHTML('beforeend', 'To be inserted node')将在指定元素之前添加新节点。
document.querySelector('p').insertAdjacentHTML('beforeend', '<div>I am div</div>');<p>Lorem ipsum</p>