实时从输入中获取值

Question

我想实时获取输入的值，但无法获取

我正在尝试在底部按钮中第一个 X 是上面输入中指定的胡萝卜数量，第二个 X 是一个将在脚本中实时计算的数字（如果输入数字更改，底部的数字将自动更改）但为此我需要一种方法来实时获取输入值

这是代码，我使用 express-handlebars 和 Bootstrap 作为样式，类

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

我试过的脚本之一是这个，但它没有显示任何内容，我只是把它放在 X 的位置（我在 HTML 中有点新手），也就是说，我只是把那个脚本放在 X 而不是希望得到它的值

<script>
    let buyAmount = document.getElementById('buyFormAmount').value;
    if (!buyAmount || <= 0) = "?";
    return buyAmount;
</script>

Answer 1

您需要创建将在输入 id buyForm 更改时调用的函数。在该函数中，您需要获取输入值，计算 'the second X'，并为 span HTML 元素设置内部 html，这些元素应该位于 [=20] 的按钮中=] btn btn-success.

Answer 2

您需要在输入字段上添加一个事件侦听器，请参见下面的示例。

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>

实时从输入中获取值

Obtain value from an input in real time

html

javascript

express-handlebars

bootstrap-5

hbs