Multiply value of input and print

Question

I have multiple inputs. These are multiplied and the result is checked wether it is higher or lower than certain values. This result shall be printed with an alert. It is just the first step, therefore I have an alert for me, so I can assure myself, that the result is correct.

The Input

<span class="input input--haruki">
   <input class=".someClass" type="text" id="input-q1a" />
   <label class=".someClass" for="input-q1a"><span class=".someClass">Some text</span></label>
 </span>

Jquery

var $htA = parseFloat($("#input-q1a").val(), 10);
var $avisA = ($htA *2);
var $euA = 0;
var $gaA = ($htA *3);

function exposeumfang() {
    if ($gaA <= 8) {
        $euA = 20;
    }  if ($gaA > 8 && $gaA <= 12) {
        $euA = 24;
    }  if ($gaA > 12 && $gaA <= 16) {
        $euA = 28;
    }  if ($gaA > 16 && $gaA <= 20) {
        $euA = 32;
    }  if ( $gaA >20 && $gaA <= 24) {
        $euA = 36;
    }  if ($gaA > 24 && $gaA <= 28) {
        $euA = 40;
    }  if ($gaA >28) {
        $euA = 44;
    }
    }
someButton.on('click', function(){
        alert('Some text ' + exposeumfang() + ' more text ' + $avisA + ' last bit of text.');
        });

I only get undefined and NaN for the two variables in the alert. I can't get a hold of this problem... :/ What am I doing wrong?

@SteevePitis: That means, I declare $htA INSIDE the alert function? Doesn't that mean I have to declare variables twice in each functions? Hm, can you show me how u would do it? I don't know how you want to put the variables in one function without loosing it for the other one. — Buntstiftmuffin, Oct 13 '16 at 10:47
@Raymond it is $("#input-qla") but yes, that definitly is a stupid one...But it still does give me undefined and NaN as output.. — Buntstiftmuffin, Oct 13 '16 at 10:55

score 1 · Accepted Answer · edited May 23 '17 at 12:19

You parse the value of an empty input and get NaN. You should parse the value on button click. I changed your code to display the alert on 'Some text' click:

<span class="input input--haruki">
   <input class=".someClass" type="text" id="input-q1a" />
   <label class=".someClass" for="input-q1a"><span class=".someClass">Some text</span></label>
</span>

Javascript:

var $htA = parseFloat($("#input-q1a").val() != '' ? $("#input-q1a").val() : 0, 10);
var $avisA = ($htA * 2);
var $euA = 0;
var $gaA = ($htA * 3);

function exposeumfang() {
  $htA = parseFloat($("#input-q1a").val() != '' ? $("#input-q1a").val() : 0, 10);
  $avisA = ($htA * 2);
  $gaA = ($htA * 3);
  if ($gaA <= 8) {
    $euA = 20;
  }
  if ($gaA > 8 && $gaA <= 12) {
    $euA = 24;
  }
  if ($gaA > 12 && $gaA <= 16) {
    $euA = 28;
  }
  if ($gaA > 16 && $gaA <= 20) {
    $euA = 32;
  }
  if ($gaA > 20 && $gaA <= 24) {
    $euA = 36;
  }
  if ($gaA > 24 && $gaA <= 28) {
    $euA = 40;
  }
  if ($gaA > 28) {
    $euA = 44;
  }
}

$("label>span").on('click', function() {
  exposeumfang()
  alert('Some text ' + $euA + ' more text ' + $avisA + ' last bit of text.');
});

WORKING FIDDLE

EDIT

I also modified the $htA variable to check if the input value is not empty. If it was empty, parseFloat(...) returned NaN.

This check is a one line 'if-else' (or more specifically a ternary operation) statement:

$("#input-q1a").val() != '' ? $("#input-q1a").val() : 0

If the input value is not empty, it passes the value to parseFloat function, and when it's empty it passes 0.

It could be modified to not call parseFloat function if it's empty:

var $htA = $("#input-q1a").val() != '' ? parseFloat($("#input-q1a").val(), 10) : 0;

works like a charm - thank you. But can you explain me the variable $htA? — Buntstiftmuffin, Oct 13 '16 at 11:16
I mean why you put this inside: != '' ? $("#input-q1a").val() : 0, 10); *?* — Buntstiftmuffin, Oct 13 '16 at 11:16
AND I am getting the error " expected !== and instead saw !=.... Where is the difference? — Buntstiftmuffin, Oct 13 '16 at 11:17

score 1 · Answer 2 · answered Oct 13 '16 at 11:38

Try this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
exposeumfang();
$('#someButton').on('click', function(){
        var htA = parseFloat($("#input-q1a").val(), 10);
        var avisA = (htA *2);

        alert('Some text ' + exposeumfang(htA) + ' more text ' + avisA + ' last bit of text.');
        });
});

function exposeumfang(htA) {

var avisA = (htA *2);

var euA = 0;
var gaA = (htA *3);

    if (gaA <= 8) {
        euA = 20;
    }  if (gaA > 8 && gaA <= 12) {
        $euA = 24;
    }  if (gaA > 12 && gaA <= 16) {
        euA = 28;
    }  if (gaA > 16 && gaA <= 20) {
        euA = 32;
    }  if ( gaA >20 && gaA <= 24) {
        $euA = 36;
    }  if (gaA > 24 && gaA <= 28) {
        euA = 40;
    }  if (gaA >28) {
        euA = 44;
    }
    return euA;
}

</script>

<span class="input input--haruki">
   <input class=".someClass" type="text" id="input-q1a" />
   <label class=".someClass" for="input-q1a"><span class=".someClass">Some text</span></label>
   <button id = "someButton" >Submit</button>
 </span>

Works out fine. Thank you too. But I'll stick with the other answer, got it implemented by now.. ;) — Buntstiftmuffin, Oct 13 '16 at 11:45

score 0 · Answer 3 · answered Oct 13 '16 at 11:01

0

Add a return in every if statement.

var $htA = parseFloat($(".input-q1a").val(), 10);
var $avisA = ($htA * 2);
var $euA = 0;
var $gaA = ($htA * 3);

function exposeumfang() {
  if ($gaA <= 8) {
    return $euA = 20;
  }
  if ($gaA > 8 && $gaA <= 12) {
    return $euA = 24;
  }
  if ($gaA > 12 && $gaA <= 16) {
    return $euA = 28;
  }
  if ($gaA > 16 && $gaA <= 20) {
    return $euA = 32;
  }
  if ($gaA > 20 && $gaA <= 24) {
    return $euA = 36;
  }
  if ($gaA > 24 && $gaA <= 28) {
    return $euA = 40;
  }
  if ($gaA > 28) {
    return $euA = 44;
  }
}
$("button").on('click', function() {
  alert('Some text ' + exposeumfang() + ' more text ' + $avisA + ' last bit of text.');
});

answered Oct 13 '16 at 11:01

Ray

9,184
3
27
44

Sorry, but this doesn't give me the result but still undefined and NaN... – Buntstiftmuffin Oct 13 '16 at 11:18
It worked to me. Make sure that it's `("#input-qla") first then, add the class or id that your button has – Ray Oct 13 '16 at 11:24
Done that right away, still no result. Don't know why. I will check it.. But thank you anyway for immediate help... – Buntstiftmuffin Oct 13 '16 at 11:26

Multiply value of input and print

3 Answers3