У меня есть ввод, который изменяет размер шрифта абзаца. При вводе размер абзаца изменяется всякий раз, когда я ввожу такие вещи, как «30 пикселей». Я хочу, чтобы он мог изменяться, когда я помещаю только номер нужного мне размера, без необходимости ставить после него «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;
                    
1
Lordultra 10 Окт 2021 в 04:47

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>
0
Spectric 10 Окт 2021 в 02:01

Без какой-либо проверки данных или проверки границ:

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>
0
Old Geezer 10 Окт 2021 в 01:58