1

我正在尝试实时获取输入的值，但无法获取

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

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

<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 的新手），也就是说，而不是 XI把那个脚本希望能得到它的价值

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

2 回答 2

1

您需要创建将在 id 输入buyForm更改时调用的函数。在该函数中，您需要获取 input 的值，计算“第二个Xspan ”，并为应该位于 class 按钮中的 HTML 元素设置内部 html btn btn-success。

于 2021-12-30T23:38:19.687 回答
1

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

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>

于 2021-12-30T23:54:17.543 回答