使用Javascript更改HTML元素文本_Javascript_Html

使用Javascript更改HTML元素文本

javascript html

使用Javascript更改HTML元素文本,javascript,html,Javascript,Html,作为一个简短的前言，我想指出这是一个非常初级的问题，我可能犯了一个非常简单的错误，或者只是键入了一些错误的代码。作为一个自学成才的程序员，我很可能是这样，但如果这是真的，请原谅我。我浏览了各种编码学习网站，没有发现任何有效的方法因此，我有一些HTML和Javascript代码，我试图通过单击按钮使用Javascript更改HTML元素的文本。以下是我目前有效的代码： HTML: Javascript: function startGame() { document.getEl

作为一个简短的前言，我想指出这是一个非常初级的问题，我可能犯了一个非常简单的错误，或者只是键入了一些错误的代码。作为一个自学成才的程序员，我很可能是这样，但如果这是真的，请原谅我。我浏览了各种编码学习网站，没有发现任何有效的方法

因此，我有一些HTML和Javascript代码，我试图通过单击按钮使用Javascript更改HTML元素的文本。以下是我目前有效的代码：

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>";
    });
}

函数startName（）{
document.getElementById（“tabTitle”）.innerHTML=“欢迎”；
document.getElementById（“title”）.innerHTML=“欢迎，挑战者！”；
document.getElementById（“h3”）.innerHTML=“你想去冒险吗？”；
document.getElementById（“button1”）.innerHTML=“是”；
document.getElementById（“button2”）.innerHTML=“否”；
document.getElementById（“button3”）.style.display=“无”；
document.getElementById（“button1”）.addEventListener（“单击”，函数）（）{
让username=sessionStorage.getItem（'username'）；
用户名=提示（“请输入您的姓名：”；
document.getElementById（“title”）.innerHTML=“嗨，”+username+“！”；
document.getElementById（“h3”）.innerHTML=“”；
document.getElementById（“para1”）.innerHTML=`欢迎使用一款新颖的游戏。这种游戏要求您执行多种操作
当你在一个预定的故事情节上前进时提出问题。每个问题将有2到3个选择，这是你的问题
选择你想选择的道路的责任。这个游戏要求你思考、计划和执行。
记住，每个选择都是预先确定的，但你仍然可以选择自己的道路；
document.getElementById（“para2”）.innerHTML=`我们将从选择您的类开始。您是否会成为一名猎人，
术士，或者泰坦；
document.getElementById（“para3”）.innerHTML=`警告：重新加载此页面将丢失所有进度
直到添加了保存功能；
document.getElementById（“button3”）.style.display=“block”；
document.getElementById（“button1”）.innerHTML=“Hunter”；
document.getElementById（“button2”）.innerHTML=“术士”；
document.getElementById（“button3”）.innerHTML=“Titan”；
document.getElementById（“button1”）.addEventListener（“单击”，函数）（）{
StarthIntergame（）；
});
document.getElementById（“button2”）.addEventListener（“单击”，函数）（）{
StartWallockGame（）；
});
document.getElementById（“button3”）.addEventListener（“单击”，函数（）{
startTitanGame（）；
});
});
document.getElementById（“button2”）.addEventListener（“单击”，函数）（）{
document.getElementById（“title”）.innerHTML=“再见…”；
document.getElementById（“h3”）.innerHTML=“”；
document.getElementById（“para1”）.innerHTML=“你为什么来这里？”；
document.getElementById（“button1”）.style.display=“无”；
document.getElementById（“button2”）.innerHTML=“重新启动”；
});
}

正如您所看到的，我使用了很多

getElementById

标记，它们工作得非常好

我想知道的是是否可以使用一个变量，比如

var button1=document.getElementById（“button1”）；

然后只使用变量名，如

button1.innerHTML=“text”

，而不是

document.getElementById（“button1”）.innerHTML=“text”

另外，请随时更正我的任何代码，因为我还在学习。

很棒的开始代码

回答您的问题-是的！这样做非常有用，因为您可以大大减少代码的物理大小和对DOM的查询数量

例如，这是对初始

document

query的变量的有效重复使用：

var p3 = document.getElementById("para3");
var someText = "No";
p3.innerHTML = someText;

以下是一些有用的学习信息：

DOM-

变量-

变量范围-

请注意：

无效的HTML会导致任何有效的JavaScript故障

无效的JavaScript可能会冻结页面或产生意外结果

您的HTML此行无效，您没有结束语

h1

，请用

伟大的开始代码