如何制作在输入中增加或减少值的按钮？

Question

我有一个更改段落字体大小的输入。每当我输入“30px”之类的东西时，输入都会改变段落的大小。我希望它能够在我只输入我想要的尺寸的数字时改变，而不需要在它后面加上“px”。

我旁边还有两个按钮，表示增加或减少该值，但我不知道如何让它们更改该值。

显然，我希望这一切都能正常工作，而不需要在数字后加上“px”，但我似乎无法弄明白。

感谢任何帮助。

我的代码：

<tr>
    <th>Text size (px):
        <input id="textSizeInput" type="text" value="20px">
        <button id="sizeChanger">Change</button>
        <button id="addTen">+10px</button>
        <button id="minusTen">-10px</button>
    </th>
</tr>

Javascript 上面的代码

var changeTextSize = function () {
    console.log('in changeTextSize');

    var newTextSize = document.getElementById("textSizeInput").value;

    document.getElementById("showText").style.fontSize = newTextSize;
}

document.getElementById('sizeChanger').onclick = changeTextSize;
document.getElementById('textSizeInput').onchange = changeTextSize;

Answer 1

没有任何数据验证或边界检查：

function increment() {
  const input = document.getElementById("textSizeInput");
  input.value = Number(input.value) + 10;
}
function decrement() {
  const input = document.getElementById("textSizeInput");
  input.value = Number(input.value) - 10;
}

<tr>
    <th>Text size (px):
        <input id="textSizeInput" type="text" size="5" value="20"> px
        <button id="addTen" onclick="increment()">+10px</button>
        <button id="minusTen" onclick="decrement()">-10px</button>
    </th>
</tr>

Answer 2

您可以向每个按钮添加一个 click 事件侦听器，它调用一个函数并将输入的值递增一定数量。

要增加值，获取输入值，按 "px" 拆分，获取第一项，按值增加它，连接 "px" 然后分配回输入值属性:

var input = document.getElementById("textSizeInput")
var changeTextSize = function() {
  console.log('in changeTextSize');

  var newTextSize = input.value;

  document.getElementById("showText").style.fontSize = newTextSize;
}

document.getElementById('sizeChanger').onclick = changeTextSize;
document.getElementById('textSizeInput').onchange = changeTextSize;

function increment(value){
  let currentValue = input.value.split("px")[0]
  input.value = +currentValue + value + "px";
}

<tr>
  <th>Text size (px):
    <input id="textSizeInput" type="text" value="20px">
    <button id="sizeChanger">Change</button>
    <button id="addTen" onclick="increment(10)">+10px</button>
    <button id="minusTen" onclick="increment(-10)">-10px</button>
  </th>
</tr>

<p id="showText">Hello World!</p>

如何制作在输入中增加或减少值的按钮？

How to make buttons that adds or subtracts value inside input?

html

javascript

input

increment

button