Can Someone help me to debug these codes? im trying to create a javascript calculator but it is having some issues… I dont know how I can explain the issue I h

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Javascript Calculator</title>

    <link rel="stylesheet" href="calculator.css">

    <script src="calculator1.js" defer></script>

    <style>

      *{

    padding: 0;

    margin: 0;

    font-family: sans-serif;

    box-sizing: border-box;

}

body{

    background: linear-gradient(to right, deepPink, rgb(18, 110, 110), rgb(17, 201, 33));

    display: flex;

    height: 100vh;

    justify-content: center;

    align-items: center;

}

.container{

    justify-content: center;

    align-items: center;

    padding: 10px;

    position: relative;

    width: 300px;

    display: flex;

    flex-direction: column;

    background: linear-gradient(to left, rgb(155, 6, 85), rgba(18, 110, 110, 0.376), rgb(17, 201, 33));

}

.output{

 width: 100%;

 height: auto;

 position: relative;

 word-break: break-all;

 /* background:rgb(180, 11, 48); */

 display: flex;

 flex-direction: column;

 justify-content: space-between;

 align-items: flex-end;

 font-size: 18px;

}

.previous, .current, .operatorr{

   padding: 2px;

    margin-top: 10px;

    color: seashell;

}

.grid{

    width: 100%;

    display: grid;

    grid-template-columns: auto auto auto auto;

}

  .clear,  .delete{

   grid-area: 1 /  span 2;

}

button{

    outline: none;

    border: none;

    margin: 4px 4px;

    padding: 18px;

    cursor: pointer;

    font-size: 16px;

    font-weight: initial;

}

/* .equal{

    grid-area: 1 / span 3;

} */

    </style>

</head>

<body>

  <div class="container">

      <div class="output">

        <div class="result">

        </div>

        <div class="previous">

        </div>

        <div class="operatorr">

        </div>

        <div class="current">

        </div>

      </div>

      <div class="grid">    

          <button class="clear">AC</button>

          <button class='delete'>DEL</button>

          <button class="operator">*</button>

          <button class="number">1</button>

          <button class="number">2</button>

          <button class="number">3</button>

          <button class="operator">+</button>

          <button class="number">4</button>

          <button class="number">5</button>

          <button class="number">6</button>

          <button class="operator">-</button>

          <button class="number">7</button>

          <button class="number">8</button>

          <button class="number">9</button>  

        

          <button class="operator">/</button>

          <button class="equal">=</button>

      </div>

  </div>

  <script>

    // selectors field

const container = document.querySelector('.container');

const output = document.querySelector('.output');

const previous = document.querySelector('.previous');

previous.innerHTML = '';

const current = document.querySelector('.current');

const grid = document.querySelector('grid');

const number = document.querySelectorAll('.number');

const operator = document.querySelectorAll('.operator');

const operatorr = document.querySelector('.operatorr');

operatorr.innerHTML = '';

const equal = document.querySelector('.equal');

const result = document.querySelector('.result');

const clear =  document.querySelector('.clear');

const deleted = document.querySelector('.delete');

let valueFromNumberButton = '';

let operandValue = ''

current.textContent = '';

let operatordValue = '';

// event listeners field

 number.forEach(value =>{

   

     value.addEventListener("click", (event) =>{

        doCalculation(value.textContent);

       

     })

 })

 // functions field

 function doCalculation(value) {

    current.textContent += value;

    includeOperator(value);

 }

 function includeOperator(value) {

     operator.forEach(opValue =>{

         opValue.addEventListener('click', (event) =>{

             operatordValue = opValue.textContent;

             console.log(operatordValue);

             if (previous.innerHTML.indexOf(opValue.textContent) === -1 ) {

                previous.innerHTML  += current.textContent + opValue.textContent;

                calculateThem();

             }

              else{

                previous.innerHTML  += current.textContent;

                calculateThem();

              }

            current.textContent = '';

         })

     })

 }

 equal.addEventListener('click', calculateThem);

 function calculateThem(params) {

       //  current.textContent = '';

    //  console.log(typeof Number(previous.textContent));

    switch(operatordValue){

        case '+':

            current.textContent = (parseInt(current.textContent)) + (parseInt(previous.textContent));

            // clearFields();

            break;

        case '-':

            current.textContent = (parseInt(current.textContent)) - (parseInt(previous.textContent));

            // clearFields();

            break;

        case '*': 

        current.textContent = (parseInt(current.textContent)) * (parseInt(previous.textContent));

            // clearFields();

            break;

        case '/':

        current.textContent = (parseInt(current.textContent)) / (parseInt(previous.textContent));

            // clearFields();

            break;    

    }

 }

 // delete and clear

 function clearFields(params) {

     setTimeout(() =>{

         current.innerHTML = '';

     }, 2000)

   number.forEach((value) =>{

       value.addEventListener('click', (event) =>{

           

       })

   })

       

 }

 deleted.addEventListener('click', (event) =>{

    current.innerHTML = '';

     

  })

  clear.addEventListener("click", (event ) =>{

    current.innerHTML = '';

    previous.innerHTML = '';

  })

  </script>

</body>

</html>

It looks like you’ve just pasted in your code without any context. In order to help you we need to understand what you are doing, what issues your having, and what steps you’ve already taken to solve them.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

im trying to create a javascript calculator
but it is having some issues…
I dont know how I can explain the issue I have.
You can use your editor and try to use it, you will see the issue it has

Best Regards!!!

An important skill for developers is the ability to describe the problem.

You can say things like
“When I do this calculation I expect this to happen but this happens instead”
“I am having an issue with my program adding extra decimals”

It is always best to share a codepen or codesandbox link with your code.
You have to remember that people are busy and choose to volunteer there time to help on the forum.

They are not going to copy all of your code into a code editor and run 20 different calculations on your code.

Please try to do your best in describing the problem .

Thanks! :grinning:

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.