Tag button con querySelector

di il
13 risposte

Tag button con querySelector

Ciao a tutti

let spazio_inserimento = document.getElementsByClassName('user-details details');
faccio poi un for dove inserisco

spazio_inserimento[m].innerHTML += "<p id='"+userid[m].textContent+":"+Numero_Ordine+"'>Indirizzo Spedizione</p>";
faccio poi un altro for dove inserisco

document.getElementById(BuyerID+":"+Numero_Ordine).innerHTML += 
"<textarea class='aree_text' id='area:"+BuyerID+":"+Numero_Ordine+"' rows='5' cols='40'></textarea><br>"+
"<button class='bottoni' id='"+BuyerID+":"+Numero_Ordine+"'>Invia Messaggio</button>";
Funziona tutto ma non c'è verso che riesca a recuperare l'elenco di quei button con class bottoni, perché se faccio un length sul risultato mi dà sempre 0
Eppure in un altro pezzo di codice, con la stessa tecnica riesco ad acchiappare il gruppo di classi. Con questi button invece no.
Il problema è che stanno dentro un div?
Ho provato anche a selezionare le classi button all'interno del div, solo che il nome di quel ID non lo conoscono a priori, devo prenderlo proprio attraverso la funzione per sapere quale è

Perchè a quei bottoni devo metterci l'evento click
let ps;
ps = document.getElementsByClassName('bottoni');
for(let i = 0; i < ps.length; i++){
  ps[i].addEventListener('click', INVIA);
}

function INVIA(e){
let ID= e.currentTarget.getAttribute('id');
}

Eppure in quest'altro pezzo di codice la cosa mi riesce. Boh

D[i].innerHTML +=
"<br><div id="+Numero_Ordine+">"+
"<p class='menu_ordine' id='"+user[m]+"'
let ps;
ps = document.getElementsByClassName('menu_ordine');
for(let i = 0; i < ps.length; i++){
  ps[i].addEventListener('click', SELECT_MENU);
}
function SELECT_MENU(e){
let user = e.currentTarget.getAttribute('id');
}
Grazie mille se mi aiutate a capire dove è che sbaglio

13 Risposte

  • Re: Tag button con querySelector

    Ok, ho capito
    
                    "<p class='ItemID_non_trovato:"+Numero_Ordine+"' OPT="+x+" style='display:block;' Numero_Ordine="+Numero_Ordine+" OrderLineItemID="+OrderLineItemID+">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp "+array_ItemID[x]+"</p>";
    
    
    document.querySelectorAll('p[class*="ItemID_non_trovato"]').forEach(function(a) {
        alert(a.id);
    });
    
    solo che riesco ad accedere solamente a id, e non agli altri attributi, come ad esempio alert(a.OPT); non mi recupera il valore
  • Re: Tag button con querySelector

    Ok, risolto
    alert(a.getAttribute('OPT'));
  • Re: Tag button con querySelector

    Ho fatto tutto da solo insomma...
  • Re: Tag button con querySelector

    melixo ha scritto:


    Ho fatto tutto da solo insomma...
    Diciamo che, come per l'altra discussione che hai aperto, la chiarezza espressiva nella descrizione del problema non aiuta altri a darti una mano, questo è sicuro.
  • Re: Tag button con querySelector

    In realtà non è che ho proprio proprio risolto
    Sto usando tampermonkey che inserire modifiche ad una pagina.


    Con questo recupero dei determinati spazi nella pagina dove devo inserire cose mie
    
    let spazio_inserimento = document.getElementsByClassName('user-details details');
    
    faccio poi un for per ogni spazio e inserisco
    
    spazio_inserimento[m].innerHTML += "<br><br><p id='"+userid[m].textContent+":"+Numero_Ordine+"';
    
    In modo tale che possa utilizzare quell'id come riferimento:
    
    document.getElementById(BuyerID+":"+Numero_Ordine).innerHTML += 
    
    //all'interno di questo spazio, in corrispondenza di ogni utente/ordine devo inserire un textarea e un button
    
        document.getElementById(BuyerID+":"+Numero_Ordine).innerHTML +=
            "<br><br>"+
            "<textarea class='aree_text' id='area:"+BuyerID+":"+Numero_Ordine+"'rows='5' cols='40'</textarea><br>"+
            "<button class='bottoni' id='"+BuyerID+":"+Numero_Ordine+"'>Invia Messaggio</button>";
    
    Il punto è che non riesco ad acchiappare i valori, mi sto esaurendo
    che sia con querySelectorAll, che sia con getElementsByClassName e con i regex e con p[class= non c'è verso.
    tipo
    let a = document.getElementsByClassName('textarea[class="aree_text"]');
    alert(a.length) mi dà sempre 0
    document.getElementsByClassName["aree_text"] non va! boh
    eppure in un altro punto dello script se uso getElementsByClassName li acchiappa, così come querySelectorAll

    se non riesco ad avere un array di questi elementi, non posso legare un evento click su ognuno di loro
  • Re: Tag button con querySelector

    melixo ha scritto:


    
    spazio_inserimento[m].innerHTML += "<br><br><p id='"+userid[m].textContent+":"+Numero_Ordine+"';
    
    Secondo me, questa riga è sintatticamente sbagliata: mi sembra che manchi un terminatore di stringa.

    melixo ha scritto:


    Il punto è che non riesco ad acchiappare i valori, mi sto esaurendo [...]
    Al netto che l'implementazione mi sembra un po' inutilmente complicata, e che eviterei caratteri speciali negli ID, fai uso della Console integrata negli strumenti di sviluppo nel browser? Che errori visualizzi? In caso di assenza di errori, hai fatto debugging per controllare l'esecuzione del programma passo per passo?

    Saper fare debugging è fondamentale quando si individuano problemi e non c'è rigore eccessivo nella scrittura del codice.

    Ciao!
  • Re: Tag button con querySelector

    Non c'è verso, non riesco a prendere questi valori. Cerco di spiegarmi meglio

    Nella pagina dei miei ordini, in corrispondenza di ogni ordine c'è uno spazio dove inserisco del testo, e dove devo inserire un textarea e un button.

    Per recuperare questi spazi faccio
    let spazio_inserimento = document.getElementsByClassName('user-details details');
    Per recuperare l'elenco degli acquirenti faccio:
    let userid = document.getElementsByClassName('user-id');
    ciclo gli utenti
    
    for(let m = 0; m < userid.length; m++){
    spazio_inserimento[m].innerHTML += 
    "<p class='IND' id='"+userid[m].textContent+":"+Numero_Ordine+"'>Indirizzo Spedizione</p>";
    }
    
    ciclo poi la risposta del server
    
    let res = JSON.parse(indirizzi.responseText);
    for(let m = 0; m < res.length; m++){
    let Numero_Ordine = res[m].Numero_Ordine;
    let BuyerID = res[m].BuyerID;
    document.getElementById(BuyerID+":"+Numero_Ordine).innerHTML +=
    "<textarea class='area:"+BuyerID+":"+Numero_Ordine+"' rows='3' cols='60' value='dsdsds'></textarea><br>"+
    "<button class='Msg_' id='button_msg:"+BuyerID+":"+Numero_Ordine+"'>Invia Messaggio</button>";
    }
    
    Alla fine è molto semplice, e funziona pure tutto.
    L'unica cosa è che io ci devo legare un evento a textarea e a button, e non riesco a prenderli
    Dovrei fare una cosa tipo
    document.querySelectorAll('textarea[class*="area"]').forEach(function(a){
    a.addEventListener('click', SelectPeso);
    });
    Ma non va nulla di tutto questo. Non c'è verso, le ho provate tutte, non li prende. Ci sono 2 giorni provando a prenderli. Non ci riesco


    Eppure in un altro punto dello script faccio la stessa cosa, e in quel caso invece riesco a prendere tutti gli attributi e a legare un evento
    
    let D = document.getElementsByClassName('order-details');
    let result = document.querySelectorAll('input[data-ordernumber]');
    for(let i = 0; i < result.length; i++){
    D[i].innerHTML +=
    "<p class='menu_ordine' id='o02:"+Numero_Ordine+"'></p>+
    "<p class='menu_ordine' id='o05:"+Numero_Ordine+"'></p>";
    document.querySelectorAll('p[class="menu_ordine"]').forEach(function(a){
        a.addEventListener('click', SELECT_MENU);
    });
    }
    
  • Re: Tag button con querySelector

    Sarò ripetitivo ma quoto me stesso:
    Al netto che l'implementazione mi sembra un po' inutilmente complicata, e che eviterei caratteri speciali negli ID, fai uso della Console integrata negli strumenti di sviluppo nel browser? Che errori visualizzi? In caso di assenza di errori, hai fatto debugging per controllare l'esecuzione del programma passo per passo?
  • Re: Tag button con querySelector

    Sì, scusami, la verità... è vero che questo codice non è il massimo, ma non credo che l'evento non lo leghi per via del codice. Nel senso che, lo stesso modo lo utilizzo anche in un altro punto dello script e funziona perfettamente, in quest'altro contesto invece non riesco a legare l'evento, perché non riesco proprio ad acchiappare gli elementi.
    Se non è che sto sbagliando qualcosa io riguardo questo debugging che sto cercando capire solo oggi come fare... perché io su chrome premo e mi compare una console, che ho utilizzato anche altre volte ma non per debagging.
    In realtà su questa console non mi compare proprio nulla che riguardi questa parte di codice legato all'evento. Il silenzio totale proprio! È come se ci passasse dritto. E anche quando cerco di eseguire un length mi compare continuamente 0. Eppure di textarea ce ne sono una trentina.
    Stavo cercando infatti qualcosa in corrispondenza del tentativo di legare l'evento ma non trovo nulla a riguardo.
    Lo script, esteticamente, funziona e compare tutto dove deve comparire.
    Riguardo l'evento, è come se ci passasse dritto.
    Sono 2 giorni così!
    Neanche se aggiungo l'onclick funziona (<button onclick='msgmsg();')
    Tutte le sto provando... oltre che leggere continuamente sui nodi, su target ecc, non capisco cosa è che gli impedisce di vedere gli elementi
    il percorso sarebbe
    let spazio_inserimento = document.getElementsByClassName('user-details details');
    spazio_inserimento[m].innerHTML += "<br><br><p class='IND' id='"+userid[m].textContent+":"+Numero_Ordine+"'(in cui inserisco textarea e button)
    tra l'altro... questo lo vede!
    document.getElementById(BuyerID+":"+Numero_Ordine).innerHTML +=
    e questo no!
    document.getElementById(BuyerID+":"+Numero_Ordine)
    assurdo...
    Eppure è tutto nello stesso innerHTML
    boh!

    Per "semplificare" ho inserito questo
    La prima parte è quella in cui non riesco a legare l'evento
    La seconda parte invece funziona
    Eppure la struttura è praticamente uguale! Cambia solo che invece che <p> sto cercando <textarea> e <button>
  • Re: Tag button con querySelector

    Mettendo ad esempio
    alert(document.querySelectorAll('textarea[class*="aree_text"]'));
    mi esce object NodeList

    alert(document.querySelectorAll('textarea[class*="aree_text"]').length);
    questo mi dà 0

    Sulla console mi esce
    Uncaught TypeError: Cannot read properties of null (reading 'remove')
    Uncaught (in promise) Error: Cannot read properties of undefined (reading 'allowlisted')
    at wrappedSendMessageCallback
    Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
    Ma non so se è in riferimento a quell'alert

    ecco qua...
    ho provato a mettere
    "<textarea class='aree_text' id='ciao'></textarea>"+
    in quella parte di script invece che funziona
    D.innerHTML +=
    "<p class='menu_ordine' Numero_Ordine="+Numero_Ordine+"
    "<p class='menu_ordine' Numero_Ordine="+Numero_Ordine+
    "<textarea class='aree_text' id='ciao'></textarea>";

    ed ecco che questo funziona
    alert(document.querySelectorAll('textarea[class*="aree_text"]').length);
  • Re: Tag button con querySelector

    È possibile che tutto questo stia succedendo perché sto cercando di acchiappare gli elementi PRIMA che arrivi la risposta del server??
    Perché sto notando nella console qualcosa che riguarda il runtime... è questo il runtime?
  • Re: Tag button con querySelector

    Eh mi sa mi sa che è quello...
    Siccome nello script c'è un setInterval di 5 secondi...
    Ho provato a mettere lì dentro il tentativo di acchiappare l'elemento
    E infatti il primo e il secondo ciclo da 0, e poi ne trova 12...
    Di conseguenza stavo cercando degli elementi che ancora non erano stati caricati in quanto la risposta del server non era ancora arrivata...
  • Re: Tag button con querySelector

    Se stai facendo delle prove, finisci di testare e dopo scrivi un messaggio: la discussione non è una chat.

    A parte questo, è impossibile per me determinare

    1) quello che stai facendo,
    2) ciò su cui stai lavorando,
    3) la struttura della pagina in cui viene eseguito lo script,
    4) le peculiarità e i meccanismi di quella pagina,
    5) quello che il codice fa effettivamente (è illeggibile, punto),
    6) il significato di quello che spieghi, tra "acchiappare", "qualcosa che riguarda il runtime" e altri termini usati a caso.

    Sorry ma mi arrendo: è impossibile e improduttivo condurre una discussione con questa modalità.
Devi accedere o registrarti per scrivere nel forum
13 risposte