Estoy haciendo una vista donde una vez que hago clic estoy mostrando
En bucle
Tengo una vista que captura un código QR y lo muestra en la pantalla, lo que quiero hacer a continuación es tomar estos valores iterando los elementos con un bucle for y guardarlos en una matriz, en este caso mi ID es id= "resultado escaneado" y quiero iterar cada uno de los valores que contienen y guardarlos en una matriz.
Estoy haciendo esto, pero por alguna razón no está realizando la operación correctamente. Quisiera saber que debo corregir?
function SubmitCodes() { var QRCodeval= document.querySelectorAll('scanned-result'); var arr = []; for (var i in QRCodeval) { alert(QRCodeval[i]); arr.push( QRCodeval[i]); } alert(arr.val); }VISTA
<div class="container"> <div class="row"> <div class="col-md-12" style="text-align: center;margin-bottom: 20px;"> <div id="reader" style="display: inline-block;"></div> <div class="empty"></div> <div id="scanned-result"> <div>[1] - https://www.investopedia.com/terms/q/quick-response-qr-code.asp</div> <div>[2] - https://www.dropbox.com/s/705b6p4a2ydvayx/EN-Poster.pdf?dl=0</div></div> </div> </div> </div>Hay varios problemas con su código. Para seleccionar el elemento por ID usando querySelector , debe usar el selector # , también para seleccionar los divs dentro, puede usar el selector de element > element .
var QRCodeval = document.querySelectorAll("#scanned-result>div"); querySelectorAll devuelve una lista de nodos. Por lo tanto, debe iterarlo para obtener el valor de los elementos individuales. Pero no debe usar for..in . Puede usar forEach en su lugar.
function submitCodes() { var QRCodeval = document.querySelectorAll("#scanned-result>div"); var arr = []; QRCodeval.forEach((el) => arr.push(el.innerHTML)); console.log(arr) } submitCodes(); <div class="container"> <div class="row"> <div class="col-md-12" style="text-align: center;margin-bottom: 20px;"> <div id="reader" style="display: inline-block;"></div> <div class="empty"></div> <div id="scanned-result"> <div>[1] - https://www.investopedia.com/terms/q/quick-response-qr-code.asp</div> <div>[2] - https://www.dropbox.com/s/705b6p4a2ydvayx/EN-Poster.pdf?dl=0</div> </div> </div> </div> </div> Para obtener el texto dentro de los elementos, puede usar innerHTML .
Dado que no hay ningún elemento <scanned-result></scanned-result> en su página, como señaló charlietfl , no obtendrá ningún resultado.
Dado que su marcado HTML es el siguiente:
<div id="scanned-result"> <!-- … --> </div>Estás buscando una identificación.
Y la consulta de ID válida en un selector de CSS es un # , por lo que debe consultar como:
var QRCodeval = document.querySelectorAll('#scanned-result')Cambié la iteración para llenar la matriz con las líneas dentro del resultado escaneado de ID. ¿Eso ayudaría?
function SubmitCodes() { var QRCodeval = document.getElementById('scanned-result').children; var arr = []; for (var i = 0; i < QRCodeval.length; i++) { arr.push(QRCodeval[i].innerText) } console.log(arr) } <div class="container"> <div class="row"> <div class="col-md-12" style="text-align: center;margin-bottom: 20px;"> <div id="reader" style="display: inline-block;"></div> <div class="empty"></div> <div id="scanned-result"> <div>[1] - https://www.investopedia.com/terms/q/quick-response-qr-code.asp</div> <div>[2] - https://www.dropbox.com/s/705b6p4a2ydvayx/EN-Poster.pdf?dl=0</div> </div> </div> </div> </div>