La manera en que se está declarando la clase, con esos #
, me da la sospecha que debería tirar error. Es mejor no usar el #
al declarar propiedad. Lo que sí puede hacerse es usar el #
en el querySelector
, es decir, es una ruta CSS finalmente.
export default class Productos {
#productos;
#formEdicion;
Me imagino que el proyecto se trata de algo que varía la cantidad de imágenes, y el usuario tiene que cambiar valores.
El problema está aquí:
imagen: document.querySelectorAll('#productos-adicion #txtImagen').value
Se está intentando devolver el valor de una lista de imágenes, es decir, no los valores de una lista, sino el valor de una lista.
Pero además el querySelectorAll
no devuelve un array, en vez de eso devuelve una colección, que para procesarla hay que convertirla a array.
Para lograr esto, se hace de la siguiente manera:
var valores = [...document.querySelectorAll('#txtImagen')].map(x=>{
return x.value
})
Para un solo txtImagen
se está usando el atributo HTML id
, y en el querySelector
se accede con #
, pero como hay más de uno, hay que usar el atributo HTML class
y en el querySelector
usar un .
.
[...document.querySelectorAll('.txtImagen')]
Para el botón de Guardar Adición, al hacer click
, llamo a una función anónima que llama al método guardarAdicion
, y en vez de un onclick
en el HTML, hago un addEventListener
en JavaScript.
document.querySelector("#productos-adicion #guardarAdicion")
.addEventListener("click",()=>window.productos.guardarAdicion())
Si llamo normalmente al método, no funciona, para eso necesito una función anónima. Es decir, lo siguiente trae problemas.
.addEventListener("click",window.productos.guardarAdicion)
En cambio, al usar la función anónima ()=>
, anda bien:
.addEventListener("click",()=>window.productos.guardarAdicion())
Código completo:
class Productos {
constructor() {
this.productos = []
}
guardarAdicion() {
let nuevoProducto = {}
var valores = [["id","identificador"],
["referencia","referencia"],
["imágenes","txtImagen"]].map(function(x){
nuevoProducto[x[0]] = [
...document.querySelectorAll(
`#productos-adicion .${x[1]}`
)
].map(x=>x.value)
if(nuevoProducto[x[0]].length<2){
nuevoProducto[x[0]] = nuevoProducto[x[0]][0]
}
})
var div = document.createElement("div")
div.innerHTML = JSON.stringify(nuevoProducto)
document.querySelector("#resultado").appendChild(div)
this.productos.push(nuevoProducto)
}
}
window.productos = new Productos()
document.querySelector("#productos-adicion #guardarAdicion")
.addEventListener("click",()=>window.productos.guardarAdicion())
document.querySelector("#productos-adicion #cantidadImagenes")
.addEventListener("keyup",function(x){
var imagenes = document.querySelector("#productos-adicion #imagenes")
var cantidad = + x.target.value
var i = 1
imagenes.innerHTML = ""
var dentro = [...Array(cantidad)].map(()=>{
var div = document.createElement("div")
var input = document.createElement("input")
input.className = "txtImagen"
div.innerHTML = `Imagen ${i}: `
div.appendChild(input)
imagenes.appendChild(div)
++i
})
})
<div id="productos-adicion">
<div>Cantidad de imágenes:
<input id="cantidadImagenes" />
<button id="guardarAdicion">Guardar Adición</button>
</div>
<table border="1">
<tr>
<td>
<div>Identificador: <input class="identificador"/></div>
<div>Referencia: <input class="referencia"/></div>
<div id="imagenes">
<div>Imagen 1: <input class="txtImagen"/></div>
<div>Imagen 2: <input class="txtImagen"/></div>
</div>
</td>
<td>
<div id="resultado"></div>
</td>
</tr>
</table>
</div>
#productos
de antemano? ¿Puedes enseñarnos la clase?#