Why is this JavaScript and html code not working?

Question

I am making a JavaScript code that solves the midpoint formula when you give it inputs but when it gives me the answer the numbers are not what they are supposed to be! I have checked everything and it should work fine, but it doesn't. Here is the code,please help me:

<!DOCTYPE html>
<html>

<head>
    <style>
    </style>
    <script>
        function myFunction() {
            var xone = document.getElementById("x1").value;
            var yone = document.getElementById("y1").value;
            var xtwo = document.getElementById("x2").value;
            var ytwo = document.getElementById("y2").value;
            var step1 = (xone + xtwo) / 2;
            var step2 = (yone + ytwo) / 2;
            alert("(" + step1 + "," + step2 + ")");
        }
    </script>
</head>

<body>
    <span>x1</span>
    <input type="text" id="x1"></input><br>
    <span>y1</span>
    <input type="text" id="y1"></input><br>
    <span>x2</span>
    <input type="text" id="x2"></input><br>
    <span>y2</span>
    <input type="text" id="y2"></input><br>
    <button onclick="myFunction()">Go</button>
</body>

</html>

You're going to have to be more specific than "numbers are not what they are supposed to be". What numbers are you seeing and what did you expect them to be? — JJJ, Jan 09 '15 at 15:34
the problem is that if you put 10 everywhere, you should obtain 20 / 2 = 10 and he obtain 505 (10 + 10 = 1010 => 1010:2 = 505) — dpfauwadel, Jan 09 '15 at 15:39

score 0 · Answer 1 · answered Jan 09 '15 at 15:40

here is the correction

<head>
<style>

</style>
<script>
    function myFunction() {
        var xone =  document.getElementById("x1").value;
        var yone = document.getElementById("y1").value; 
        var xtwo =  document.getElementById("x2").value;
        var ytwo = document.getElementById("y2").value;
        var step1= (+xone + +xtwo)/2;
        var step2= (+yone + +ytwo)/2;
        alert("("+step1+","+step2+")");
    }
</script>
</head>
<body>
<span>x1</span>
<input type="text" id="x1"></input><br>
<span>y1</span>
<input type="text" id="y1"></input><br>
<span>x2</span>
<input type="text" id="x2"></input><br>
<span>y2</span> 
<input type="text" id="y2"></input><br>
<button onclick="myFunction()">Go</button>
</body>

You try to add the 2 number. For this you should do +var1 + +var2

Why is this JavaScript and html code not working?

1 Answers1