DEV Community

Cover image for 3 easy ways to interact with users in JS
Sakshi Jain
Sakshi Jain

Posted on

3 easy ways to interact with users in JS

JS provides you 3 easy ways to interact with users without asking anything much.

Alerts

Alert pops-up dialog box on screen with a button "ok" on it. The button is by default on this dialog box.

Code

<script>
 alert('HI there'); // with specified content
 alert(); // without any specified content
</script>

Enter fullscreen mode Exit fullscreen mode

Prompt

Prompt is another user-interface function which normally contains two arguments.

The text is basically what you want to show the user and the default value argument is optional though it acts like a placeholder inside a text field. It is the most used interface as with it you can ask the user to input something and then use that input to build something.

Example:(with default parameter)

<script>
// prompt example
let age = prompt('How old are you?', 50);

alert(`You are ${age} years old!`); 
</script>
Enter fullscreen mode Exit fullscreen mode

confirm

The confirm function basically outputs a modal window with a question and two button ‘OK’ and ‘CANCEL’.

confirm('question');

Example:

<script>
// confirm example 
let isHappy  = confirm('Are you Happy?');
alert(`You are ${isHappy}`); 
</script>

Enter fullscreen mode Exit fullscreen mode

It will print true or false based on your choice of clicking the ‘OK’ button or ‘CANCEL’ button respectively.

alert('THanks for rreaaddingg <3');

Discussion (2)

Collapse
lukeshiru profile image
Luke Shiru

Worth mentioning that ideally you shouldn't use any of these, and instead use elements like dialog which wont block the entire page for a single interaction like alert, prompt and confirm do.

Collapse
bellatrix profile image
Sakshi Jain Author

Agreed @lukeshiru