Add text to a textarea with JavaScript

I'm trying to make a little JavaScript text editor. Basically it's an experiment, a test and the thing should be easy. I have a <h1> HTML element, and a <p> HTML element, and both of them change, as the user writes on a <input type="text" /> element and a <textarea></textarea>.

Now, everything work fine, but there is a problem. For making a space between lines, the user can't just press Enter, but of course need to use the <br /> HTML tag.

So my idea was to make a little button that allows the user to add this tag by pressing that button.

And JavaScript just makes a variable of the actual text, save it and add at the end of it the <br />. The result should be the text written by the user plus the break HTML tag.

And this works, if the textarea is empty and if you have never written something on it. It works and work even 10 or 20 times, but if you write something on it, it just stop working, even if you delete all the text. What is the problem in the code below?

<html>
    <head>
        <title>Text editor</title>
        <meta charset="utf-8" />
        <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab" rel="stylesheet">

        <style>
            .title {
                font-family: roboto;
                text-align: center;
            }
            .text {
                font-family: roboto slab;
                text-align: justify;
                margin-bottom: 40px;
            }
            .container {
                width: 80%;
            }
            .textarea {
                width: 100%;
                height: 30em;
                text-indent: 0.5em;
            }
            .title_box {
                margin: 10px;
                width: 20em;
                padding: 10px;
                font-size: 1em;
            }
        </style>
    </head>

    <body>
        <center>
        <div class="container">
            <h1 class="title" id="title_space">Title of the page</h1>
            <p class="text" id="text_space">Content of the page.</p>
        </div>
        </center>
        <hr />
        <center><input type="text" class="title_box" placeholder="Title" id="title_box" /></center>
        <textarea class="textarea" id="text_box"></textarea>
        <input type="submit" value="Save" onclick="saveText()" />
        <input type="submit" value="br" onclick="br()" />

        <script>
            function saveText(){
                var title = document.getElementById("title_box").value;
                var text = document.getElementById("text_box").value;

                document.getElementById("title_space").innerHTML = title;
                document.getElementById("text_space").innerHTML = text;
            }

            function br(){
                var actualtext = document.getElementById("text_box").value;
                var processedtext = actualtext + "<br />";
                document.getElementById("text_box").innerHTML = processedtext;
            }
        </script>

    </body>
</html>

Solution

When you're updating the text area, instead of:

document.getElementById("text_box").innerHTML = processedtext;

Use:

document.getElementById("text_box").value = processedtext;