Simple add function with JQuery

Question

I'm trying to write a very simple function in jQuery, in which I add the input values ​​of two input-fields (type text) and output the result.

I get either NaN or no result. Have tried it already with parseInt(), but also had no success.

What am I doing wrong?

function output() {
        var stellplaetze = $('.stellplaetze').val();
        var miete = $('.miete').val();
        var result = stellplaetze * miete * 30;
        $('.result').html(
          '<strong class="text-uppercase">Ertrag pro Monat: </strong><br> ' +
            result +
            ' EUR'
        );
      }
      
$(function() {
    // Trigger the function
    $('button').on('click', function() {
      output();
      $('#ertragsrechner .result').css('opacity', 1);
    });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="formbody">
        <input type="hidden" name="FORM_SUBMIT" value="auto_form_5">
        <input type="hidden" name="REQUEST_TOKEN" value="pC9vYIP8oBzVONQiwg-ixrLwDhEdK0LA8-5n-6kQJPw">
        <div class="widget widget-text stellplaetze">
            <input type="text" name="stellplaetze" id="ctrl_12"
                class="text stellplaetze form-control flex-fill mr-0 mr-sm-2 mb-3" value=""
                placeholder="Anzahl der Stellplätze">
        </div>
        <div class="widget widget-text miete">
            <input type="text" name="miete" id="ctrl_13" class="text miete form-control flex-fill mr-0 mr-sm-2 mb-3"
                value="" placeholder="Miete pro Tag">
        </div>
        <div class="widget widget-submit add">
            <button type="submit" id="ctrl_15" class="submit add btn btn-primary">Ertrag berechnen</button>
        </div>
        <div class="widget widget-explanation explanation result">
            <p>Ertrag Pro Monat</p>
        </div>
    </div>

Answer 1

Actually, the issue is with the selector be more specific since there are multiple elements with the same class name. In your case, you can add input along with class selector.

By default jQuery val() method just retrieves the value of the first element in the collection, in your case, it's the div element.

From jQuery docs:

Get the current value of the first element in the set of matched elements

function output() {
  var stellplaetze = $('input.stellplaetze').val();stellplaetze
  // here --------------^^^^^^---------
  var miete = $('input.miete').val();
  // here -------^^^^^^---------
  var result = stellplaetze * miete * 30;
  $('.result').html(
    '<strong class="text-uppercase">Ertrag pro Monat: </strong><br> ' +
    result +
    ' EUR'
  );
}

// Trigger the function
$('#ertragsrechner button').on('click', function() {
  output();
  $('#ertragsrechner .result').css('opacity', 1);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ertragsrechner">
  <div class="formbody">
    <input type="hidden" name="FORM_SUBMIT" value="auto_form_5">
    <input type="hidden" name="REQUEST_TOKEN" value="pC9vYIP8oBzVONQiwg-ixrLwDhEdK0LA8-5n-6kQJPw">
    <div class="widget widget-text stellplaetze">
      <input type="text" name="stellplaetze" id="ctrl_12" class="text stellplaetze form-control flex-fill mr-0 mr-sm-2 mb-3" value="" placeholder="Anzahl der Stellplätze">
    </div>
    <div class="widget widget-text miete">
      <input type="text" name="miete" id="ctrl_13" class="text miete form-control flex-fill mr-0 mr-sm-2 mb-3" value="" placeholder="Miete pro Tag">
    </div>
    <div class="widget widget-submit add">
      <button type="submit" id="ctrl_15" class="submit add btn btn-primary">Ertrag berechnen</button>
    </div>
    <div class="widget widget-explanation explanation result">
      <p>Ertrag Pro Monat</p>
    </div>
  </div>
</div>

Answer 2

Assuming all the variables are retrieved from an input box, while multiplying change the variables to numbers using Number()

var result = Number(stellplaetze) * Number(miete) * 30;

There are multiple elements with same class in the html. To Select the input with the class miete and stellplaetze use input .classname as the jquery selector

function output() {
        var stellplaetze = $('input.stellplaetze').val();
        var miete = $('input.miete').val();
        var result = Number(stellplaetze) * Number(miete) * 30;
        $('.result').html(
          '<strong class="text-uppercase">Ertrag pro Monat: </strong><br> ' +
            result +
            ' EUR'
        );
      }
      
$(function() {
    // Trigger the function
    $('button').on('click', function() {
      output();
      $('#ertragsrechner .result').css('opacity', 1);
    });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="formbody">
        <input type="hidden" name="FORM_SUBMIT" value="auto_form_5">
        <input type="hidden" name="REQUEST_TOKEN" value="pC9vYIP8oBzVONQiwg-ixrLwDhEdK0LA8-5n-6kQJPw">
        <div class="widget widget-text stellplaetze">
            <input type="text" name="stellplaetze" id="ctrl_12"
                class="text stellplaetze form-control flex-fill mr-0 mr-sm-2 mb-3" value=""
                placeholder="Anzahl der Stellplätze">
        </div>
        <div class="widget widget-text miete">
            <input type="text" name="miete" id="ctrl_13" class="text miete form-control flex-fill mr-0 mr-sm-2 mb-3"
                value="" placeholder="Miete pro Tag">
        </div>
        <div class="widget widget-submit add">
            <button type="submit" id="ctrl_15" class="submit add btn btn-primary">Ertrag berechnen</button>
        </div>
        <div class="widget widget-explanation explanation result">
            <p>Ertrag Pro Monat</p>
        </div>
    </div>

Answer 3

You have the same class name on many elements, while the jQuery documentation on the val() method says

Get the current value of the first element in the set of matched elements or set the value of every matched element.

So you have either to iterate over the elements array or change the class name of the input element