CODEWITHSUNDEEP
javascript
Z29
Z29

Reputation: 13

Show results in textarea as a log

I need to show the results of the functions in the textarea as a log.

The code as it shows it works in the textarea but if we press another function it overwrites the previous one, I need to show them both and that the most recent functions executed are shown above.

<!DOCTYPE html>
<html>
  <body>

    <!-- If you click on 'myFunction()' and then on 'myFunction2()' the result would be:
    
    Function2
    Function1
    
    -->    
    
    <textarea id="myTextarea"></textarea>
    
    <br>

    <button type="button" onclick="myFunction()">Try it</button>
    <button type="button" onclick="myFunction2()">Try it</button>

    <script>

      function myFunction() {
        var x = "Function1";
        document.getElementById("myTextarea").innerHTML = x;
      }

      function myFunction2() {
        var z = "Function2";
        document.getElementById("myTextarea").innerHTML = z;
      }

    </script>

  </body>
</html>

Upvotes: 1

Views: 195

Answers (3)

Taki
Taki

Reputation: 17654

add \n to the text, and append the value with += instead of overwriting it with =

<!DOCTYPE html>
<html>
  <body>

    <!-- If you click on 'myFunction()' and then on 'myFunction2()' the result would be:
    
    Function2
    Function1
    
    -->    
    
    <textarea id="myTextarea"></textarea>
    
    <br>

    <button type="button" onclick="myFunction()">Try it</button>
    <button type="button" onclick="myFunction2()">Try it</button>

    <script>

      function myFunction() {
        var x = "Function1";
        document.getElementById("myTextarea").innerHTML = `${x}\n${document.getElementById("myTextarea").innerHTML}`;
      }

      function myFunction2() {
        var z = "Function2";
        document.getElementById("myTextarea").innerHTML = `${z}\n${document.getElementById("myTextarea").innerHTML}`;
      }

    </script>

  </body>
</html>

Upvotes: 2

Jarvis
Jarvis

Reputation: 679

You are assigning without storing the previous value of the text area. The previous solution appends the data and I believe you have asked for it to be prepended.

var prevLog = document.getElementById("myTextArea").innerHTML;
document.getElementById("myTextarea").innerHTML = x + prevLog;

Hope this helps!

Upvotes: 0

mwilson
mwilson

Reputation: 12900

You're overwritting the text area every time. Instead, just append it to the 'log'. You can force the log message to print to a new line by using the \n character (JavaScript string newline character?)

<!DOCTYPE html>
<html>
  <body>

    <!-- If you click on 'myFunction()' and then on 'myFunction2()' the result would be:
    
    Function2
    Function1
    
    -->    
    
    <textarea id="myTextarea"></textarea>
    
    <br>

    <button type="button" onclick="myFunction()">Try it</button>
    <button type="button" onclick="myFunction2()">Try it</button>

    <script>
      function addLogMessage(message) {
        const textArea = document.getElementById("myTextarea");
        textArea.innerHTML += `${message} \n`;
      }

      function myFunction() {
        var x = "Function1";
        addLogMessage(x);
      }

      function myFunction2() {
        var z = "Function2";
        addLogMessage(z);
      }
      
      

    </script>

  </body>
</html>

Upvotes: 1

Related Questions