[Javascript] [html5] operazioni matematiche come output di un form

[psicona]

Buongiorno a tutti,
sto seguendo diversi tutorial online per capire meglio le novità e i cambiamenti apportati dall'HTML5.

Sto facendo alcune prove e il quesito che vi pongo parte da questa parte di codice che sto testando in un semplice file .html:

<form id=”areaRettangolo” onsubmit="return false" oninput="risultato.value = parseInt(base.value) * parseInt(altezza.value)">
       Base <input name="base" type="number" step="any" min="0"><br>
       Altezza <input name="altezza" type="number" step="any" min="0"><br><br>
       Area = <output name="risultato"></output>
</form>

inserisco i numeri e mi viene restituito il risultato. Fin qui tutto ok.

Domanda 1: c'è modo di avere il risultato a seguito del click su un bottone submit?

Domanda 2: così come posso facilmente fare le quattro operazioni matematiche, posso fare anche l'elevazione a potenza? Con Javascript utilizzo Math.pow, ma come inserirlo nel form e con quale sintassi?

Grazie in anticipo per l'eventuale aiuto.

Luca

 

[criric]

Ciao, quello che hai scritto all'interno dell'evento oninput="" è javascript, puoi utilizzare tutte le funzioni di javascript ma questo potevi farlo anche con l'html4. Puoi assegnare l'evento onclick="" ad un bottone ed eseguire il codice al click.

 

[psicona]

Grazie. In effetti era abbastanza banale come quesito.
Provato e funziona.
Quindi posso lasciarlo sull'evento onclick del button oppure passare i valori ad un file .js che esegue e restituisce il valore.
Per quest'ultima opzione, se lascio "risultato.value = ..." assegna semplicemente il risultato.
Se volessi invece che in risultato ci fosse una stringa html e non solo il valore, come dovrei fare?

 

[criric]

non credo di aver capito la domanda,
puoi concatenare una stringa con una variabile utilizzando il segno +
output = "stringa " + variabile;

 

[psicona]

perdonami, ho scritto come un libro stracciato.
Volendo avere non solo il numero ma una stringa di testo più complessa (che contenga anche altri tag html) conviene separare il calcolo in un file .js e poi inviare il risultato come output, concatenando stringa + variabile.
Corretto?

 

[criric]

Si, puoi anche evitare un file esterno, l'importante secondo me è separare il più possibile il codice javascript da quello html

<button onclick="funzione();">clicca</button>
        <script>
            function funzione() {
                // codice
            }
        </script>

 

[psicona]

Ciao Criric,
provo a chiederti ulteriore aiuto.
Ho spostato il codice in un file .js separato (così magari sono libero di aggiungere le stringhe e altre personalizzazioni).
Come identifico, nel file .js, il controllo output al quale assegnare il valore della stringa?
Nell'esempio iniziale il controllo era questo:

Area = <output name="risultato"></output>

se lascio semplicemente risultato.value ovviamente non funziona.
Anche se aggiungo l'id del forum areaRettamgolo.risultato.value non va.
Cosa sto sbagliando?

 

[criric]

puoi provare cosi

document.forms[0].risultato.value =

oppure cosi

document.getElementsByTagName("output")[0].value =

devi comunque seguire la struttura del documento