CODEWITHSUNDEEP
javascripthtml
Brian Neufeld
Brian Neufeld

Reputation: 3

Use text box value multiple times to update text on web page

I need to display boilerplate text on a web page and give visitors the ability to update the text by submitting a value in a text box. I have two issues:

  1. I can only use the text box value once but I want to use it multiple. I understand this is due to using document.getElementById. I should be using document.getElementByClassName however I am having troubles making this work.
  2. I would like to include a default value within the boilerplate text that would then be replaced by the value from the text box. For example "your company" would be replaced with "XYZ Company" (or whatever the user submits in the text box).

I have the following code:

<!DOCTYPE html>
<html>
<body style="text-align:center;">
    Company Name:
    <input type="text"
           id="myText"
           value="">

    <button type="button"
            onclick="myFunction()">
      Submit
  </button>

    <p>I would like to use the name, <strong><span id="demo"></span></strong>, multiple times in this text. I'd like to use it <strong><span id="demo"></span></strong> and again <strong><span id="demo"></span></strong>.</p>

    <script>
        // Here the value is stored in new variable x

        function myFunction() {
            var x =
                document.getElementById("myText").value;

            document.getElementById(
              "demo").innerHTML = x;
        }
    </script>
</body>

</html>

What am I missing? Any direction is appreciated. Thanks in advance.

Upvotes: 0

Views: 158

Answers (1)

Ryan
Ryan

Reputation: 374

First of all, you should be using the classes, since ids are meant to be unique. Second, when calling getElementById() (or even querySelector()), you are only getting the first element that matches the query. You should give all of the the elements a shared class, select them all with querySelectorAll(), then loop over them all, as in the following:

<!DOCTYPE html>
<html>
<body style="text-align:center;">
    Company Name:
    <input type="text"
           id="myText"
           value="">

    <button type="button"
            onclick="myFunction()">
      Submit
  </button>

    <p>I would like to use the name, <strong><span class="demo"></span></strong>, multiple times in this text. I'd like to use it <strong><span class="demo"></span></strong> and again <strong><span class="demo"></span></strong>.</p>

    <script>
        // Here the value is stored in new variable x

        function myFunction() {
            var x =
                document.getElementById("myText").value;

            // select all elements with class ('.') of 'demo'
            const allDemoElements = document.querySelectorAll(".demo");
            
            // loop over each element, and alter innerHTML
            allDemoElements.forEach(el => {
              el.innerHTML = x;
            });
        }
    </script>
</body>

</html>

Upvotes: 1

Related Questions