Untitled

<html>
    <head>
        <title>
            Javascript Pertama
        </title>
    </head>
    <body>
        <div id="kalimat">Saya sedang belajar Javascript</div>
        <p class="tengah">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima natus laudantium, assumenda libero atque consequuntur molestias voluptatibus optio voluptates inventore eaque illo, cumque sapiente! Voluptatibus debitis similique id praesentium? Odit.</p>
        <p class="tengah">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima natus laudantium, assumenda libero atque consequuntur molestias voluptatibus optio voluptates inventore eaque illo, cumque sapiente! Voluptatibus debitis similique id praesentium? Odit.</p>
        <button onclick="editData()">Ubah Kalimat</button>
        <script>
            function editData(){
                // sintax untuk mengambil data berdasarkan id
                var kalimat = document.getElementById('kalimat');
                kalimat.innerHTML = "Saya sedang belajar Web Design";
                kalimat.style.color = "blue";
                kalimat.style.fontSize = "40px";
                kalimat.style.textAlign = "center";

                var paragraf = document.getElementsByClassName('tengah');
                // ini kalau mau satu per satu
                // paragraf[0].style.textAlign = "center";
                // paragraf[0].style.color = "red";
                // paragraf[1].style.textAlign = "right";
                // paragraf[1].style.color = "blue";

                // ini untuk sekaligus
                for(var i = 0; i < paragraf.length; i++){
                    paragraf[i].style.textAlign = "center";
                    paragraf[i].style.color = "red";
                }
            }
        </script>
    </body>
</html>