Tengo una entrada que cambia el tamaño de fuente de un párrafo. La entrada cambia el tamaño del párrafo cada vez que ingreso cosas como "30px". Quiero que pueda cambiar cuando solo pongo el número del tamaño que quiero sin necesidad de tener "px" después.
También tengo 2 botones al lado que dicen que suma o resta el valor, pero no puedo entender cómo hacer que cambien el valor.
Obviamente, me gustaría que todo esto funcione sin necesidad de tener "px" después del número, pero parece que no puedo resolverlo.
Cualquier ayuda es apreciada.
Mi código:
<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 para el código anterior
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;Puede agregar un detector de eventos de click a cada uno de los botones que llama a una función e incrementa el valor de la entrada en un número determinado.
Para incrementar el valor, obtenga el valor de la entrada, divídalo por "px" , obtenga el primer elemento, increméntelo por el valor, concatene "px" y luego vuelva a asignarlo a la propiedad de valor de la entrada:
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>Sin ninguna validación de datos o controles de límites:
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>