作为一个简短的序言，我想指出这是一个非常初学者的问题，我可能犯了一个非常简单的错误，或者只是键入了一些错误的代码。作为我的自学成才的程序员，可能是这样，但是如果事实确实如此，请原谅我。我浏览了各种编码学习网站，但没有发现任何有效的方法。
所以我有一些HTML和Javascript代码，并且我试图通过单击按钮来使用Javascript更改HTML元素的文本。这是当前有效的代码：
HTML：
<!DOCTYPE html>
<html>
<head>
<script src="firstGame.js"></script>
<title id="tabTitle"></title>
</head>
<body onload="startGame()">
<h1 id="title"><h1>
<h3 id="h3"></h3>
<p id="para1"></p>
<p id="para2"></p>
<p id="para3"></p>
<button id="button1"></button>
<button id="button2"></button>
<button id="button3"></button>
</body>
</html>
Javascript：
function startGame() {
document.getElementById("tabTitle").innerHTML = "Welcome";
document.getElementById("title").innerHTML = "Welcome, Challenger!";
document.getElementById("h3").innerHTML = "Would you like to go on an adventure?";
document.getElementById("button1").innerHTML = "Yes";
document.getElementById("button2").innerHTML = "No";
document.getElementById("button3").style.display = "none";
document.getElementById("button1").addEventListener("click", function(){
let username = sessionStorage.getItem('username');
username = prompt("Please enter your name:");
document.getElementById("title").innerHTML = "Hi, " + username + "!";
document.getElementById("h3").innerHTML = "";
document.getElementById("para1").innerHTML = `Welcome to a novel game. These kind of games ask you multiple
questions as you progress on a predetermined storyline. Each question will have 2 or 3 choices, and it is your
responsibility to choose which path you want to choose. This game requires you to think, plan, and execute.
Remember, each choice is predetermined, but you can still choose your own path.`;
document.getElementById("para2").innerHTML = `We will begin by choosing your class. Will you be a Hunter,
Warlock, or Titan?`;
document.getElementById("para3").innerHTML = `<strong>WARNING:</strong> Reloading this page will lose all of your progress
untill the saving feature has been added.`;
document.getElementById("button3").style.display = "block";
document.getElementById("button1").innerHTML = "Hunter";
document.getElementById("button2").innerHTML = "Warlock";
document.getElementById("button3").innerHTML = "Titan";
document.getElementById("button1").addEventListener("click", function(){
startHunterGame();
});
document.getElementById("button2").addEventListener("click", function(){
startWarlockGame();
});
document.getElementById("button3").addEventListener("click", function(){
startTitanGame();
});
});
document.getElementById("button2").addEventListener("click", function(){
document.getElementById("title").innerHTML = "Bye Then...";
document.getElementById("h3").innerHTML = "";
document.getElementById("para1").innerHTML = "Why'd you even come here?";
document.getElementById("button1").style.display = "none";
document.getElementById("button2").innerHTML = "<button onclick='location.reload()'>Restart</button>";
});
}
如您所见，我已经使用了很多getElementById标签，效果很好。
我想知道的是是否可以使用变量，例如var button1 = document.getElementById("button1);，然后仅使用变量名，例如button1.innerHTML = "text";，而不是document.getElementById("button1").innerHTML = "text";。
P.S。由于我仍在学习，请随时根据我的任何代码对我进行纠正。
很棒的起始代码！
回答您的问题-是的！这样做非常有用，因为您可以大大减少代码的物理大小和对DOM的查询数量！
例如，这是在初始document查询中有效地重用变量：
<p id="para3"></p>
var p3 = document.getElementById("para3");
var someText = "No";
p3.innerHTML = someText;
以下是一些有用的学习信息：
DOM-What is the DOM?
变量范围-JavaScript Function Scope
请注意：
<h1 id="title"><h1>您的HTML的这一行无效，您没有结束h1，请替换为<h1 id="title"></h1>当然，您可以做到，您应该或者必须。