New to JavaScript, need help filling in amounts with the enter key

Hi guys, I’m very new to JavaScript and I’m stuck on an exercise.
I checked on youtube and google but I can’t seem to find it. Most of the videos are with a button or making a calculator.

I need to make a page with a text box were the user can fill in one or more amounts by pressing enter after each amount. After each input it needs to empty the text box.

The amounts entered need to be added together and their total needs to be showed in a second text box.

I know how to add if I could use a button with 2 text boxes and than their total in a third but I don’t know how to do it with 1 text box and with the enter key.

Does anyone have an answer for me or some guides or something. It’s frustrating to be stuck on the same exercise for days.

I know for the enter command, I need to do something like this but I don’t know how to really use it with adding the amounts:

document.getElementById("input").addEventListener("keyup", function (e) {
      if (e.key === "Enter" || e.keyCode === 13) {
          // do something
      }
  });

Thanks for reading my long post.

Thanks, I know that feeling, but don’t give up

Do you have a demo up to the point of your frustration? It will be easy to take it from there.

Stay blessed

1 Like

Well, I’m at the point of such frustration and being confused. That I’m trying everything and starting to confuse different things in the code that shouldn’t be their.

So, I have almost nothing and the things that I do got are probably wrong.

This is the code that I do have but it’s probably wrong since I’m so confused. That I’m starting to put everything in it that I learned till now.

<!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.key === Enter || e.keyCode === 13) {
    //do something}
  });
  
  function myFunction() {
    var amount = leesInvoer("input1");
    document.getElementById("input2").value = calculateAmount(amount).toFixed(2) +
    " euro";
  }
    
  function calculateAmount() {
    var x = .......
    return .....
  }
  
  function readInput(inputId) {
    var input = document.getElementById(inputId);
    var getal = +input.value;
    return getal;
  }

</script>

</body>
</html>
1 Like

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

You are off to the right start. Think about what you want to happen each time the enter key triggers the anonymous function. You said you need to create a running sum of all the values entered. That means you will need a variable to track the total. Then inside the anonymous function, you will need to add to the total and clear the value in the field. Also, you will update the running sum variable’s value in the second text box.

In addition to the variable I mentioned above, where you currently have // do something, you would need to call one of your existing functions and use its returned value to update the running sum variable, which could then simply call a modified version of your existing myFunction function. I say modified, as you are currently attempting to call a function named lessInvoer which is not defined in your code anywhere.

Also, you should be aware that you have not correctly closed the if statement code block in the code below:

document.getElementById("input1").addEventListener("keyup", function (e) {
    if (e.key === Enter || e.keyCode === 13) {
    //do something}
  });

You have correctly close the addEventListener , but you are missing a } after your if statement code block.

1 Like
<!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.key === Enter || e.keyCode === 13) {
    //do something
    }
  });
  
  function myFunction() {
    var amount = readInput("input1");
    document.getElementById("input2").value = calculateAmount(amount).toFixed(2) +
    " euro";
  }
    
  function calculateAmount() {
    var x = .......
    return .....
  }
  
  function readInput(inputId) {
    var input = document.getElementById(inputId);
    var getal = +input.value;
    return getal;
  }

</script>

</body>
</html>

Thanks for replying. Tomorrow, I will continue to again try to make this exercise work with your tips. I tried all day today. Would appreciate even more tips or comments. So I can get started tomorrow.

Did I close the if statement correctly now? I accidentally put it in my comments.

I translated from dutch to english for this forum and I forgot to translate “leesInvoer” to “readInput”. Thanks for the pointer.

I made some progress and this is whats left. The only thing I really don’t know is. How to calculate the total in the function (berekenBedrag) for input1 and input2.

<!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>

You are closer. The following line is a problem:

pBedrag = pBedrag+input;

input is not a value. It is an element, so you will need to access the value from the element. Also, remember, that the value will be a string, so to use it in any calculation, you will need to convert it to a number first.

That being said, the starting value is an empty string, so converting it to a number will make it the value 0. This is fine the first time you enter a number. The problem is the second time you enter a number, the value of input2 would be a string like 5 euros. You would need to convert this back to a number (ignoring the euros part).

Go back and read the first paragraph of my first reply above and you can make this a lot simpler by keeping track of the total that is accessible from all the functions. This total variable will always just be a number that you can then add the euros part to when it needs to be displayed (updated) in the input element.