flex-startflex-endcenterspace-aroundstretchauto` function addItem(){ if(count >= 20){ alert("No se puede agregar más! Está aplastado de nuevo."); return ; } var node = document.createElement('div'); node.setAttribute('class', 'item'); node.style.width = rval + 'px'; count++; node.innerHTML = item_template; node.getElementsByClassName('number')[0].innerText = count; item_body.appendChild(node); countNode.innerText = count; } function subItem(){ if(count <= 1){ alert("No se puede eliminar más! Se ha roto de nuevo."); return ; } var rmitem = document.getElementsByClassName('item'); // console.log(rmitem); item_body.removeChild(rmitem[rmitem.length-1]); count--; countNode.innerText = count; } //Arrastra el evento que cambia el ancho del elemento. var rval = 85; const widthRange = document.getElementById('widthRange'); const itemWidth = document.getElementById('itemWidth'); widthRange.addEventListener('input', setWidth); // widthRange.addEventListener('click', setWidth); function setWidth() { if(widthRange.value !== rval) { rval = widthRange.value; itemWidth.innerText = widthRange.value;; let items = document.getElementsByClassName('item'); for(let i = 0; i < items.length; i++) { items[i].style.width = rval + 'px'; } } } // Evento de enlace de configuración de propiedades de proyecto document.getElementById('item-body').addEventListener('input', function(e){ var event = e || window.event; var target = event.target || event.srcElement; if (target.matches('input') || target.matches('select')) { target.parentNode.style[target.placeholder || target.name] = target.value; } } )