How to Change HTML Text With JavaScript Variables

Save

JavaScript is a client-side scripting language that uses variables that behave in much the same way that variables behave in other programming languages. JavaScript variables do not need to be declared before using them, nor do they need to have an assigned type or allocated memory. You can use JavaScript variables to hold values in order to update most Web page objects dynamically, such as text or graphics. In addition, use JavaScript to update an HTML element's "innerHTML" property; this is a method for dynamically changing entire text fields on the fly.

Things You'll Need

  • Text editor
  • Web browser with JavaScript enabled
  • Open a text editor and create a new file named "changeTextVars.html." Type six HTML tags in the file:

    <html>

    <head></head>

    <body></body>

    </html>

    Save "changeTextVars.html."

  • Place a JavaScript open script tag -- "<script>" -- inside the HTML "<head>" tag. Set the "<script>" tag's "type" value to "text/javascript" and close the "</script>" tag:

    <html>

    <head>

    <script type="text/javascript">

    </script>

    </head>

    <body></body>

    </html>

  • Add a JavaScript function between the "<script>" and "</script>" tags named "changeText()." The "changeText()" function takes a variable named "monsterName" as an argument:

    <html>

    <head>

    <script type="text/javascript">

    function changeText(monsterName)

    {

    }

    </script>

    </head>

    <body></body>

    </html>

  • Edit the "changeText" function. Use the "document.getElementById" function to change the "innerHTML" property for the field named "textToChange." The "textToChange' field holds the text updated with the variable "monsterName":

    <html>

    <head>

    <script type="text/javascript">

    function changeText(monsterName)

    {

    document.getElementById('textToChange').innerHTML = monsterName;

    }

    </script>

    </head>

    <body></body>

    </html>

  • Add a "<p>" tag between the HTML "<body>" and "</body>" tags. Enter some text that displays the message -- such as "My favorite monster is: " -- and close the "</p>" tag. Be sure to include a space after the colon and before the "</p>" tag to separate the message from the dynamic text:

    <html>

    <head>

    <script type="text/javascript">

    function changeText(monsterName)

    {

    document.getElementById('textToChange').innerHTML = monsterName;

    }

    </script>

    </head>

    <body>

    <p>My favorite monster is: </p>

    </body>

    </html>

  • Enter an open "<b>" tag between the "<p>" and "</p>" tags after the "My favorite monstor is: " message. Assign an "id" to the "<b>" tag and set its value to "textToChange." For example, type the text "Dracula" after the "<b>" tag and close the "</b>" tag:

    <html>

    <head>

    <script type="text/javascript">

    function changeText(monsterName)

    {

    document.getElementById('textToChange').innerHTML = monsterName;

    }

    </script>

    </head>

    <body>

    <p>My favorite monster is: <b id='textToChange'>Dracula</b> </p>

    </body>

    </html>

  • Add an HTML "<input>" tag after the "<p>" tag. Set the input type to "button" and add an "onclick()" event that calls the "changeText" function and passes the value "Frankenstein." Set the input field "value" attribute to "Change Text." Save and close "changeTextVars.html."

    <html>

    <head>

    <script type="text/javascript">

    function changeText(monsterName)

    {

    document.getElementById('textToChange').innerHTML = monsterName;

    }

    </script>

    </head>

    <body>

    <p>My favorite monster is: <b id='textToChange'>Dracula</b></p>

    <input type='button' onclick='changeText("Frankenstein")' value="Change Text">

    </body>

    </html>

  • Open "changeTextVars.html" in a Web browser. Click the "Change Text" button to use the "monsterName" variable to change the "textToChange" field from "Dracula" to "Frankenstein."

Tips & Warnings

  • JavaScript variables do not need to be declared before you use them. However, using the "var" keyword the first time you use a variable used is a good practice, as it documents where the variable is first used in the code.
  • JavaScript variables are case sensitive and must start with a letter or an underscore.
  • Variables in JavaScript have specific scope rules.
  • If a JavaScript variable has already been declared, you can declare them again without running into problems with JavaScript. Keep track of variable declarations and assignments to avoid unexpected results and hard-to-find code bugs.

References

  • Photo Credit Comstock/Comstock/Getty Images
Promoted By Zergnet

Comments

Resources

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!