Show results in textarea as a log

Question

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>

Instead of setting the value of the `textarea`, you need to append your text to it. If you just do `.innerHTML = `, you're going to set the value to that every time. Doing something as simple as using `+=` instead of `=` should get you there. — mwilson, Jan 18 '19 at 21:01

Taki · Accepted Answer · 2019-01-18T21:56:23.273

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>

Your answer is a good one, but is missing the requirement of having the most recent run at the top. — Jarvis, Jan 18 '19 at 21:50

score 1 · Answer 2 · answered Jan 18 '19 at 20:55

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>

score 0 · Answer 3 · answered Jan 18 '19 at 20:59

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!

Show results in textarea as a log

3 Answers3