How can I fix this simple mean calculator so it works and how can I make it so it takes as many numbers as I want?

Question

I am making a mean calculator with HTML, JS, and Jquery. I wasn't sure how to retrieve the number of numbers that are entered so I came up with var numberOfNumbers = $('input').attr('class').length but I don't think it works. What is a better way to collect the number of numbers used to find the mean? Is there anything else wrong with my code? Also how can I make it so that I can enter as many numbers as I want and find the average of them? Thanks.

<!DOCTYPE html>
<html>
  <head>
    <title>Find Average</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="meancalculator.js"></script>
  </head>
  <body>
    <p>Number 1</p>
    <input type="text" id="number1" class="numbers">
    <p>Number 2</p>
    <input type="text" id="number2" class="numbers">
    <p>Number 3</p>
    <input type="text" id="number3" class="numbers">
    <button>Calculate</button>
    <p>The mean is <span></span></p>
  </body>
</html>

$(function () {
  $('button').click(calculate)
})

var number1 = $('#number1').val()
var number2 = $('#number2').val()
var number3 = $('#number3').val()
var numberOfNumbers = $('input').attr('class').length

function calculate() {
  var result = (number1 + number2 + number3) / numberOfNumbers
}

$('span').html(result)

Answer 1

Best case;

You can use "numbers" class for find it.

    var numberOfNumbers = $.find('.numbers').length;

Worst case;

If you think you will use "number" class for something else, you can add an data attribute for numbers such as;

<input type="text" id="number1" class="numbers" data-bla-bla="numbers">

and find specified data attribute;

var numberOfNumbers = 0;
$.each($.find('.numbers'),function(a,b) { if ($(b).attr('data-bla-bla') != undefined && $(b).attr('data-bla-bla') == 'numbers') { numberOfNumbers++; } });

Answer 2

You can use $('input').each() for get inputs in the page and $(e).val() to get value of each element withing the each()

DEMO

 $(function() { $('button').click(calculate) }) function calculate() { let result = 0 $('input').each((i, e) => { let val = parseInt($(e).val()); if (!isNaN(val)) { result += val } }) $('span').html(result / $('input').length); }

 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <p>Number 1</p> <input type="text" id="number1" class="numbers"> <p>Number 2</p> <input type="text" id="number2" class="numbers"> <p>Number 3</p> <input type="text" id="number3" class="numbers"> <button>Calculate</button> <p>The mean is <span></span></p>

Answer 3

Replace your following code :

var numberOfNumbers = $('input').attr('class').length

to:

var numberOfNumbers = $('.numbers').length

Answer 4

A couple of things:

You are taking input field values outside of calculate function. By that time numbers may not have entered. Same goes for displaying results. Move these lines inside calculate function.
Use $('input.numbers').length to get count of input elements having class numbers
Read the numeric values with + in prefix as +$('#number1').val()

Here is your modified code:

 <!DOCTYPE html> <html> <head> <title>Find Average</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="meancalculator.js"></script> </head> <body> <p>Number 1</p> <input type="text" id="number1" class="numbers"> <p>Number 2</p> <input type="text" id="number2" class="numbers"> <p>Number 3</p> <input type="text" id="number3" class="numbers"> <button>Calculate</button> <p>The mean is <span></span></p> </body> </html> <script> $(function () { $('button').click(calculate) }) function calculate() { var number1 = +$('#number1').val() var number2 = +$('#number2').val() var number3 = +$('#number3').val() var numberOfNumbers = $('input.numbers').length var result = (number1 + number2 + number3) / numberOfNumbers $('span').html(result) } </script>

Answer 5

Another way to approach the problem is just to have one input into which the user can add a list of numbers to take the mean of:

 $(function () { $('button').click(calculate) }) var number1 = $('#number1').val() var number2 = $('#number2').val() var number3 = $('#number3').val() var numberOfNumbers = $('input').attr('class').length function calculate() { let numbers = $('#numbers').val().split(/[ ,]+/); let sum = numbers.reduce((c, v) => c + parseInt(v), 0); let result = sum / numbers.length; $('span').html(result); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>Enter a list of numbers separated by space or comma:</p> <input type="text" id="numbers" class="numbers"> <button>Calculate</button> <p>The mean is <span></span></p>

Answer 6

I think what you want is something dynamic like this :)

 var count = 1, total = 0, mean = 0; $(document).on('click', '#addNewField', function() { var containerDiv = document.createElement('div'); containerDiv.className += "inputWrapper"; var inputField = document.createElement('input'); inputField.setAttribute('type', 'number'); inputField.className += 'number'; containerDiv.append(inputField); var deleteSpan = document.createElement('span'); deleteSpan.className += 'delete'; inputField.after(deleteSpan); $('#fields').append(containerDiv); inputField.focus(); count++; $('#count').text(count); }); $(document).on('keyup', '.number', function() { calculate(); }); function calculate() { total = 0; mean = 0; $('.number').each(function() { total += parseFloat($(this).val()); mean = total / count; }); $('#total').text(total); $('#mean').text(mean); } $(document).on('click', '.delete', function() { $(this).parent().remove(); count--; $('#count').text(count); calculate(); });

 .inputWrapper { position: relative; } .number { width: 200px; height: 30px; line-height: 30px; font-size: 24px; padding-left: 30px; margin: 5px 0; display: block; } table td { text-align: center; } input.number+*:after { content: "×"; font-size: 32px; top: 0; left: 5px; position: absolute; } #addNewField { height: 30px; width: 235px; margin: 10px 0 20px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <div id="fields"> <div class="inputWrapper"> <input type="number" class="number"><span class='delete'></span> </div> </div> <button id="addNewField">+ Add New Field</button> <table border="1px" cellPadding="10px"> <tr> <th>Count</th> <th>Total</th> <th>Mean</th> </tr> <tr> <td id="count">1</td> <td id="total">0</td> <td id="mean">0</td> </tr> </table>

How can I fix this simple mean calculator so it works and how can I make it so it takes as many numbers as I want?

Question

6 answers

solution1
0 2019-08-27 05:15:09

solution2
0 2019-08-27 05:17:42

solution3
0 2019-08-27 05:18:43

solution4
0 2019-08-27 05:22:21

solution5
0 2019-08-27 05:23:43

solution6
0 2019-08-27 06:44:37

How can I fix this simple mean calculator so it works and how can I make it so it takes as many numbers as I want?

Question

6 answers

solution1 0 2019-08-27 05:15:09

solution2 0 2019-08-27 05:17:42

solution3 0 2019-08-27 05:18:43

solution4 0 2019-08-27 05:22:21

solution5 0 2019-08-27 05:23:43

solution6 0 2019-08-27 06:44:37

solution1
0 2019-08-27 05:15:09

solution2
0 2019-08-27 05:17:42

solution3
0 2019-08-27 05:18:43

solution4
0 2019-08-27 05:22:21

solution5
0 2019-08-27 05:23:43

solution6
0 2019-08-27 06:44:37