I am trying to get the value of an input in real time but I can't get it
I'm trying that in the bottom button the first X is the amount of carrots specified in the input above, and in the second X is a number that will be calculated in a script, all in real time (if the input number changes, the bottom ones will change automatically) but for that I need a way to get the value of the input in real time
Here's the code, I'm using express-handlebars and Bootstrap for the styles and classes
<div class="col-md-auto mx-auto">
<h3 class="text-center">Buy</h3>
<form action="/dashboard/" method="POST">
<div class="form-group">
<input type="number" id="buyA" min="3"class="form-control" name="buyA" placeholder="Amount">
<div class="d-grid gap-2">
<button class="btn btn-success">Buy X Things X</button>
</div>
</div>
<input type="hidden" id="buy" name="buy" value="buy">
</form>
</div>
One of the scripts I've tried is this one, but it doesn't show anything and I just put it in place of the X (I'm a bit of a newbie in HTML), that is, instead of the X I just put that Script to hopefully get its value
<script>
let buyAmount = document.getElementById('buyFormAmount').value;
if (!buyAmount || <= 0) = "?";
return buyAmount;
</script>
You need to create function that will be called when input of id buyForm changes. In that function, you need to get the value of input, calculate 'the second X', and set inner html for span HTML elements that should be in your button of class btn btn-success.
You need to add an Event Listener on the input field, see exemple below.
var x = document.getElementById('txt');
x.addEventListener('input', function(){
document.getElementById("myBtn").innerHTML="Buy "+x.value+" Rabbits by "+ x.value+" Carrots"
});<input type="text" id="txt" name="txt" value="" >
<button id="myBtn" value="myvalue" >Try it</button>