Estoy tratando de que mis 3 elementos marginLeft difieran entre sí, y cada uno de los siguientes es 300px más grande que el anterior. Claramente, el 'px' que lo convierte en una cadena está en el camino, pero no sé cómo superarlo.
function render() { var gElOptions = document.querySelector('.options'); for (var i = 0; i < 3; i++) { var elOptionBtn = document.createElement('button'); gElOptions.appendChild(elOptionBtn); elOptionBtn.setAttribute('class', `option-${i}`); var elOption = document.querySelector(`.option-${i}`); elOption.style.marginLeft = 1000 + 'px'; // The problematic line: if (elOption.style.marginLeft === 1000 + 'px') elOption.style.marginLeft -= 300 + 'px'; } } <body onload="render()"> <div class="options"> </div> </body>Js es solo para agregar botones dinámicos. (flecha derecha, flecha izquierda).
El margen para cada botón se establece en css.
const container = document.querySelector('div'); const addButton = () => { const button = document.createElement('button'); button.textContent = "test" container.appendChild(button); } const delButton = () => { container.lastChild?.remove() } window.addEventListener("keydown", ({key}) => { switch(key){ case "ArrowLeft": { delButton(); break; } case "ArrowRight": { addButton(); } } }) button{ margin-left: 5px; } button:nth-child(1){ margin-left: 10px; } button:nth-child(2){ margin-left: 20px; } button:nth-child(3){ margin-left: 30px; } button:nth-child(4){ margin-left: 40px; } button:nth-child(5){ margin-left: 50px; } button:nth-child(6){ margin-left: 50px; } <div> function render() { var gElOptions = document.querySelector('.options'); for (var i = 0; i < 3; i++) { var elOptionBtn = document.createElement('button'); elOptionBtn.innerHTML = i gElOptions.appendChild(elOptionBtn); elOptionBtn.setAttribute('class', `option-${i}`); //var elOption = document.querySelector(`.option-${i}`); elOptionBtn.style.marginLeft = i*300 + 'px'; // The problematic line: //if (elOption.style.marginLeft === 1000 + 'px') elOption.style.marginLeft -= 300 + 'px'; } } render() <div class="options"></div>