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";.

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

Yes, you can do that. Assign repeatedly used elements to a variable so you can just reuse it. — dunli
– dunli, Commented Oct 9, 2019 at 2:33
Although I'm curious, did you tried it? Did you ran into any error? — Carl Binalla
– Carl Binalla, Commented Oct 9, 2019 at 2:35
Also, if you're just assigning text you can use innerText instead of innerHTML (i.e. 'Bye then...', 'Hi user', etc). If you use html tags within the string like <strong> to format your text, then you use innerHTML. — dunli
– dunli, Commented Oct 9, 2019 at 2:39

EGC · Accepted Answer · 2019-10-09 02:56:37Z

2

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>

edited Oct 9, 2019 at 2:56

answered Oct 9, 2019 at 2:50

EGC

1,8891 gold badge11 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nick W Over a year ago

Thanks so much! This is some great information that I will definitely be using in the future.

Collectives™ on Stack Overflow

Changing HTML element text with Javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related