calculatrice html css javascript

Sujet résolu

22 novembre 2021 à 10:40:11

salut je viens de creer une calculatrice avec html css et javascript il me reste une chose le cote code javascript pour le bouton egal je sais pas comment faire svp aidez moi voila le code complet

<html>
    <head>
        <meta charset="utf-8"/>
        <title>Ceci est une page HTML de test</title>
        <link rel="stylesheet" href="style.css"/>
    </head>

    <body>
      <div class="calc">
          <div id="ecran"></div>
          <div id="boutons">
          <a href="index.html"><div id="delete">C</div></a>
          <div class="bouton">1</div>
          <div class="bouton">2</div>
          <div class="bouton">3</div>
          <div class="bouton">4</div>
          <div class="bouton">5</div>
          <div class="bouton">6</div>
          <div class="bouton">7</div>
          <div class="bouton">8</div>
          <div class="bouton">9</div>
          <div class="bouton">0</div>
          <div class="bouton">*</div>
          <div class="bouton">/</div>
          <div class="bouton">+</div>
          <div class="bouton">-</div>
          <div id="egal">=</div>
        </div>
      </div>
      
      <script src="app.js"></script>
    </body>
</html>

#ecran
{
  width: 300px;
  background: rgb(102,205,255);
  height: 100px;
  display: table-cell;
  border-radius: 10px;
  font-size: 1.9em;
  text-align: center;
  vertical-align: middle;
}

#boutons
{
  width: 300px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 13px;
}

.bouton
{
  color: black;
  padding: 10px;
  font-size: 1.9em;
  margin: 9px;
  cursor: pointer;
  background: white;
  border-radius: 10px;
}

#egal
{
  color: white;
  padding: 10px;
  font-size: 1.9em;
  margin: 10px;
  cursor: pointer;
  background: green;
  border-radius: 10px;
}

.calc
{
  width: 300px;
  margin: auto;
  padding: 7px;
  background: black;
  border-radius: 10px;
  box-shadow: 0 5px black;
}

.bouton:hover
{
  box-shadow: 5px 5px 5px black;
  transform: translateY(2px);
}


#egal:hover
{
  box-shadow: 5px 5px 5px black;
  transform: translateY(2px);
}

body
{
  display: flex;
  justify-content: center;
  background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}

#delete
{
  color: black;
  padding: 10px;
  font-size: 1.9em;
  margin: 10px;
  cursor: pointer;
  background: rgb(255,184,113);
  border-radius: 10px;
}
a
{
text-decoration: none;
color: black;
}
#delete:hover
{
  box-shadow: 5px 5px 5px black;
  transform: translateY(2px);
}

let elt=document.getElementById('ecran');
let elt2=document.getElementById('egal');
var i=0;
for(i=0;i<15;i++)
{
    document.getElementsByClassName('bouton')[i].addEventListener('click',function(e){
        e = e || window.event;
        var target=e.target || e.srcElement;
        elt.innerText+=target.innerText || target.textContent;
        });
}




elt2.addEventListener('click',function(){
    document.getElementById('ecran').value=eval(document.getElementById('ecran').value);
});

SamuelGaborieau3

22 novembre 2021 à 13:57:58

Bonjour, si tu ouvre ta console de développement tu doit pouvoir voir un message d'erreur qui devrait ressemblait à cela:

Uncaught TypeError: Cannot read properties of undefined (reading 'addEventListener')

Avec la ligne à la quelle le script à planté.

Si tu avais déjà vue l'erreur tu aurais dut nous l'indiqué dans ton message, le message d'erreur aide beaucoup à résoudre le problème.

La boucle qui parcours les 14 boutons fait 15 tour (de i == 0 jusqu'à i == 14) donc durant le dernier tour de boucle tu fait:

document.getElementsByClassName('bouton')[14].addEventListener // ...

Comme ta sélection ne contient que 14 boutons et que l'index 14 fait référence au 15 iém boutons (qui n'existe pas, le premier bouton étant l'index 0)

tu appel la méthode addEventListener sur undefined. Ce qui provoque l'erreur (quand tu référence un élément de tableau qui n'existe pas en Javascript tu reçoit la constante undefined).

La solution la plus simple et la plus rapide étant de décrémenté la valeur de droite de la condition de poursuite dans l'en tête de la boucle:

for(i=0; i < 14; i++) // ...

Une 2ièm erreur se situe au niveau de la fonction de rappel associé à l'événement du click sur le bouton égal, qui utilise la propriété value d'une div (qui n'existe pas donc undefined) au lieu de la propriété textContent.

elt2.addEventListener('click',function(){
    document.getElementById('ecran').textContent=eval(document.getElementById('ecran').textContent);
});

-
Edité par SamuelGaborieau3 22 novembre 2021 à 13:59:44

suggestion de présentation.

Mohamed Knoud

22 novembre 2021 à 20:01:15

SamuelGaborieau3 a écrit:

Bonjour, si tu ouvre ta console de développement tu doit pouvoir voir un message d'erreur qui devrait ressemblait à cela:
Uncaught TypeError: Cannot read properties of undefined (reading 'addEventListener')
Avec la ligne à la quelle le script à planté.

Si tu avais déjà vue l'erreur tu aurais dut nous l'indiqué dans ton message, le message d'erreur aide beaucoup à résoudre le problème.

La boucle qui parcours les 14 boutons fait 15 tour (de i == 0 jusqu'à i == 14) donc durant le dernier tour de boucle tu fait:
document.getElementsByClassName('bouton')[14].addEventListener // ...
Comme ta sélection ne contient que 14 boutons et que l'index 14 fait référence au 15 iém boutons (qui n'existe pas, le premier bouton étant l'index 0)

tu appel la méthode addEventListener sur undefined. Ce qui provoque l'erreur (quand tu référence un élément de tableau qui n'existe pas en Javascript tu reçoit la constante undefined).

La solution la plus simple et la plus rapide étant de décrémenté la valeur de droite de la condition de poursuite dans l'en tête de la boucle:
for(i=0; i < 14; i++) // ...
Une 2ièm erreur se situe au niveau de la fonction de rappel associé à l'événement du click sur le bouton égal, qui utilise la propriété value d'une div (qui n'existe pas donc undefined) au lieu de la propriété textContent.
elt2.addEventListener('click',function(){
    document.getElementById('ecran').textContent=eval(document.getElementById('ecran').textContent);
});
-
Edité par SamuelGaborieau3 il y a environ 6 heures

Merci pour ta reponse j'ai trouve d'ou vient le probleme avant de voir ta reponse merci quand mem