JavaScript Input Output
Photo By Fili Santillán on Unsplash
This article is part of the JavaScript Fundamental Learning series. In this article, we will learn how to display output and receive input in JavaScript. Generally, JavaScript can accept input from various HTML form elements, but for now, we will use the prompt()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Say Greeting</title>
</head>
<body>
<h3 id="name" style="display: none">Selamat datang para pelajar</h3>
<script>
function inputName() {
var Name = prompt("Masukkan Nama Anda");
var greeting = "Selamat datang " + Name;
document.getElementById("name").style.display = "block";
document.getElementById("name").innerHTML = greeting;
}
inputName();
</script>
</body>
</html>In the script above, by default, the “Selamat datang” text is hidden using CSS (style=”display:none”). Then, in the body section, we insert a script to call the inputName() function. This function uses the `prompt()` function, which will trigger a popup dialog where you can enter your name. Once you enter your name, the greeting will appear on the page. If the greeting shows up, you’ve successfully learned one way to take input in JavaScript.
Javascript Output
In the previous example, we indirectly outputted the input into an HTML element using the innerHTML method. Now, we will explain other functions commonly used to display output in JavaScript. These functions include :
- innerHTML : Writes output into an HTML tag/element.
- document.write(): Writes output directly into the HTML page.
- window.alert(): Shows output in a popup alert.
- console.log(): Displays output in the browser console, commonly used for debugging.
To understand these examples, see the syntax below :
In the above script, we are using document.write() to display text directly on the page. The script automatically calculates the age by subtracting the birth year from the current year using new Date().getFullYear().
In the script above, when we click the ‘click me’ button, a popup will appear. The popup is triggered by the sayGreeting() function, which is inserted into the `onclick` event.
The last output function in JavaScript that we will discuss is console.log. This output acts as a log and can only be seen in the browser console. To understand what the browser console is, let’s first download Chrome or Firefox, then create a script here’s another example using a button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>greet</title>
</head>
<body>
<input type="text" id="yourName" />
<button type="button" onclick="sayGreeting()">Click Me</button>
<script>
function sayGreeting() {
var yourName = document.getElementById("yourName").value;
if (yourName == "" || !yourName) {
console.log("Silakan isi Nama anda terlebih dahulu");
} else {
console.log("Selamat Datang " + yourName);
}
}
</script>
</body>
</html>Run/open the file above using the browser you just downloaded. Right-click on your browser, then select Inspect Element. A tab will appear at the bottom of the page, as shown in the image below. Select the “Console” tab, then try filling in the form above and click the provided button. Make sure the result looks like the one below.
Congratulations! We have successfully learned how to handle input/output in JavaScript Mangcoding. If there’s any part of the material that you didn’t understand or if you have any questions, feel free to leave a comment below. Happy learning and stay motivated! ^_^