11521 sujets

JavaScript, DOM et API Web HTML5

Récupérer 2 valeurs et les mulitplier

Bonjour, je ne comprends pas comment m'y prendre. J'affiche bien les valeurs de chaque td ayant la class "qt" et "prix". J'aimerais multiplier ses 2 valeurs mais au final il affiche qu'un seul résultat.

<table id="myTable">
	<tr>
		<td class="qt">11</td>
		<td><a href="https://www.pennstateind.com/store/PKRAHAN.html">Mach3 Razor Handle Kit in Chrome</a></td>
		<td class="prix">8.95</td>
		<td class="total"></td>
	</tr>

	<tr>
		<td class="qt">2</td>
		<td><a href="https://www.pennstateind.com/store/PKRAHAN.html">Mach3 Razor Handle Kit in Chrome</a></td>
		<td class="prix">18.95</td>
		<td class="total"></td>
	</tr>

	<tr>
		<td class="qt">3</td>
		<td><a href="https://www.pennstateind.com/store/PKRAHAN.html">Mach3 Razor Handle Kit in Chrome</a></td>
		<td class="prix">28.95</td>
		<td class="total"></td>
	</tr>
</table>

<script type="text/javascript">

	var classQT = document.querySelectorAll('.qt');
	var classPRIX = document.querySelectorAll('.prix');
	
	for (var i = 0; i < classQT.length; i++)
	{
		var compte1 = classQT[i].innerHTML
		console.log(compte1);
	}


	for (var j = 0; j < classPRIX.length; j++)
	{
		var compte2 = classPRIX[j].innerHTML
		console.log(compte2);
	}

console.log(compte1 * compte2);

</script>
Salut

Il faut stocker et multiplier chaque paire de valeurs. Exemple :

window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible

    // début code du test

    const
        classQT = Array.from(document.querySelectorAll('.qt')),
        classPRIX = Array.from(document.querySelectorAll('.prix'));

    let
        arCompte1 = [],
        arCompte2 = [],
        arCompte = [];

    for (const elem of classQT) {
        arCompte1.push(Number(elem.textContent));
    }

    for (const elem of classPRIX) {
        arCompte2.push(Number(elem.textContent));
    }

    console.table(arCompte1);
    console.table(arCompte2);

    for (const [i, elem] of arCompte1.entries()) {
        arCompte.push((elem * arCompte2[i]).toFixed(2));
    }

    console.table(arCompte);

    // fin code du test
}, {
    capture: false,
    passive: true,
    once: false
});
C'est du ES2015, plus de 3 ans déjà ! Le JS d'aujourd'hui c'est ES2018.

Pour l'équivalent en code ES5, il faut utiliser un service archéo-informatique Smiley lol du genre Babel : https://babeljs.io/repl/#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=O4SwdgJg9sB0CGEIFEBuBTMAXAMiAzlpugE4AUA5ADZSIUA0ABOqowLwB8jA3gFCMDGAeiGMq6RgBEA8gFlmhRgGMoYQiQCuILMx1V4jAA7wA5hODoARgp2oCIS-N79BIxhACXljTpUQJEBqMRITOgsqqoeHhSvr4-ACKACrsjACCJCTwAJ6wAGYkUAC2ZNBKGkWYWLAAjhqk2QDK6OJKWFAkaVRUlLVYFACUA_Qu0cpx-AAKAEoAkgAaqRlZuQXFpVDlldi19SRNLehtHV09FLCGJCAAHoMDANxhguJYo9HwJADCxYZEAIypADaAF0RmMBB9vkVfugAExA0FvcKQn5EBGPN55DqMMgqNQ6Q5FRhQPLjeDxZIDHhIwQo6H_C4afAACzIADkKpZSGRCbAiNcsN9sFUho9wgBfJ4CLEkHF4xSE4mk2LkqZzeZUvjgxh0mGwxks9mc7m8_mC1REbCit6St7yqDiPnwRzoMi6_4PO2RB3oJ0ut1fVFwz2Y7G4yI6QEgJiE4FKnWB-noP6wKpXdD4MhDana92-wxM1k88REgBUCaheqjwIGfKgADEbugIGRYdaJVKImofX7xAHK0QQ-E3HlwBF_O4giFXuKmFrBEp4L8NCR0AAuRh5eBUfDoMGCYzxEAYDdYTR7t6qJTrzfb3e8cUPIA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=6.26.0&envVersion=
Modifié par danielhagnoul (25 Jul 2018 - 00:34)
Modérateur
@danielhagnoul : +1
@britanicus75 : le code de danielhagnoul ou le mien va mieux t'aider à comprendre ce qui cloche dans ton code.
Quand on lit le code généré, il fait mal à la tête....


window.addEventListener('DOMContentLoaded', function(){
    var classQT = document.querySelectorAll('.qt'),
          classPRIX = document.querySelectorAll('.prix'),
          arCompte = [];

    for (var i = 0; i < classQT.length; i++) {
         var results = parseInt(classQT[i].textContent, 10) * parseInt(classPRIX[i].textContent, 10);
        arCompte.push(results.toFixed(2));
    }

    console.table(arCompte);
}, {
    capture: false,
    passive: true,
    once: false
});


* code fait de tête, je peux m'être trompé. Le code n'est pas "safe", c'est juste une piste et droit au but
Modifié par niuxe (25 Jul 2018 - 01:06)
Meilleure solution
Faisons simple et privilégions la structure de la table :
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Fais tes comptes</title>
    <style>
        table { border: 1px solid green; margin: 2rem auto 0; border-collapse: collapse; }
        td { padding: 0.3rem 1rem; }
        td:not(first-of-type) { border-left: 1px solid green;}
        td:not(:nth-of-type(2)) { text-align: right; }
        tr:nth-of-type(2n+1) { background: #eee; }
    </style>
</head><body>
    <table id="myTable"><tr>
        <td class="qt">11</td>
        <td><a href="https://www.pennstateind.com/store/PKRAHAN.html">Mach3 Razor Handle Kit in Chrome</a></td>
        <td class="prix">8.95</td>
        <td class="total"></td>
    </tr><tr>
        <td class="qt">2</td>
        <td><a href="https://www.pennstateind.com/store/PKRAHAN.html">Mach4 Razor Handle Kit in Chrome</a></td>
        <td class="prix">18.95</td>
        <td class="total"></td>
    </tr><tr>
        <td class="qt">3</td>
        <td><a href="https://www.pennstateind.com/store/PKRAHAN.html">Mach5 Razor Handle Kit in Chrome</a></td>
        <td class="prix">28.95</td>
        <td class="total"></td>
    </tr></table>
    <script>
        (function(id) {
            'use strict';
            
            const myTable = document.getElementById(id);
            if(myTable != null) {
                const rows = myTable.querySelectorAll('tr');
                var total = 0.0;
                for(var i=0, iMax=rows.length; i<iMax; i++) {
                    const cells = rows[i].cells;
                    if(cells.length >= 4) {
                        const qte = parseInt(cells[0].textContent, 10);
                        const pu = parseFloat(cells[2].textContent);
                        const subTotal = Math.round(qte * pu * 100) / 100.0;
                        cells[3].textContent = subTotal.toFixed(2);
                        console.log(subTotal);
                        total = total + subTotal;
                    }
                }
                alert('Tu me dois : ' + total.toFixed(2) + ' €');
            }
        })('myTable');
    </script>
</body></html>

Modifié par bazooka07 (25 Jul 2018 - 01:10)
C'est connu ! En JS, il y a souvent plusieurs manières d'arriver au résultat souhaité.

On ne va pas polémiquer, mais je préfère la simplicité de mes trois boucles for of en ES2015.
Pas de souci, chacun a sa façon de faire.
Il me semble plus naturel de travailleur ligne par ligne sur un devis ou facture que colonne par colonne.
Modifié par bazooka07 (25 Jul 2018 - 14:06)
Cela a été mon premier réflexe d'utiliser babel, pour convertir, mais comme vous le dites, "ça donne mal à la tête".

Merci pour la simplicité du code.

niuxe a écrit :
@danielhagnoul : +1
@britanicus75 : le code de danielhagnoul ou le mien va mieux t'aider à comprendre ce qui cloche dans ton code.
Quand on lit le code généré, il fait mal à la tête....


window.addEventListener('DOMContentLoaded', function(){
    var classQT = document.querySelectorAll('.qt'),
          classPRIX = document.querySelectorAll('.prix'),
          arCompte = [];

    for (var i = 0; i &lt; classQT.length; i++) {
         var results = parseInt(classQT[i].textContent, 10) * parseInt(classPRIX[i].textContent, 10);
        arCompte.push(results.toFixed(2));
    }

    console.table(arCompte);
}, {
    capture: false,
    passive: true,
    once: false
});


* code fait de tête, je peux m'être trompé. Le code n'est pas "safe", c'est juste une piste et droit au but
AMHA, la solution utilisant le DOM ( c'est à dire <tr> et cells), indépendante des "class", est plus fiable et plus rapide.
Il y a une petite erreur logique dans le code que j'ai donné. remplacer
const rows = myTable.querySelectorAll('tr');

par
const rows = myTable.tBodies[0].rows;

Mais les 2 versions marchent.
Sujet clos
Aller à