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>