Very new to Javascript. Can't seem to get 1 function to work in my code (berekenBedrag). Needs to calculate the total

Question

I'm struggling with the same code for days now and it's becoming frustrating. I checked youtube, google, read in Flanagan but I can't seem to find the answer. Now, I believe I came to the end of my code but one function I don't get to work. I need to have 1 input text were the user puts in an amount, presses enter and the total needs to go to input text 2. After each input, the input from text 1 needs to get emptied. Everything works except for calculating the total in input text 2.

Thanks for reading and appreciate the help.

This is my code:

<!DOCTYPE html>
<html>
<body>
 
<input type="text" id="input1"><br><br>
<input type="text" id="input2">
 
<script>
   document.getElementById("input1").addEventListener("keyup", function(e) {
    if ( e.keyCode === 13) {
    myFunction();
    }
  });

  function myFunction() {
    var bedrag = leesInvoer("input1");
    document.getElementById("input1").value="";
    document.getElementById("input2").value = berekenBedrag(bedrag).toFixed(2) +
    " euro";
  }

  function berekenBedrag(pBedrag) {
    var input = document.getElementById("input2");
    pBedrag = pBedrag+input;
    //This function is wrong but I don't know how to calculate the total from         input 1 and 2 together.
    return pBedrag;
  }

  function leesInvoer(invoerId) {
    var invoer = document.getElementById(invoerId); 
    var getal = +invoer.value;
    return getal;
  }
  
</script>

</body>
</html>

`input` in `berekenBedrag` is still a string when you try to `+` the two variables together — Taplar, Sep 10 '20 at 16:48
Does this answer your question? [How do I get the value of text input field using JavaScript?](https://stackoverflow.com/questions/11563638/how-do-i-get-the-value-of-text-input-field-using-javascript) — Charlie Bamford, Sep 10 '20 at 16:49
`input` in `berekenBedrag` is an `element` object, you need to convert the `input.value` to a `float` then add it to the `pBedrag` — Ryan Wilson, Sep 10 '20 at 16:58
Taplar & Ryan Wilson - And how do I do that? Or is the function wrong? Charles Bamford - I actually read that a couple of hours back but there is so much information that it even makes me more confused than I already am. iota - The user puts in an amount in input1. Presses enter. The input from 1 gets calculated to input2. If the user fills in another amount in input1 with enter than the old input en the new needs to be added in 2. I'm sorry if this seems like really easy but I've confused myself beyond any solution. I'm very new at coding. Thanks for the help. — dostdenzel, Sep 10 '20 at 17:22
`pBedrag = pBedrag+input;` change to `pBedrag = pBedrag+(input.value *1);` - the `*1` coerces it into a number, might have to parse if if they enter "bad234" or some such. — Mark Schultheiss, Sep 10 '20 at 18:14
did you mean to set to empty string and not 0? `document.getElementById("input1").value="";` — Mark Schultheiss, Sep 10 '20 at 18:17
You do realize that you are putting a string back in the input `document.getElementById("input2").value = berekenBedrag(...` — Mark Schultheiss, Sep 10 '20 at 18:25
@MarkSchultheiss Thank you, this works! But I did have to delete " euro" at myFunction() in order for it to work. Is there a way I can keep the euro in my code? — dostdenzel, Sep 10 '20 at 18:30
@MarkSchultheiss I did not. Like I said. Very new and still learning. Trying my best. I did mean to empty the string. So after he presses enter. The input gets deleted. So he doesnt have to backspace or delete it himself. — dostdenzel, Sep 10 '20 at 18:31
See my example (note it can be simplified but is "sort of" like your code.) — Mark Schultheiss, Sep 10 '20 at 18:50

score 1 · Accepted Answer · answered Sep 10 '20 at 18:45

Put the " euro" outside the input
Parse the number
Disable the other field from accepting input
Use "change" in case they use another input method (tab off, hit "enter" or some other way (click off) etc.
Reset the input value where you got it (I used null but that is a style choice)

document.getElementById("input1")
  .addEventListener("change", function(e) {
    //if (e.keyCode === 13) {
    myFunction();
    //}
  });

function myFunction() {
  var bedrag = leesInvoer("input1");
  document.getElementById("input2").value = berekenBedrag(bedrag).toFixed(2);
}

function berekenBedrag(pBedrag) {
  let input = document.getElementById("input2");
  pBedrag = pBedrag + (input.value * 1);
  return pBedrag;
}

function leesInvoer(invoerId) {
  let invoer = document.getElementById(invoerId);
  let getal = !isNaN(parseFloat(invoer.value)) && isFinite(invoer.value) ? parseFloat(invoer.value) : 0;
  invoer.value = null;
  return getal;
}

<div><input type="text" id="input1"></div>
<div>
  <input type="text" id="input2" disabled><span> euro</span></div>

Thank you so much! Haven't learned about parse yet but I know the next chapter is about that. So this will be usefull for future use and understanding what to code. The layout with how it looks is indeed way better. Thanks again, for your time! — dostdenzel, Sep 10 '20 at 18:53

score 0 · Answer 2 · answered Sep 10 '20 at 17:47

0

You can use a global variable to store the total (which starts at 0) and add the value of the input after converting to a number (using the unary plus operator) each time.

document.getElementById("input1").addEventListener("keyup", function(e) {
  if (e.keyCode === 13) {
    myFunction();
  }
});

let total = 0;

function myFunction() {
  var bedrag = +document.getElementById("input1").value;
  total += bedrag;
  document.getElementById("input1").value = "";
  document.getElementById("input2").value = total.toFixed(2) +
    " euro";
}

<input type="text" id="input1"><br><br>
<input type="text" id="input2">

answered Sep 10 '20 at 17:47

Unmitigated

76,500
11
62
80

This seems to work, so thank you for that. But is there also a way to do it with my code? With all my functions? – dostdenzel Sep 10 '20 at 18:12
@dostdenzel You really only need the first function. The other functions are unnecessary. – Unmitigated Sep 10 '20 at 18:12
@dostdenzel Is there a reason you need to keep the exact same structure? – Unmitigated Sep 10 '20 at 18:15
I would discourage the use of a global variable - namespace it at least. – Mark Schultheiss Sep 10 '20 at 18:23
@MarkSchultheiss Why would you discourage it? – Unmitigated Sep 10 '20 at 18:24
@iota Because thats the way I'm still learning it. I have to put as much functions as possible into my code. Teacher responded that it was fine but I need to calculate the total in my function berekenBedrag. I agree that yours is way better and maybe I should just use that. I was just wondering if it was possible. Thank you for your time. – dostdenzel Sep 10 '20 at 18:27
@dostdenzel Here is an example using your functions: https://jsfiddle.net/8vjnb2zf/ – Unmitigated Sep 10 '20 at 18:29
@iota Thank you so much for your time and comment. This works. Will study what I did wrong. Thanks again. Saved me some more headaches. – dostdenzel Sep 10 '20 at 18:35
@dostdenzel Glad to help. – Unmitigated Sep 10 '20 at 18:35
@iota Will do, thanks again! Let me know if I didn't do it right. – dostdenzel Sep 10 '20 at 18:41
@iota later add a new library or set of script that uses another global named `total` and this no longer works. – Mark Schultheiss Sep 10 '20 at 18:47

Very new to Javascript. Can't seem to get 1 function to work in my code (berekenBedrag). Needs to calculate the total

2 Answers2