Javascript 未更新 <input> 值

Question

我想在单击按钮时使用 js 更改输入字段的值，但我的解决方案根本不起作用。我也试过 setAttribute('value','My default value');但也没有用。任何建议将不胜感激。

我有 3 个按钮 (+250) (+500) (+1000)，我希望在单击其中一个按钮后，输入字段会将按钮的相应值添加到其值中。 （IDK 如果有帮助，但在所有 var 之前还有另一个函数）

var el = document.getElementById("waterInput");
var b250 = document.getElementById("btn250");
var b500 = document.getElementById("btn500");
var b1000 = document.getElementById("btn1000");
var partialWater = 0;

b250.onclick = function() {
  insertInput(250)
}
b500.onclick = function() {
  insertInput(500)
}
b1000.onclick = function() {
  insertInput(1000)
}

function insertInput(water) {
  partialWater += water;
  el.value = toString(partialWater);
}

<div class="mb-4">
  <button id="btn250" class="btn btn-outline-primary">+250 ml.</button>
  <button id="btn500" class="btn btn-outline-primary">+500 ml.</button>
  <button id="btn1000" class="btn btn-outline-primary">+1000 ml.</button>
</div>
<form method="post">
  <div class="input-group mb-3" style="width: 50%">
    <input type="text" class="form-control" placeholder="" aria-label="Custom Water" aria-describedby="basic-addon2">
    <span class="input-group-text" id="basic-addon2">ml</span>
  </div>
  <button id="waterInput" type="submit" class="btn btn-primary">Add</button>
  <button class="btn btn-danger text-decoration-underline mx-5">Reset</button>
</form>

我正在使用 Flask 和 pyCharm

Answer 1

也许这有帮助： 将 id 放入您的输入（在本例中为“waterlabel”）并将不带 toString 的值传递给 el.value

希望这对你有用 祝你有美好的一天

var el = document.getElementById("waterlabel");
var b250 = document.getElementById("btn250");
var b500 = document.getElementById("btn500");
var b1000 = document.getElementById("btn1000");
var partialWater = 0;

b250.onclick = function() {
  insertInput(250)
}
b500.onclick = function() {
  insertInput(500)
}
b1000.onclick = function() {
  insertInput(1000)
}

function insertInput(water) {
  partialWater += water;
  el.value = partialWater;
}

<div class="mb-4">
  <button id="btn250" class="btn btn-outline-primary">+250 ml.</button>
  <button id="btn500" class="btn btn-outline-primary">+500 ml.</button>
  <button id="btn1000" class="btn btn-outline-primary">+1000 ml.</button>
</div>
<form method="post">
  <div class="input-group mb-3" style="width: 50%">
    <input id="waterlabel" type="text"  class="form-control" placeholder="" aria-label="Custom Water" aria-describedby="basic-addon2">
    <span class="input-group-text" id="basic-addon2">ml</span>
  </div>
  <button id="waterInput" type="submit" class="btn btn-primary">Add</button>
  <button class="btn btn-danger text-decoration-underline mx-5">Reset</button>
</form>

Answer 2

尝试引用输入而不是按钮：

var el = document.getElementById("aa");
var b250 = document.getElementById("btn250");
var b500 = document.getElementById("btn500");
var b1000 = document.getElementById("btn1000");
var partialWater = 0;

b250.onclick = function() {
  insertInput(250)
}
b500.onclick = function() {
  insertInput(500)
}
b1000.onclick = function() {
  insertInput(1000)
}

function insertInput(water) {
  partialWater += water;
  console.log(el)
  el.value = partialWater;
}

<div class="mb-4">
  <button id="btn250" class="btn btn-outline-primary">+250 ml.</button>
  <button id="btn500" class="btn btn-outline-primary">+500 ml.</button>
  <button id="btn1000" class="btn btn-outline-primary">+1000 ml.</button>
</div>



<form method="post">
  <div class="input-group mb-3" style="width: 50%">
    <input id="aa" type="text" class="form-control" placeholder="" aria-label="Custom Water" aria-describedby="basic-addon2">
    <span class="input-group-text" id="basic-addon2">ml</span>
  </div>
  <button id="waterInput" type="submit" class="btn btn-primary">Add</button>
  <button class="btn btn-danger text-decoration-underline mx-5">Reset</button>
</form>