Calcule simple Aire rectangle

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
Avatar du membre
19ROMEO93
Messages : 12
Enregistré le : 14 août 2020, 11:40
Localisation : Gap

Calcule simple Aire rectangle

Message par 19ROMEO93 » 14 août 2020, 11:52

bonjour j'essaye de mettre en place un système de calcule de l'air d'un rectangle
j'ai réalisé 3 inputs de type number; pour la largeur , pour la longueur et pour l'aire d'un rectangle
le but de et de rentrer une première valeur: la largeur puis une seconde valeur: la longueur pour obtenir l'aire dur rectangle directement .
je viens vous demander de l'aide car bien évidemment n’étant pas très doué en java Script (j’essaye de m'entrainer) :

quand je rentre la premier valeur (dans le champ input longueur) cette valeur apparait également dans le champ input largeur ce que je ne veux pas

voici mon code html

Code : Tout sélectionner


                        <label for="longueur">L: longueur</label>
                        <input type="number" class="form-control" id="longueur"  min="0" step="0.01">


                        <label for="largeur">l: largeur</label>
                        <input type="number" class="form-control" id="largeur"  min="0" step="0.01">
   
          
                        <label for="aireRectangle">A: aire du rectangle</label>
                        <input type="number"  class="form-control" id="aireRectangle"  min="0" step="0.01">
    

voici le javaSCRIPT

Code : Tout sélectionner

const inputLongueurRectangle = document.querySelector('#longueur');
const inputLargeurRectangle = document.querySelector('#largeur');
const inputAireRectangle = document.querySelector('#aireRectangle');
const inputPerimetreRectangle = document.querySelector("#perimetreRectangle");

/* ___de___longeur + largeur à l'aire du rectangle___ */

function longAndLargToAireRectangle() {
    let longueur = Number(this.value);
    let largeur = Number(this.value);

    let longAndLargToAireRectangle = longueur * largeur;

    inputLongueurRectangle.value = longueur;
    inputLargeurRectangle.value = largeur;
    inputAireRectangle.value = longAndLargToAireRectangle.toFixed(2);

    
    if(inputLongueurRectangle.value === '' ||  inputLargeurRectangle.value === '') {
        inputAireRectangle.value = '';
    }

}
inputLongueurRectangle.addEventListener('input', longAndLargToAireRectangle);
inputLargeurRectangle.addEventListener('input', longAndLargToAireRectangle);



Avatar du membre
webmaster
Administrateur du site
Messages : 396
Enregistré le : 28 févr. 2017, 15:19

Re: Calcule simple Aire rectangle

Message par webmaster » 17 août 2020, 11:04

Bonjour,

La fonction utilisait this au lieu des selecteurs

Ainsi, cela fonctionne mieux

Code : Tout sélectionner

function longAndLargToAireRectangle() {
    let longueur = Number(inputLongueurRectangle.value);
    let largeur = Number(inputLargeurRectangle.value);
    
    let longAndLargToAireRectangle = longueur * largeur;

    inputAireRectangle.value = longAndLargToAireRectangle.toFixed(2);

    
    if(inputLongueurRectangle.value === '' ||  inputLargeurRectangle.value === '') {
        inputAireRectangle.value = '';
    }

}
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Avatar du membre
19ROMEO93
Messages : 12
Enregistré le : 14 août 2020, 11:40
Localisation : Gap

Re: Calcule simple Aire rectangle

Message par 19ROMEO93 » 18 août 2020, 16:08

merci beaucoup vraiment !!!!
j achèterais ton livre !!!!
tu le merites

Avatar du membre
19ROMEO93
Messages : 12
Enregistré le : 14 août 2020, 11:40
Localisation : Gap

Re: Calcule simple Aire rectangle

Message par 19ROMEO93 » 20 août 2020, 10:39

j'ai une autre question (après j’arrête de t’embêter(promis)

cette fois je veux l'inverse: lorsque je rentre l'aire et le périmètre cela me donne la largeur et la longueur : mon code fonctionne

en html (bien évidemment rien ne change )

Code : Tout sélectionner


                        <label for="longueur">L: longueur</label>
                        <input type="number" class="form-control" id="longueur"  min="0" step="0.01">
  
                        <label for="largeur">l: largeur</label>
                        <input type="number" class="form-control" id="largeur"  min="0" step="0.01">
   
                        <label for="perimetreRectangle">P: périmètre du rectangle:</label>
                        <input type="number"  class="form-control" id="perimetreRectangle" min="0" step="0.01">
 
                        <label for="aireRectangle">A: aire du rectangle</label>
                        <input type="number"  class="form-control" id="aireRectangle"  min="0" step="0.01">
                    
en javascript
mes constantes

Code : Tout sélectionner

const inputLongueurRectangle = document.querySelector('#longueur');
const inputLargeurRectangle = document.querySelector('#largeur');
const inputAireRectangle = document.querySelector('#aireRectangle');
const inputPerimetreRectangle = document.querySelector("#perimetreRectangle");
si j'entre la longeur et la largeur j'obtiens ainsi l'aire et le périmètre (cela fonctionne grâce à ton aide )

Code : Tout sélectionner

function longAndLargToPerimetreRectangleAndAire() {

    let longueur = Number(inputLongueurRectangle.value);
    
    let largeur = Number(inputLargeurRectangle.value);

    let longAndLargToPerimetreRectangle = 2 * (longueur + largeur);
    let longAndLargToAireRectangle = longueur * largeur;

    inputPerimetreRectangle.value = longAndLargToPerimetreRectangle.toFixed(2);
    inputAireRectangle.value = longAndLargToAireRectangle.toFixed(2);


    if (inputLongueurRectangle.value === '' || inputLargeurRectangle.value === '') {
        inputPerimetreRectangle.value = '';
        inputAireRectangle.value = '';
    }

}
 inputLongueurRectangle.addEventListener('input', longAndLargToPerimetreRectangleAndAire);
inputLargeurRectangle.addEventListener('input', longAndLargToPerimetreRectangleAndAire); 


si j'entre le perimetre et l'aire j'obtiens la longeur et la largeur ( grâce à une équation du second degrés à résoudre ) (cela fonctionne)

Code : Tout sélectionner

function perimetreAndAireToLongueurAndLargeur() {

    let perimetre = Number(inputPerimetreRectangle.value);
    let aire = Number(inputAireRectangle.value);

    let perimetreAndAireToLongueur = ((perimetre / 2) + Math.sqrt((Math.pow(perimetre / 2, 2)) - 4 * aire)) / 2;
    let perimetreAndAireToLargeur = ((perimetre / 2) - Math.sqrt((Math.pow(perimetre / 2, 2)) - 4 * aire)) / 2;

    inputLongueurRectangle.value = perimetreAndAireToLongueur.toFixed(2);
    inputLargeurRectangle.value = perimetreAndAireToLargeur.toFixed(2);

    if (inputAireRectangle.value === '' || inputPerimetreRectangle.value === '') {
        inputLargeurRectangle.value = '';
        inputLongueurRectangle.value = '';

    }
}
inputPerimetreRectangle.addEventListener('input', perimetreAndAireToLongueurAndLargeur);
inputAireRectangle.addEventListener('input', perimetreAndAireToLongueurAndLargeur);
CEPENDANT lorsque je veux faire d'autre combinaison par exemple obtenir la largeur et le perimetre en fonction de la longeur et de l'aire par exemple:

le code fonctionne seul mais ici comme je répète un évènement (ex inputAireRectangle ) mais avec une fonction différente ca casse tout

Code : Tout sélectionner

function longeurAndAireToLargeurAndPerimetre() {

    let longueur = Number(inputLongueurRectangle.value);
    let aire = Number(inputAireRectangle.value);

    let longeurAndAireToPerimetre = 2 * ((aire / longueur) + longueur);
    let longeurAndAireToLargeur = aire / longueur;

    inputPerimetreRectangle.value = longeurAndAireToPerimetre.toFixed(2);
    inputLargeurRectangle.value = longeurAndAireToLargeur.toFixed(2);


    if (inputLongueurRectangle.value === '' || inputAireRectangle.value === '') {
        inputLargeurRectangle.value = '';
        inputPerimetreRectangle.value = '';
    }
}
inputLongueurRectangle.addEventListener('input', longeurAndAireToLargeurAndPerimetre);
inputAireRectangle.addEventListener('input', longeurAndAireToLargeurAndPerimetre); 



ducoup m'a question serait comment utiliser un meme input qui ferait plusieurs événement ( avec d'autre fonction comme l'exemple )

Matthias

Avatar du membre
webmaster
Administrateur du site
Messages : 396
Enregistré le : 28 févr. 2017, 15:19

Re: Calcule simple Aire rectangle

Message par webmaster » 25 août 2020, 12:55

Bonjour,

Dans le cas ou on veut détecter un changement sur un des éléments au choix, il faut affiner la détection.
Il faut détecter le changement de l'utilisateur et pas le changement général.
Je vérifierai par exemple que le champ a bien le focus pour s'assurer que c'est bien l'utilisateur qui génère le changement.

C'est en tout cas nettement plus délicat à programmer avec de nombreux cas possibles (pc ou mobile, saisie avec clavier ou en copier coller, ...)
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Répondre