Question 244949 in Html Question posted in
Some basic documentation can be found here.

Html – I've been making a midpoint calculator but the results are all wrong. any help will be useful

<!DOCTYPE html>
<html>    
    <input type="text" placeholder ="first number" id="first">
    <br><br><br>
    <input type="text" placeholder="second number" id="second">
    <br><br><br>
    <button type="submit" onclick="myfunc()">Calcuate</button>

    <script type="text/javascript">
        function myfunc() {
            var first = document.getElementById('first').value;
            var second = document.getElementById('second').value;
            alert((first+second)/2);
        } 
    </script>
</html>

the results usually end up either correct or extremely off, like sometimes when I try to calculate the midpoint of 1 and 10 it shows up as 55

Tags:

5

Answers


  1. 0

    .value returns results as text. So when you enter 1 for the first input field and 10 for the second input field, and then use +, you are doing string concatenation ("1" + "10" = 110) rather than numeric addition. You may find the parseInt method to be of help.

    As a broader note, you have both of those input fields specified as text, which means I could enter "one" and "ten" and that would be accepted, but throw an error when doing mathematics. You might want to consider if there’s another input type that would restrict entry to numbers or explicitly handle that case in your code.

    Login or Signup to reply.
  2. 0

    Try to parse each input first as an integer. This can help you avoid the issue where the result is incorrectly calculated if the "number" provided in the <input> is actually a string instead.

    <!DOCTYPE html>
<html>    
    <input type="text" placeholder ="first number" id="first">
    <br><br><br>
    <input type="text" placeholder="second number" id="second">
    <br><br><br>
    <button type="submit" onclick="myfunc()">Calcuate</button>

    <script type="text/javascript">
        function myfunc() {

            //Parse the value, which may be a string, as an integer. If the input is not a valid integer, an error will be thrown accordingly
            var first = parseInt(document.getElementById('first').value); 
            var second = parseInt(document.getElementById('second').value);
            alert((first+second)/2);
        } 
    </script>
</html>

    On a further note, using parseInt() will parse numbers with decimals as integers. You may need to take this into account when doing your calculations where the input values may be a float.

    Login or Signup to reply.
  3. 0

    js took the text in the textbox as a string you need to convert to variables to integers then print the answer here

    code:

    <!DOCTYPE html>
<html>    
    <input type="text" placeholder ="first number" id="first">
    <br><br><br>
    <input type="text" placeholder="second number" id="second">
    <br><br><br>
    <button type="submit" onclick="myfunc()">Calcuate</button>

    <script type="text/javascript">
        function myfunc() {
            var first_as_string = document.getElementById('first').value;
            var second_as_string = document.getElementById('second').value;
            const first = parseInt(first_as_string);
            const second = parseInt(second_as_string);
            alert((first+second)/2);
        } 
    </script>
</html>```
    Login or Signup to reply.
  4. 0

    The problem with your current is that "first" and "second" variables are retrieved as string so the Javascript engine will do a concatenation then convert it to number and make division operation.

    Ex: first = "1", second = "2", first+second = "12" and then (first+second)/2 = 6

    So you have to convert the variables into numbers beforehand.

    Your solution might be:

    <!DOCTYPE html>
<html>    
<input type="text" placeholder ="first number" id="first">
<br><br><br>
<input type="text" placeholder="second number" id="second">
<br><br><br>
<button type="submit" onclick="myfunc()">Calcuate</button>

<script type="text/javascript">
    function myfunc() {
        var first = document.getElementById('first').value;
        var second = document.getElementById('second').value;
        alert((Number(first)+Number(second))/2);
    } 
</script>
    Login or Signup to reply.
  5. 0

    The value property is a string, so + performs string concatenation rather than numeric addition. Instead, you could use inputs with type set to "number" and read the valueAsNumber property.

    document.querySelector('button').addEventListener('click', e => {
  const mid = (document.getElementById('first').valueAsNumber
                + document.getElementById('second').valueAsNumber) / 2;
  console.log(mid);
});
    input[type=number] {
  display: block;
  margin-bottom: 37px;
}
    <input type="number" placeholder="first number" id="first">
<input type="number" placeholder="second number" id="second">
<button>Calculate</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search