Request data with prompt in JavaScript

by Janeth Kent Date: 01-06-2021 javascript

After having published several articles about how to manipulate arrays and dates, today I will publish a post that some of you will find too basic and others will find it useful to get you started in the world of JavaScript programming. So, let them be read to the taste of the consumer. Let's start with something simple: knowing how to request data with prompt to the user in JavaScript. In other words, if I'm making a web page, how can I request data from the user.

It is true that possibly the best way is to insert a form with the fields so that the user can insert his answer. But it is true that in a didactic way it is easy to use a pop-up window or prompt in which the user can insert data.

In order to implement the example of how to ask for data with a prompt, we are going to make an example that asks the user for two numbers and returns the result by console. The first thing is to know the syntax of the .prompt() method.

result = window.prompt(message, default);

We can see that in the first field we put a message to be shown to the user to request the information and that the second parameter is the default value that we want to give to the user. It is important to understand that this value is the value that will appear in the dialogue box and that if the user deletes it, it will not be assigned as the default value. We can see that the result of invoking the .prompt() method is assigned to a variable.

So if we want to ask the user for a pair of numbers we will have the following.

let value1 = prompt("Give me value 1",0);  
let value2 = prompt("Give me value 2",0);

This will cause our browser to display something similar to the following:


It seems simple enough and does not take us any further. But there are a couple of considerations to bear in mind. The first is that the content returned by the .prompt() method is a string. You can check this by doing a .typeof() on its result.

console.log("The prompt content is of the type: " + typeof(value1));

That is why if we want to add the values as if they were numbers we must convert them to integers with the .parseInt() method.

let sumvalues = parseInt(value1) + parseInt(value2);
There is a second point to consider. Although we have seen that the second parameter of the .prompt() method allows us to give a default value, the user can delete it and leave the content as empty. So it will be good to perform some additional control of its content, especially if we expect it to be a number and we want to add them up.

So we could have something like this:

value1 = (value1=="")?"0":value1;  value2 = (value2=="")?"0":value2;

With this we will have learned everything we needed to know about how to request data with prompt in JavaScript.

by Janeth Kent Date: 01-06-2021 javascript hits : 834  
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.


Related Posts

Strings in JavaScript: What they are and how to use them

In this tutorial we are going to explain what strings are and how they are used in JavaScript. The tutorial is intended for people who are learning to program in…

Dates in local format with Javascript

In the articles we have about dates in JavaScript we were missing one about how to create dates in local format with JavaScript. That is to say, being able to…

Formatting hours in Javascript

Continuing with the set of articles that talk about internationalisation elements, like the previous one where we talked about relative dates in JavaScript, we will see in this one how…

Relative dates in JavaScript

One of the interesting things about the internationalisation library represented in the Int object is the handling of relative dates in Javascript. This handling allows us to represent a date…

How to access webcam and grab an image using HTML5 and Javascript

We often use webcams to broadcast video in real time via our computer. This broadcast can be viewed, saved and even shared via the Internet. As a rule, we need…

The JavaScript forEach loop

We have already talked about how to handle some of loops  types in Javascript including for, for-in and for-off loops. In the case of today we are going to see how…

What are React Hooks and what problems they solve

Working with React, - and before the release of Hooks in version 16.8 -  there was always the possibility to create components in three different ways based on a number of…

Flattening arrays in JavaScript

When we are handling arrays that are arrays or have multiple dimensions it can be very useful to know how to flatten arrays in JavaScript. That is to say, to…

How to populate an array with random numbers in JavaScript

Some of you might think that what we explained in the article on how to populate an array with numbers, apart from the didactic part, would not have much applicability…

How to populate an array with numbers in JavaScript

Populate an array with numbers in JavaScript The first step is to initialise the array. So today we are going to see a simple way to do it and see how…

Top Javascript Libraries and Frameworks Part 2

What are JavaScript frameworks?   JavaScript frameworks are application frameworks that allow developers to manipulate code to meet their particular needs. Web application development is like building a house. You have the option…

How to Send Email from an HTML Contact Form

In today’s article we will write about how to make a working form that upon hitting that submit button will be functional and send the email (to you as a…

We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".

Accept All Only sistem cookies Configuration