Javascript 为什么innerHTML方法在html文件中进行更改，但未在浏览器中显示？
为什么innerHTML方法在html文件中进行更改，但未在浏览器中显示？其思想是，当用户登录时，其名称将显示在标题中。我认为问题是头从一开始就被加载了，但是我要确保在进行任何更改之前加载了头。同时，注销按钮不起作用，我认为这是针对同一问题 文件：index.htmlJavascript 为什么innerHTML方法在html文件中进行更改，但未在浏览器中显示？,javascript,jquery,html,firebase,firebase-realtime-database,Javascript,Jquery,Html,Firebase,Firebase Realtime Database,为什么innerHTML方法在html文件中进行更改，但未在浏览器中显示？其思想是，当用户登录时，其名称将显示在标题中。我认为问题是头从一开始就被加载了，但是我要确保在进行任何更改之前加载了头。同时，注销按钮不起作用，我认为这是针对同一问题 文件：index.html <!Doctype html> <html> <head> <meta charset="utf-8"> <script src="//
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="js/jquery.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>
<script src="js/init.js"></script>
<script src="js/index.js"></script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
</head>
<body>
<div id="header"></div>
<div id="newsfeed"></div>
<div id="footer"></div>
</body>
</html>
<header>
<div class="generalHeader">
<div class="header01">
<a href="/index.html" id="wocTitle">WOC</a>
<div class="loggedAs">
Welcome,
<a id="username"></a>!<br>
<button id="logout_button">Log out.</button>
</div>
</div>
<div class="header02">
<ul class="menu" >
<li><a class="active" href="">ALL</a></li>
<li><a class="static">    |    </a></li>
<li><a class="desactive" href="">RECOMMENDED</a></li>
<li><a class="static">    |    </a></li>
<li><a class="desactive" href="">SAVED</a></li>
<li><a class="static">    |    </a></li>
<li><a class="desactive" href="">POPULAR</a></li>
<li><a class="static">    |   </a></li>
<li><a class="desactive" href="">CATEGORIES</a></li>
</ul>
</div>
</div>
</header>
$（函数（）{
$（“#header”）.load（“header.html”）；
$（“#footer”）.load（“footer.html”）；
});
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="js/jquery.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>
<script src="js/init.js"></script>
<script src="js/index.js"></script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
</head>
<body>
<div id="header"></div>
<div id="newsfeed"></div>
<div id="footer"></div>
</body>
</html>
<header>
<div class="generalHeader">
<div class="header01">
<a href="/index.html" id="wocTitle">WOC</a>
<div class="loggedAs">
Welcome,
<a id="username"></a>!<br>
<button id="logout_button">Log out.</button>
</div>
</div>
<div class="header02">
<ul class="menu" >
<li><a class="active" href="">ALL</a></li>
<li><a class="static">    |    </a></li>
<li><a class="desactive" href="">RECOMMENDED</a></li>
<li><a class="static">    |    </a></li>
<li><a class="desactive" href="">SAVED</a></li>
<li><a class="static">    |    </a></li>
<li><a class="desactive" href="">POPULAR</a></li>
<li><a class="static">    |   </a></li>
<li><a class="desactive" href="">CATEGORIES</a></li>
</ul>
</div>
</div>
</header>
欢迎
$(document).ready(function() {
$("#header").load("header.html", function(){
console.log("Header loaded.");
// Set up UI elements
var newsfeed = document.querySelector("#newsfeed"),
username = document.querySelector("#username"),
logout_button = document.querySelector("#logout_button");
//Set user attributes
var user_info, user_display_name;
//Initialize Firebase
var auth = firebase.auth(),
storage = firebase.storage(),
database = firebase.database();
console.log("Firebase inizialized.");
//Logout
logout_button.addEventListener('click', function(e){
auth.signOut();
console.log("You have been logged out");
window.location = "index.html";
});
//Check user auth
auth.onAuthStateChanged(function(user) {
//Get user full data
user_info = user;
if(user){
console.log("User detected.");
user_display_name = user_info.displayName;
console.log("User display name read. User display name =", user_display_name);
//Assign username to header
username.innerHTML = user_display_name;
console.log("username, ",username);
}else{
window.location = "login.html";
}
});
//Get newsfeed
//Listen from the latest 10 stories onwads, and display them
database.ref("events").on('child_added', function(snapshot){
displayEvent(snapshot.val());
});
//Listen to whenever a story changes
database.ref("events").on('child_changed', function(snapshot){
displayEvent(snapshot.val());
});
function displayEvent(value){
console.log(value.imageUrl);
storage.ref(value.imageUrl).getDownloadURL()
.then(function(url) {
$("#newsfeed").append("\<div class=\"event\"\>\<div class=\"event_title\"\>"+value.title+"\<\/div\>\<img class=\"event_image\" src=\""+url+"\"\/\>\<div class =event_header\>\<div class=\"event_info_header\" id=\"event_hour\"\>"+value.hour+"\<\/div\>\<div class=\"event_info_header\" id=\"event_date\"\>"+" | "+value.date+" | "+"\<\/div\>\<div class=\"event_info_header\" id=\"event_place\"\>"+value.place+"\<\/div\>\<\/div\>\<div class=\"event_brief_description\"\>"+value.brief_description+"\<\/div\>\<\/div\>");
console.log("Event displayed");
});
}
});
});
$（文档）.ready（函数（）{
$（“#header”）.load（“header.html”，function（）{
log（“头加载”）；
//设置UI元素
var newsfeed=document.querySelector（“#newsfeed”），
用户名=document.querySelector（“#用户名”），
注销按钮=document.querySelector（“注销按钮”）；
//设置用户属性
变量用户信息，用户显示名称；
//初始化Firebase
var auth=firebase.auth（），
storage=firebase.storage（），
database=firebase.database（）；
log（“Firebase序列化”）；
//注销
注销按钮。addEventListener（'click'，函数（e）{
auth.signOut（）；
log（“您已注销”）；
window.location=“index.html”；
});
//检查用户身份验证
auth.onAuthStateChanged（函数（用户）{
//获取用户完整数据
用户信息=用户；
如果（用户）{
log（“用户检测到”）；
user\u display\u name=user\u info.displayName；
console.log（“用户显示名称read.User display name=，User\u display\u name”）；
//将用户名分配给标题
username.innerHTML=用户\显示\名称；
日志（“用户名，”，用户名）；
}否则{
window.location=“login.html”；
}
});
//获取新闻源
//听最新的10个WADS故事，并展示它们
database.ref（“事件”）on（'child_added'，函数（快照）{
displayEvent（snapshot.val（））；
});
//每当故事发生变化时，请倾听
函数（快照）上的database.ref（“事件”）.on（'child_changed'）{
displayEvent（snapshot.val（））；
});
函数displayEvent（值）{
console.log（value.imageUrl）；
storage.ref（value.imageUrl）.getDownloadURL（）
.then（函数（url）{
$（“\\”新闻提要”）。追加（“\\”+value.title+“\\\”+value.hour+“\\”+“\\”+“\\”+value.date+“\\”+“\\”+value.place+“\\”+value.简要说明+“\\”；
console.log（“显示的事件”）；
});
}
});
});
onAuthStateChangedusernameheader.load（）函数的范围内，但是在调用console.log（“username，”，username）时会显示更改。