Javascript Como resolvo essa substituição

Semnet · 10 de janeiro de 2020

Olá , to fazendo um Duolingo so pra treinar DOM, cheguei numa parte onde eu tenho que montar as frases , mas quando eu clico na palavra ela simplesmente substitui a a outra que tava escrito, e eu queria fazer ela ficar na frente um do outro

ACREDITO QUE NAO PRECISE DO CSS

<!DOCTYPE html>
<html>
    <head>
        <title>Fakelingo</title>
        <link rel="stylesheet" href="App.css">
        <link href="https://fonts.googleapis.com/css?family=Merriweather|Open+Sans&display=swap" rel="stylesheet">

    </head>
    <body>
        <div class="bar"></div>
        <a href="" class="X">X</a>      
        <div class="questions">
            <h3>Write the phrases in portuguese</h3>
            <p>Where is the bus station ?</p>
            <p class="text">Put in order to form a sentence </p> <br>
            <section class="buttons">
                <a href="#" class="First">Estação</a>
                <a href="#" class="Second">Ônibus</a>
                <a href="#" class="Third">Onde é</a>
                <a href="#" class="Four">a</a>
            </section>
        </div>

        <script>
        var text = document.querySelector('.text') ;   
        var btn1 = document.querySelector('.First');
        var btn2 = document.querySelector('.Second');
        var btn3 = document.querySelector('.Third');
        var btn4 = document.querySelector('.Four')

        btn1.onclick = function() {
            text.innerHTML = 'Estação';
        }
        
        btn2.onclick = function() {
            text.innerHTML = 'Ônibus';
        }

        btn3.onclick = function() {
            text.innerHTML = 'Onde é';
        }

        btn4.onclick = function() {
            text.innerHTML = 'a';
        }
        </script>


    </body>
</html>

Alex SuBxZeRo · 17 de janeiro de 2020

<!DOCTYPE html>
<html>
    <head>
        <title>Fakelingo</title>
        <link rel="stylesheet" href="App.css">
        <link href="https://fonts.googleapis.com/css?family=Merriweather|Open+Sans&display=swap" rel="stylesheet">

    </head>
    <body>
        <div class="bar"></div>
        <a href="" class="X">X</a>      
        <div class="questions">
            <h3>Write the phrases in portuguese</h3>
            <p>Where is the bus station ?</p>
            <p>Put in order to form a sentence</p>
          	<p class="text">Here: </p>
            <section class="buttons">
                <a href="#" class="First">Estação</a>
                <a href="#" class="Second">Ônibus</a>
                <a href="#" class="Third">Onde é</a>
                <a href="#" class="Four">a</a>
            </section>
        </div>

        <script>
        var text = document.querySelector('.text') ;   
        var btn1 = document.querySelector('.First');
        var btn2 = document.querySelector('.Second');
        var btn3 = document.querySelector('.Third');
        var btn4 = document.querySelector('.Four')

        btn1.onclick = function() {
            text.innerHTML += ' Estação';
        }
        
        btn2.onclick = function() {
            text.innerHTML += ' Ônibus';
        }

        btn3.onclick = function() {
            text.innerHTML += ' Onde é';
        }

        btn4.onclick = function() {
            text.innerHTML += ' a';
        }
        </script>


    </body>
</html>