Abbreviare codice javascript

**Hans Castorp** · 03-08-2016, 23:58

Ciao a tutti,
spesso mi ritrovo a lavorare con tante righe di codice, come ad esempio queste

codice:

var rispostatestoa1 = document.getElementById('domandatestoa1').value.toLowerCase(); if(rispostatestoa1 == 'risposta') {risposteCorrette++;};
var rispostatestoa2 = document.getElementById('domandatestoa2').value.toLowerCase(); if(rispostatestoa2 == 'risposta') {risposteCorrette++;};
var rispostatestoa3 = document.getElementById('domandatestoa3').value.toLowerCase(); if(rispostatestoa3 == 'risposta') {risposteCorrette++;};
var rispostatestoa4 = document.getElementById('domandatestoa4').value.toLowerCase(); if(rispostatestoa4 == 'risposta') {risposteCorrette++;};
var rispostatestoa5 = document.getElementById('domandatestoa5').value.toLowerCase(); if(rispostatestoa5 == 'risposta') {risposteCorrette++;};

Qualcuno può spiegarmi come è possibile ridurre il codice, dato che cambiano soltanto i numeri delle variabili e delle Id. della pagina html?
Grazie mille per l'aiuto,
un caro saluto a tutti,

HC

**cavicchiandrea** · 04-08-2016, 00:27

Ma perdona che senso ha fare 5 if che hanno tutte le stesso risultato?

**KillerWorm** · 04-08-2016, 00:41

Ciao, a mio parere, darti soluzioni mirate (o quantomeno funzionali) senza capire esattamente il contesto di quello script, non è così semplice come potrebbe sembrare.

In linea generale potrei dirti "usa un qualche ciclo". Ma, a prescindere dalle righe ripetute in modo sistematico che possono essere sintetizzate con un ciclo, mi pare evidente che lo script da te postato sia puramente esemplificativo, per cui bisogna capire cosa realmente ci sia, ad esempio, dietro quel valore 'risposta' (cavicchiandrea ha già sollevato il dubbio) che, io invece presumo, sarà differente per ogni domanda (mi sbaglio?) e che magari dovrebbe risultare nascosto agli occhi dell'utente. Bisogna capire se in tal caso puoi gestire le risposte immagazzinandole in un array per poterle quindi gestire attraverso un ciclo, tenendo però presente che in questo modo i valori sono facilmente visibili attraverso il codice sorgente, quindi facilmente accessibili ad un utente smaliziato; oppure se vai a pescare in qualche modo quei valori runtime... chessò. Dovresti chiarire meglio.

Inoltre potrebbe essere utile capire se ad esempio puoi usare una qualche libreria/framework javascript come jQuery (per dirne una). In tal caso tutto lo script potrebbe essere rivisto e "sintetizzato" usando opportunamente metodi e sintassi della libreria utilizzata.

PS: quando posti del codice sul forum è opportuno usare gli appositi tag di formattazione (vedi regolamento di sezione).

EDIT:

Giusto per la cronaca, prendendo alla lettera le tue indicazioni puoi risolvere con uno script del genere:

codice:

for(var i=1,d,r=0;d=document.getElementById('domandatestoa'+i);i++)d.value.toLowerCase()=='risposta'&&r++;

dove r restituisce il numero di volte in cui è stato trovato il valore 'risposta' dentro una serie di campi input con id sequenziale 'domandatestoaN' (dove N è un numero da 1 in poi).

Facendo un esempio concreto:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script type="text/javascript">
      function contaRisposte(){
                for(var i=1,d,r=0;d=document.getElementById('domandatestoa'+i);i++)d.value.toLowerCase()=='risposta'&&r++;
                return r;
            }
    </script>
  </head>
  <body>
        <input id="domandatestoa1">
        <input id="domandatestoa2">
        <input id="domandatestoa3">
        <input id="domandatestoa4">
        <input id="domandatestoa5">
        <input type="button" value="Verifica" onclick="alert(contaRisposte());">
  </body>
</html>

**fcaldera** · 04-08-2016, 12:17

Immagino che nel caso reale la risposta da controllare non sia uguale per tutte e 5 le domande (come nell'esempio che hai fatto tu)

Potresti fare un object lookup, es:

codice HTML:

<body>        
   <input id="domandatestoa1">        
   <input id="domandatestoa2">        
   <input id="domandatestoa3">        
   <input id="domandatestoa4">        
   <input id="domandatestoa5">        
   <input type="button" value="Verifica" onclick="contarisposte()">  </body>

L'object contiene come chiavi gli ID dei campi e come valori la risposte corrette corrispondenti

codice:

var rightAnswers = {
  domandatestoa1: "risposta1",
  domandatestoa2: "risposta2",
  domandatestoa3: "risposta3",
  domandatestoa4: "risposta4",
  domandatestoa5: "risposta5"
};

poi cerchi tutti i campi i cui ID iniziano con

codice:

domandatestoa

e per ciascuno dei campi controlli se il suo value corrisponde al valore della chiave nell'oggetto

codice:

function contaRisposte() {
    var questions = document.querySelectorAll('[id^="domandatestoa"]');
    var totalRightAnswers = 0;

    [].forEach.call(questions, function(question) {
         if (question.value === rightAnswers[question.id]) {
             totalRightAnswers++;
         }
    });

    console.info("hai risposto correttamente a %d risposte", totalRightAnswers);
}

in questo caso le risposte sono codificate in un object, ma potresti anche inserirle in un attributo del campo di input, es.

codice HTML:

<input id="domandatestoa1" data-answer="risposta1" />

e a quel punto la condizione da controllare diventerebbe

codice:

if (question.value === question.getAttribute('data-answer')) {
      totalRightAnswers++;
}

si lascia all'utente la normalizzazione delle risposte dell'utente (rimozione di spazi, conversione in lowercase)

**ciro78** · 04-08-2016, 21:19

Originariamente inviata da Hans Castorp

Ciao a tutti,
spesso mi ritrovo a lavorare con tante righe di codice, come ad esempio queste

codice:

var rispostatestoa1 = document.getElementById('domandatestoa1').value.toLowerCase(); if(rispostatestoa1 == 'risposta') {risposteCorrette++;};
var rispostatestoa2 = document.getElementById('domandatestoa2').value.toLowerCase(); if(rispostatestoa2 == 'risposta') {risposteCorrette++;};
var rispostatestoa3 = document.getElementById('domandatestoa3').value.toLowerCase(); if(rispostatestoa3 == 'risposta') {risposteCorrette++;};
var rispostatestoa4 = document.getElementById('domandatestoa4').value.toLowerCase(); if(rispostatestoa4 == 'risposta') {risposteCorrette++;};
var rispostatestoa5 = document.getElementById('domandatestoa5').value.toLowerCase(); if(rispostatestoa5 == 'risposta') {risposteCorrette++;};

Qualcuno può spiegarmi come è possibile ridurre il codice, dato che cambiano soltanto i numeri delle variabili e delle Id. della pagina html?
Grazie mille per l'aiuto,
un caro saluto a tutti,

HC

Ciao Hans,
usa il tag code.

Discussione: Abbreviare codice javascript

Strumenti discussione

Ricerca discussione

Visualizza

Abbreviare codice javascript

Permessi di invio