Cara Membuat Input Output Sederhana dengan Javascript

Hai saya Hero, ini adalah postingan pertama saya di blog. Saya akan menjelaskan tentang beberapa materi di blog ini. Materi pertama adalah tentang cara membuat input output sederhana di aplikasi “Notepad++” dengan Javascript.

Pertama-tama kita buka dulu aplikasi Notepad++ nya dan buat coding seperti ini.


<html>
<head>

</head>
<body>

</body>
</html>

 Setelah itu kita save, simpan di folder yang kalian inginkan. Beri nama “inout.html”, setelah itu klik save.


Selanjutnya, isi body dengan code seperti di bawah ini.

<html>
            <head>
                        <title>Input dan Output</title>
            </head>
            <body>
                        <div class="tengah">
                        <div class="text"><h3>BELAJAR JAVASCRIPT INPUT OUTPUT</h3><p></div>
                        <p>
                        <label>Input</label>
                        <input type="text" id="txtInput"/><p>
                        <label>Output</label>                       
                        <input type="text" id="txtOutput" disabled/><p>
                        <input type="button" value="Submit" id="Proses" onclick="InputOutput()">
                        <div>
            </body>
</html>


Kedua kita isikan javascript nya di dalam head, seperti ini.

<html>
            <head>
                        <title>Input dan Output</title>
                        <script language="javascript">
                                    function InputOutput()
                                    {
                                                var x;
                                                x = document.getElementById("txtInput").value;
                                                document.getElementById("txtOutput").value = x;
                                    }
                        </script>
            </head>
            <body>
                        <div class="tengah">
                        <div class="text"><h3>BELAJAR JAVASCRIPT INPUT OUTPUT</h3><p></div>
                        <p>
                        <label>Input</label>
                        <input type="text" id="txtInput"/><p>
                        <label>Output</label>                       
                        <input type="text" id="txtOutput" disabled/><p>
                        <input type="button" value="Submit" id="Proses" onclick="InputOutput()">
                        <div>
            </body>
</html>

 

Terakhir, kita save dan jalankan. Klik “Jalankan”, lalu pilih browser yang kita punya. Kebetulan saya menggunakan google chrome, jadi saya pilih “Launch In Chrome”.



Untuk mencobanya silahkan masukkan angka berapapun di bagian Input, lalu klik tombol Submit. Hasilnya nanti akan keluar di bagian Output. Jika berhasil, maka tampilannya akan seperti ini


Agar tampilannya lebih keliatan menarik dan rapi, kita tambahkan style di dalam head, seperti ini.

<html>
            <head>
                        <title>Input dan Output</title>
                        <style>
                                    .text{
                                                text-decoration: underline;
                                                color: #0d23ae;
                                                font-family: "Arial";
                                                font-size: 145%;
                                    }
                                    .tengah{
                                                margin: auto;
                                                width: 50%;
                                                border: 3px solid black;
                                                padding: 10px;
                                                text-align: center;
                                                background-color: cyan;
                                    }
                                    label{
                                                font-family:Helvetica;
                                                width: 75px;
                                                display: inline-block;
                                    }
                        </style>
                        <script language="javascript">
                                    function InputOutput()
                                    {
                                                var x;
                                                x = document.getElementById("txtInput").value;
                                                document.getElementById("txtOutput").value = x;
                                    }
                        </script>
            </head>
            <body>
                        <div class="tengah">
                        <div class="text"><h3>BELAJAR JAVASCRIPT INPUT OUTPUT</h3><p></div>
                        <p>
                        <label>Input</label>
                        <input type="text" id="txtInput"/><p>
                        <label>Output</label>                       
                        <input type="text" id="txtOutput" disabled/><p>
                        <input type="button" value="Submit" id="Proses" onclick="InputOutput()">
                        <div>
            </body>
</html>

Hasilnya akan berubah seperti ini.



Sekian materi dari saya kali ini, jika ada salah-salah kata saya mohon maaf. Tolong kasih komentar supaya saya bisa mengembangkan terus postingan saya yang selanjutnya. Terima kasih

Komentar

Postingan populer dari blog ini

Cara Membuat Aritmatika dengan Javascript

Graph Berbobot (Weighted Graph)