Problema con un script que lee códigos de barra
Publicado por Jorge (2 intervenciones) el 28/08/2025 20:17:35
Hola! alguien puede ayudarme? Tengo un script que funciona bien pero cuando adapto el formulario a mi diseño deja de funcionar...
Con el form que viene por defecto funciona:
Pero adaptándolo a mi diseño o no funciona:
El javascript:
Da error en esta linea:
Estoy seguro que el problema esta en que no se como adaptar los querySelector por que cuando le pongo nuevos <div> dentro de <form> es cuando deja de funcionar el script. Por más que toqueteo los querySelector no lo consigo, llevo 48horas haciendo pruebas y nada, necesito que el diseño quede tal cual pero me esta siendo imposible adaptarlo en los querySelector. Alguien podria ayudarme? Gracias
Con el form que viene por defecto funciona:
1
2
3
4
5
6
7
8
<form>
<div class="input-field">
<label for="isbn_input">EAN:</label>
<input id="isbn_input" class="isbn" type="text" />
<button type="button" class="icon-barcode button scan"> </button>
<input type="file" id="file" capture/>
</div>
</form>
Pero adaptándolo a mi diseño o no funciona:
1
2
3
4
5
6
7
8
9
10
11
<form>
<div class="input-field">
<div class="buttons"><button type="button" class="btnblue icon-barcode button scan"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scan mr-2 h-5 w-5"><path d="M3 7V5a2 2 0 0 1 2-2h2"></path><path d="M17 3h2a2 2 0 0 1 2 2v2"></path><path d="M21 17v2a2 2 0 0 1-2 2h-2"></path><path d="M7 21H5a2 2 0 0 1-2-2v-2"></path></svg> Escanear código de barras</button><input type="file" id="file" capture/>
</div>
<span>Indica un nombre de producto o un código de barras</span>
<div class="search"><input type="text" id="isbn_input" class="insearch isbn" placeholder="Televisor LG" value=""><div class="btnw" onclick="search()">Buscar</div></div>
</div></form>
El javascript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
var Quagga = window.Quagga,
App = {
_scanner: null,
init: function() {
this.attachListeners()
},
decode: function(e) {
Quagga.decoder({
readers: ["ean_reader"]
}).locator({
patchSize: "medium"
}).fromSource(e, {
size: 800}).toPromise().then((function(e) {
document.querySelector("input.isbn").value = e.codeResult.code
})).
catch((function() {
document.querySelector("input.isbn").value = ""
})).then(function() {
this.attachListeners()
}.bind(this))
},
attachListeners: function() {
var e = this,
n = document.querySelector(".input-field input + .button.scan"),
t = document.querySelector(".input-field input[type=file]");
n.addEventListener("click", (function e(t) {
t.preventDefault(),
n.removeEventListener("click", e),
document.querySelector(".input-field input[type=file]").click()
})),
t.addEventListener("change", (function n(c) {
c.preventDefault(),
t.removeEventListener("change", n),
c.target.files && c.target.files.length && e.decode(c.target.files[0])
}))
}};App.init(),
document.querySelector('input[type="file"]').addEventListener("change", (function(e) {
var n = e.target.files[0];
reader = new FileReader,
reader.onloadend = function() {
var e = new Image;e.src = reader.result,
BarcodeReader.DecodeImage(e)
},
reader.readAsDataURL(n)
}), !1),
BarcodeReader.Init(),
BarcodeReader.SetImageCallback((function(e) {
console.dir(e);
var n = e[0];
setTimeout((function() {
"" == document.querySelector("input.isbn").value && (e.length ? document.querySelector("input.isbn").value = n.Value : document.getElementById("error").innerHTML = '"Código ilegible. Introduce el código manualmente."')
}), 500)
}));
Da error en esta linea:
1
n.addEventListener("click", (function e(t) {
Estoy seguro que el problema esta en que no se como adaptar los querySelector por que cuando le pongo nuevos <div> dentro de <form> es cuando deja de funcionar el script. Por más que toqueteo los querySelector no lo consigo, llevo 48horas haciendo pruebas y nada, necesito que el diseño quede tal cual pero me esta siendo imposible adaptarlo en los querySelector. Alguien podria ayudarme? Gracias
Valora esta pregunta
0