Javascript 未更新 <input> 值

Posted 2023-05-08

【中文标题】Javascript 未更新 <input> 值

【英文标题】：Javascript not updating the <input> value

【发布时间】：2021-10-15 04:23:53

【问题描述】：

我想在单击按钮时使用 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

【问题讨论】：

当您更改按钮控件上的文本时，请尝试el.innerText

您在“添加”按钮上使用了waterInput id。不是<input> 元素。也使用partialWater.toString() 而不是toString(partialWater)。

【参考方案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>

【参考方案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>