Need a little help (kinda a js noob)

Question:
I need some help with JS. I’m trying to make a banking/dabloon app for fun but im not sure really where to start since I don’t really know how to use javascript. I just want to figure out how to have two input fields where a user can put how many dabloons they lost or earned

Here is the link


Here is my index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <center><div id="bank-card">
    <h1>Hello! you have # Dabloons</h1>
  </div></center>
  <script src="script.js"></script>

 <!--
  This script places a badge on your repl's full-browser view back to your repl's cover
  page. Try various colors for the theme: dark, light, red, orange, yellow, lime, green,
  teal, blue, blurple, magenta, pink!
  -->
  <script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer></script> 
</body>

</html>

1 Like
 <input type="text"></input>

This allows you to put a text box into the html. Go here for additional info (including how to get the text out of the input). In javascript, changing document.getElementById("bank-card").textContent will change the text in the h1

Of course, if you don’t understand the syntax yet, then you should try learning JavaScript through a common source, like freecodecamp

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <center><div id="bank-card">
    <h1 id="dabloons">Hello! you have # Dabloons</h1>
    <input type="number" onkeyup="updateDabloons()" placeholder="Enter Your Dabloons">
    <!-- The line will make a number input that every time the user presses a key it will run the function  updateDabloons()-->
  </div></center>
  <script>
    function updateDabloons() {
        // This function will update the dabloons
      var dabloons = document.querySelector("input").value; //this line will get the value of the input
      document.getElementById("dabloons").innerText = " Hello! you have "+dabloons+" Dabloons";
    }

  </script>
  <script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer></script>
  <script src="script.js"></script>
</body>

This will update the text every time the user types something into the textbox.

1 Like
// always better to only get these elements once,
// this eliminates unneccessary operations
const display = document.getElementById("dabloons");
const doubloons = document.querySelector("input");

// event listeners are best practice
doubloons.addEventListener("keyup", function() {
	display.textContent = "Hello! You have " + doubloons.value + " Dabloons";
});