Changing HTML element text with Javascript

Question

As a quick preface, I would just like to note that this is a very beginner question, and I might be making an extremely simple mistake or just typing some code wrong. Being the self-taught coder that I am, it probably is, but please forgive me if it turns out to be true. I've looked through various coding learning websites, and I haven't found anything that has worked.

So I have some HTML and Javascript code, and I'm trying to change the HTML element's text with Javascript on a button click. Here is my code that currently works:

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

As you can see, I've used a lot of the getElementById tags, which works perfectly fine.

What I'm wondering is if its possible to use a variable, like var button1 = document.getElementById("button1); and then just use the variable name like button1.innerHTML = "text"; instead of document.getElementById("button1").innerHTML = "text"; .

PS Feel free to correct me on any of my code, since i'm still learning.

Answer 1

Great starting code!

In answer to your question - yes! It's very useful to do so as you can drastically reduce the physical size of your code & the number of queries to the DOM!

For example, this is a valid re-use of a variable with initial document query:

<p id="para3"></p>

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

Here's some useful learning information:

DOM - What is the DOM?

Variables - JavaScript Variables

Variables Scope - JavaScript Scope

Please note:

Invalid HTML can make any valid JavaScript malfunction
Invalid JavaScript can freeze a page or have unexpected results
<h1 id="title"><h1> this line of your HTML is invalid, you do not have a closing h1 , please substitute with <h1 id="title"></h1>

Changing HTML element text with Javascript

Question

1 answers

solution1
2 ACCPTED 2019-10-09 02:50:40

Changing HTML element text with Javascript

Question

1 answers

solution1 2 ACCPTED 2019-10-09 02:50:40

solution1
2 ACCPTED 2019-10-09 02:50:40