Estoy tratando de agregar un control deslizante de texto, donde básicamente un cuadro de texto muy largo se extiende fuera de la vista, y cuando se presiona un botón, se agrega un margen para que se pueda leer más texto. No sé cómo hacer un botón que agregue margen sin aumentarlo exponencialmente cada vez.
<div class='long'> <div class='container'> <button type="button" onclick="display()">Add left margin</button> <p id="myID">This is demo text.</p> <script> function display() { var e = document.getElementById("myID").style.marginLeft += 1 document.getElementById("myID").style.marginLeft; } </script>Después de unos pocos clics, esto comienza a aumentar el margen en cantidades increíbles. Creo que es porque el 1 no es 1px, sino alguna otra unidad que hace que se acumule increíblemente rápido. ASÍ QUE quiero tener un botón que agregue 1 px de margen por clic, para que agregue un margen sin problemas en lugar de un gran salto inutilizable.
Mi hipótesis es que necesita obtener el valor del margen, almacenarlo, luego agregarlo a una cadena que tiene 'px' al final y luego actualizar el margen con él.
Tienes razón con tus pensamientos. Almacene el valor del margen en una variable fuera de la función y auméntelo en uno cada vez.
El style.marginLeft devuelve 1px y no 1 , lo que significa que no puede incrementarlo.
var margin = 1; function display() { document.getElementById("myID").style.marginLeft = ++margin + "px"; } <div class='long'> <div class='container'> <button type="button" onclick="display()">Add left margin</button> <p id="myID">This is demo text.</p> </div> </div>Las funciones parseInt y parseFloat devolverán un valor numérico para marginLeft (es decir, sin el 'px' final que está causando su problema).
function display() { let el = document.getElementById("myID"); el.style.marginLeft = `${parseInt(el.style.marginLeft)+1}px`; }El problema es que ocurre la concatenación de cadenas cuando usa el operador + . Tiene que convertir el valor devuelto por element.style.marginLeft en un número. Puede llamar a la función Number() o usar el operador + inmediatamente adjunto cómo en mi solución. Otro problema podría ser que el valor devuelto sea como ese 1px por ejemplo y para incrementarlo tienes que analizarlo, usé la función de split
function display() { let currentMarginValue = +document.getElementById("myID").style.marginLeft.split('px')[0]; console.log(currentMarginValue) var e = document.getElementById("myID").style.marginLeft = currentMarginValue + 1 + "px" ; }