Calcolo con Javascript in HTML

**delacoure** · 01-05-2017, 14:50

Buon pomeriggio! E' la prima volta che scrivo su questo forum!

Sono qui per chiedervi una mano su un progetto in HTML dove devo inserire degli Javascript:

codice:

<html>    <head>
        <table border="1" width="750px" hight="407px" align="center" cellspacing="0">
            <tr>
                <td align="left" width="110px" hight="37px">Codice</td>
                <td align="left" width="300px" hight="37px">Descrizione</td>
                <td align="left" width="50px" hight="37px">u.m.</td>
                <td align="left" width="70px" hight="37px">Quantit&aacute;</td>
                <td align="left" width="90px" hight="37px">Prezzo</td>
                <td align="left" width="90px" hight="37px">Importo</td>
                <td align="left" width="40px" hight="37px">c.Iva</td>
            </tr>
            <tr>
                <font size="-1">
                <td align="left" width="110px" hight="37px">0440901300N5010</td>
                <td align="left" width="300px" hight="37px">Lastra di cartongesso</td>
                <td align="left" width="50px" hight="37px">MQ</td>
                <td align="left" width="70px" hight="37px">
                    <input type="text" name="quantit&agrave;" id="quantit&agrave;" size="20">
                </td>
                <td align="left" width="90px" hight="37px"></td>
                <td align="left" width="90px" hight="37px">Importo</td>
                <td align="left" width="40px" hight="37px">22</td>
                </font>
            </tr>
            <tr>
                <font size="-1">
                <td align="left" width="110px" hight="37px">0065370254M2340</td>
                <td align="left" width="300px" hight="37px">Montanti per cartongesso</td>
                <td align="left" width="50px" hight="37px">M/L</td>
                <td align="left" width="70px" hight="37px">
                    <input type="text" name="quantit&agrave;" id="quantit&agrave;" size="20">
                </td>
                <td align="left" width="90px" hight="37px">1,25</td>
                <td align="left" width="90px" hight="37px">Importo</td>
                <td align="left" width="40px" hight="37px">22</td>
                </font>
            </tr>
            <tr>
                <font size="-1"> 
                <td align="left" width="110px" hight="37px">00346237647J5430</td>
                <td align="left" width="300px" hight="37px">Pannello di fibra di legno</td>
                <td align="left" width="50px" hight="37px">MQ</td>
                <td align="left" width="70px" hight="37px">
                    <input type="text" name="quantit&agrave;" id="quantit&agrave;" size="20">
                </td>
                <td align="left" width="90px" hight="37px">4,50</td>
                <td align="left" width="90px" hight="37px">Importo</td>
                <td align="left" width="40px" hight="37px">22</td>
                </font>
            </tr>
            <tr>
                <font size="-1">
                <td align="left" width="110px" hight="37px">0043812668K2357</td>
                <td align="left" width="300px" hight="37px">Pannello di fibra di vetro</td>
                <td align="left" width="50px" hight="37px">MQ</td>
                <td align="left" width="70px" hight="37px">
                    <input type="text" name="quantit&agrave;" id="quantit&agrave;" size="20">
                </td>
                <td align="left" width="90px" hight="37px">3,00</td>
                <td align="left" width="90px" hight="37px">Importo</td>
                <td align="left" width="70px" hight="37px">22</td>
                </font>
            </tr>
            <tr>
                <font size="-1">
                <td align="left" width="110px" hight="37px">0075832145D7424</td>
                <td align="left" width="300px" hight="37px">Pannello di lana di roccia</td>
                <td align="left" width="50px" hight="37px">MQ</td>
                <td align="left" width="70px" hight="37px">
                    <input type="text" name="quantit&agrave;" id="quantit&agrave;" size="20">
                </td>
                <td align="left" width="90px" hight="37px">3,20</td>
                <td align="left" width="90px" hight="37px">Importo</td>
                <td align="left" width="70px" hight="37px">22</td>
                </font>
            </tr>
            <tr>
                <font size="-1">
                <td align="left" width="110px" hight="37px">0087345123B1296</td>
                <td align="left" width="300px" hight="37px">Estrattore aria mono</td>
                <td align="left" width="50px" hight="37px">Pz.</td>
                <td align="left" width="70px" hight="37px">
                    <input type="text" name="quantit&agrave;" id="quantit&agrave;" size="20">
                </td>
                <td align="left" width="90px" hight="37px">200,00</td>
                <td align="left" width="90px" hight="37px">Importo</td>
                <td align="left" width="40px" hight="37px">22</td>
                </font>
            </tr>
            <tr>
                <font size="-1">
                <td align="left" width="110px" hight="37px">0081236478S2448</td>
                <td align="left" width="300px" hight="37px">Estrattore aria smart</td>
                <td align="left" width="50px" hight="37px">Pz.</td>
                <td align="left" width="70px" hight="37px">
                    <input type="text" name="quantit&agrave;" id="quantit&agrave;" size="20">
                </td>
                <td align="left" width="90px" hight="37px">250,00</td>
                <td align="left" width="90px" hight="37px">Importo</td>
                <td align="left" width="40px" hight="37px">22</td>
                </font>
            </tr>
            <tr>
                <font size="-1">
                <td align="left" width="110px" hight="37px">0032568492Q8421</td>
                <td align="left" width="300px" hight="37px">Ingresso aria a muro</td>
                <td align="left" width="50px" hight="37px">Pz.</td>
                <td align="left" width="70px" hight="37px">
                    <input type="text" name="quantit&agrave;" id="quantit&agrave;" size="20">
                </td>
                <td align="left" width="90px" hight="37px">90,00</td>
                <td align="left" width="90px" hight="37px">Importo</td>
                <td align="left" width="40px" hight="37px">22</td>
                </font>
            </tr>
            <tr>
                <font size="-1">
                <td align="left" width="110px" hight="37px">0032679475R6543</td>
                <td align="left" width="300px" hight="37px">Ingresso aria a cassonetto</td>
                <td align="left" width="50px" hight="37px">Pz.</td>
                <td align="left" width="70px" hight="37px">
                    <input type="text" name="quantit&agrave;" id="quantit&agrave;" size="20">
                </td>
                <td align="left" width="90px" hight="37px">50,00</td>
                <td align="left" width="90px" hight="37px">Importo</td>
                <td align="left" width="40px" hight="37px">22</td>
                </font>
            </tr>
            <tr>
                <font size="-1">
                <td align="left" width="110px" hight="37px">0043812668K2357</td>
                <td align="left" width="300px" hight="37px">Macchina scambio di calore</td>
                <td align="left" width="50px" hight="37px">Pz.</td>
                <td align="left" width="70px" hight="37px">
                    <input type="text" name="quantit&agrave;" id="quantit&agrave;" size="20">
                </td>
                <td align="left" width="90px" hight="37px">1800,00</td>
                <td align="left" width="90px" hight="37px">Importo</td>
                <td align="left" width="70px" hight="37px">22</td>
                </font>
            </tr>
        </table>

Praticamente ho una tabella di una fattura dove ho Prodotto, Prezzo per unità e Importo.. Devo fare in modo che inserendo manualmente la quantità del prodotto, nella relativa cella "Importo" ottengo il prezzo totale. Inoltre, devo fare in modo che mi calcoli il 22% di ogni prodotto e che alla fine mi faccia la somma di tutti gli importi...

E' possibile una cosa di questo genere??

**cavicchiandrea** · 02-05-2017, 13:35

Si è possibile, ma abbastanza complesso, se non hai una discreta conoscenza di js credo sia molto complicato

**delacoure** · 02-05-2017, 19:15

Originariamente inviata da cavicchiandrea

Si è possibile, ma abbastanza complesso, se non hai una discreta conoscenza di js credo sia molto complicato

Abbiamo appena iniziato a fare i js a scuola, il professore ci ha dato questa consegna senza spiegarci esattamente come fare 🤦🏼#♂️ Comunque fino alla creazione delle variabili e dei campi ci so arrivare.. e capire come fargli assegnare ogni ID per tutte le celle che non riesco a fare 😫

**br1** · 02-05-2017, 22:45

Originariamente inviata da delacoure

e capire come fargli assegnare ogni ID per tutte le celle che non riesco a fare 

Traduzione?

La partenza sarebbe scrivere codice html valido (name ed id univoci, no caratteri speciali nei nomi, evitare tag obsoleti come <font>, ed altre delizie) poi possiamo parlare di javascript che abbia qualche probabilita' di funzionare.

**Enzo SIMONELLI** · 03-05-2017, 13:14

Nella costruzione di una table, non è necessario ripetere sempre width ed height :
width solo alle celle della prima riga; height solo alla prima cella di ogni riga.

font messo così è fuori dal mondo e oltretutto, non spiega efficacia alcuna :
andrebbe messo in ogni cella over and over; o definire uno style.
Ne' può essere una scorciatoia fare :

codice:

<font size="-1">
<table border="1" width="750px" hight="407px" align="center" cellspacing="0">
            <tr>

perché nemmeno questo funziona.

Quanto al JavaScript, abbiamo le quantità che provengono da un campo INPUT e quindi le recuperiamo con .value mentre .innerHTM per recuperare (leggere) o scrivere quello che è dentro una TD.

Occore definire un percorso per arrivare al Tag, però. Si può fare anche per come hai scritto ma preferirei stare al metodo .getElementById che è ben cross-browsers e senza tirarne a mezzo altri; quindi assegnamo un ID numerato ai vari Elementi interessati.

E come primo step produciamo questo, che ovviamente non funziona come ti aspetti ...

codice:

<html>    <head>
<script type="text/javascript">
function calcola(){
document.getElementById('importo2').innerHTML=document.getElementById('prezzo2').innerHTML*document.getElementById('q2').value;
}
</script></head><body>
        <table id="tab" border="1" width="750px" hight="407px" align="center" cellspacing="0">
            <tr>
                <td align="left" width="110px" hight="37px">Codice</td>
                <td align="left" width="300px">Descrizione</td>
                <td align="left" width="50px">u.m.</td>
                <td align="left" width="70px">Quantit&aacute;</td>
                <td align="left" width="90px">Prezzo</td>
                <td align="left" width="90px">Importo</td>
                <td align="left" width="40px">c.Iva</td>
            </tr>
            <tr>
                <td align="left" hight="37px">0440901300N5010</td>
                <td align="left">Lastra di cartongesso</td>
                <td align="left">MQ</td>
                <td align="left">
                    <input type="text" id="q1" size="20">
                </td>
                <td align="left" id="prezzo1"></td>
                <td align="left" id="importo1">Importo</td>
                <td align="left">22</td>
            </tr>
            <tr>
                <td align="left"hight="37px">0065370254M2340</td>
                <td align="left">Montanti per cartongesso</td>
                <td align="left">M/L</td>
                <td align="left">
                    <input type="text" id="q2" size="20">
                </td>
                <td align="left" id="prezzo2">1,25</td>
                <td align="left" id="importo2">Importo</td>
                <td align="left">22</td>
            </tr>
            <tr>
                <td align="left"hight="37px">00346237647J5430</td>
                <td align="left">Pannello di fibra di legno</td>
                <td align="left">MQ</td>
                <td align="left">
                    <input type="text" id="q3" size="20">
                </td>
                <td align="left" id="prezzo3">4,50</td>
                <td align="left" id="importo3">Importo</td>
                <td align="left">22</td>
            </tr>
            <tr>
                <td colspan="7" align="right"><input onclick="calcola()" value="calcola gli importi" type="button"></td>
            </tr>
        </table>
</body></html>

... perché JS vuole il punto per i decimali, e con la virgola ottieni NaN (Not a Number); ma intanto ci puoi imparare assai.

**cavicchiandrea** · 03-05-2017, 17:16

Originariamente inviata da delacoure

Abbiamo appena iniziato a fare i js a scuola, il professore ci ha dato questa consegna senza spiegarci esattamente come fare 臘#♂️ Comunque fino alla creazione delle variabili e dei campi ci so arrivare.. e capire come fargli assegnare ogni ID per tutte le celle che non riesco a fare 

Possibile che non ti abbia dato un indicazione sul libro di testo o qualche indicazione e che ti mandi allo sbaraglio è difficile da credere.

Discussione: Calcolo con Javascript in HTML

Strumenti discussione

Ricerca discussione

Visualizza

Calcolo con Javascript in HTML

Permessi di invio