Working on a budget application. I'm trying to get the number I'm inputting to be redirected to a p tag, but it's not showing up. I tested my code and I was able to get the text (Your Balance) to show up just fine, but the actual number that I'm taking from my input isn't showing up at all. I've tried a few things but can't seem to figure out why. Is it just not turning my input into a number?
html
<div class="enter-budget">
<label for="budget">Please Enter Your Budget</label>
<input type="number" id="input-balance">
<button onclick="addBalance()">Calculate</button>
</div>
<div class="budget">
<p>Budget</p>
<p id="budget-amount"></p>
</div>
javascript
let budget = document.getElementById("budget-amount");
let inputBalance = document.getElementById("input-balance").value;
const addBalance = () => {
budget.textContent = `Your Balance: ${inputBalance}`
}
You are getting a reference to the input value immediately, instead of when the addBalance method is called. You need to get the value when it's called.
let budget = document.getElementById("budget-amount");
let inputBalance = document.getElementById("input-balance");
const addBalance = () => {
let balance = inputBalance.value;
budget.textContent = `Your Balance: ${balance}`
}<div class="enter-budget">
<label for="budget">Please Enter Your Budget</label>
<input type="number" id="input-balance">
<button onclick="addBalance()">Calculate</button>
</div>
<div class="budget">
<p>Budget</p>
<p id="budget-amount"></p>
</div>