Aggiungere una variabile ad una scelta dell'utente

[giornodipioggia]

Salve, ho creato diverse pagine contenete 2 foto, e vorrei assegnare una variabile string quando l'uente ne sceglie una.
Vorrei, per esempio aggingere una variabile al posto alert:


<img src="luna.jpg" alt="" border="0" height="380" width="380">
<button onclick="alert('hai scelto luna')">luna</button>
<img src="sole.jpg" alt="" border="0" height="380" width="380">
<button onclick="alert('hai scelto sole')"></button>


Vorrei che con butto on click si potesse assegnare la variabile foto= "luna" o "sole"


Spero di essere stato chiaro, Sapete aiutarmi (sono un pensinato e non ho molta famigliaratà con JavaScript).
Grazie.

[ciro78]

e se invece di chiamare alert chiami una funzione custom che setta la variabile?

[ninja72]

In riferimento al suggerimento di Ciro78, potresti gestire il click con onclick() dall'html, oppure gestire il tutto dallo script con il più attuale addEventListener().

vecchio stile:

<img src="luna.jpg" alt="" border="0" height="380" width="380">
    <button onclick="getNameOfImage(this)">luna</button>
    <img src="sole.jpg" alt="" border="0" height="380" width="380">
    <button onclick="getNameOfImage(this)">sole</button>

    <script>
        let foto = null
        const getNameOfImage = (e) => {
            foto = e.textContent
            console.log(foto)
        }
    </script>

nuovo stile:

<img src="luna.jpg" alt="" border="0" height="380" width="380">
    <button class="btn">luna</button>
    <img src="sole.jpg" alt="" border="0" height="380" width="380">
    <button class="btn">sole</button>

    <script>
        const btn = document.getElementsByClassName('btn')
        let foto = null
        const getNameOfImage = (e) => {
            foto = e.target.textContent
            console.log(foto)
        }

        Array.from(btn).forEach(e => {
            e.addEventListener('click', getNameOfImage)
        })

    </script>

[giornodipioggia]

GRAZIE ninja72, scusa il ritardo della risposta. Ho provato il tuo consiglio, ma forse mi sono spiegato male. A me servirebbe una variabile nuova, con il tuo listato la variabile foto prende il nome della foto, a me servirebbe una nuova veribile su cui scrivere altre cose, ad esempio l'utente clicca su sole e la variabile foto[0] = "giallo" altrimenti foto[1]="notte".
Grazie per l'attenzione

[ninja72]

Ciao, dunque ti serve una variabile di tipo array, ti posto quella che potrebbe essere una soluziona anche se non ho il quadro generale di
ciò che vuoi realizzare.
Ho fatto in modo che l'array non possa contenere più di due scelte e che la scelta sia unica, verifica e fammi sapere.

 const btn = document.getElementsByClassName('btn')
        const foto = []
        const getNameOfImage = ({ target }) => {
            (foto.length < 2 && !foto.includes(target.textContent))
                && foto.push(target.textContent)
            console.log(foto) // only for debug
        }

        Array.from(btn).forEach(e => {
            e.addEventListener('click', getNameOfImage)
        })

[giornodipioggia]

Ciao, provo a spigare il concetto: un utente deve fare una scelta fra due foto, a seconda la scelta si crea un profilo psicologico, che dovrebbe formarsi con una variabile (che chiamerò profilo). Ti mando il link per capire meglio:
www.flavioronca.com/test_fotograficoprova.html
Grazie

[ninja72]

Immaginavo una cosa simile, penso che la cosa si possa gestire in due modi:

1) Visto che ogni pagina web è un ambiente isolato e da quello che ho capito hai diverse paginette che vorresti gestire per la creazione
del profilo finale, in pratica potresti passare i dati tramite parametri con una get.
Dunque ogni pagina dovrebbe avere un form che invia i dati alla pagina sucessiva (step).
2) Oppure, creare una singola pagina web che contiene tutti gli step, i quali vengono gestiti direttamente da una singola pagina.
Ovviamente anche le view devono essere gestite da javascript.

[giornodipioggia]

Ho preparato il programma con flash tempo fa, ed ora lo volevo ripetere sul web . Ma mi manca la base... o meglio non riesco ad associare una variabile premendo un button. Capire come si associa la varibile mi servirebbe anche in futuro per altri programmini che ho fatto e li vorrei. come ho già detto, riproporli con java.

[ninja72]

Purtroppo per realizzare il tuo piccolo progetto lato front-end non basta solo "associare una variabile premendo un bottone", il discorso è molto più ampio, devi comunque avere una buona base di html5, css e javascript, questo significa che quando ricevi del codice d'aiuto devi
comunque sapere dove mettere le mani.

[ninja72]

Io nel frattempo ho creato un prototipo in typescript, visto che in questo periodo lo sto studiando mi son detto perchè non esercitarmi con questo progettino.
Ovviamente la build sarà in Javascript puro (es5/es6/esnext), le domande si possono impostare da un semplice file in formato json, mi manca solo da capire la logica di come viene assegnato il punteggio al profilo.
Il progetto sarà poi pubblicato sotto licenza MIT sul mio github, dunque reperibile gratuitamente per tutti.
test.jpg