Why do my variables attach to each other instead of adding together?

Question

The perimeter for my code always comes back like 2020 4040 and so on and I cannot seem to figure out why when the variables are both numbers. I know it is a pretty simple fix but I cannot figure it out. I tried parseInt but that did not work either. Can anyone help explain to me what I need to add or change to get my perimeter to come up say 40 using say 10 and 10 for the width and height.

<head>
    <meta charset="utf-8" />
</head>

<body>
    <p>Click the button to calculate the area and perimeter of a rectangle.</p>

    <button onclick="myFunction()">Try it out!</button>    

    <script>
        function myFunction() {
            var width = prompt("Please enter a width", " ");
            var height = prompt("Please enter a height", " ");
            var area = width * height;
            var perimeter = (width + height) * 2;

            if (width != null && height != null) {
                alert("The area is " + area + " and the perimeter is " + perimeter + ".");
            }
        }
    </script>

</body>

</html>

`prompt` always returns a string, and `+` is used to concatenate strings ... Convert the values to numbers before doing the maths. — Teemu, Jun 15 '16 at 18:03
prompt() returns a `String`. The + operator for strings is equivalent to string concatenation. You need to turn your width and height into `Number`. — le_m, Jun 15 '16 at 18:04
I would do something like **this**: http://jsbin.com/xuzijopade/1/edit?js,output — balexandre, Jun 15 '16 at 18:40

score 0 · Answer 1 · answered Jun 15 '16 at 18:13

0

prompt always returns a string. You have to convert it to a number before doing a +. Otherwise, it just concatenates.

You can do something like

var width = parseFloat(prompt("Please enter a width", " "));

answered Jun 15 '16 at 18:13

theCaveat

399
1
9

score 0 · Answer 2 · edited May 23 '17 at 10:28

0

This is because

var height = prompt("Please enter a height", " ");

gets a string value for 20, instead of Number value for 20, as I assume you wanted.

This might be what you are looking for: How do I convert a string into an integer in JavaScript?

edited May 23 '17 at 10:28

Community

1
1

answered Jun 15 '16 at 18:13

robert.otherone

48
4
9

score 0 · Answer 3 · answered Jun 15 '16 at 18:19

if you are positive it always come back as a number. Force it to become a number by multiple it by 1. see https://jsfiddle.net/ktaacx92/

var width = prompt("Please enter a width", " ") * 1;
var height = prompt("Please enter a height", " ") * 1;

but i recommend a quick form.

score 0 · Answer 4 · answered Jun 15 '16 at 18:19

0

Put the plus sign (+) in front of prompt() calls. This will cast the input as a number. (code pen: http://codepen.io/anon/pen/jrryBP).

JS:

function myFunction() {
  var width = +prompt("Please enter a width", " ");
  var height = +prompt("Please enter a height", " ");
  var area = width * height;
  var perimeter = (width + height) * 2;
  if (width != null && height != null) {
    alert("The area is " + area + " and the perimeter is " + perimeter + ".");
  }
}

answered Jun 15 '16 at 18:19

DRD

5,557
14
14

will not work if you input a char :) – balexandre Jun 15 '16 at 18:31
The OP's request focuses on conversion of valid numeric strings into numbers. The post does not deal with the validation of the said data. – DRD Jun 15 '16 at 18:47

score 0 · Accepted Answer · answered Jun 15 '16 at 18:20

Add parseInt around your prompt will parse the prompt string to an int. The math will then work correctly. (using + with strings will concatenate the strings and not add them as you desire).

<head>
    <meta charset="utf-8" />
</head>

<body>
    <p>Click the button to calculate the area and perimeter of a rectangle.</p>

    <button onclick="myFunction()">Try it out!</button>    

    <script>
        function myFunction() {
            // Make sure your prompt is parses as an int.
            var width = parseInt(prompt("Please enter a width", " "));
            var height = parseInt(prompt("Please enter a height", " "));
            var area = width * height;
            var perimeter = (width + height) * 2;

            if (width != null && height != null) {
                alert("The area is " + area + " and the perimeter is " + perimeter + ".");
            }
        }
    </script>

</body>

</html>

Why do my variables attach to each other instead of adding together?

5 Answers5