Some of the javascript functions on my web page work while other don't. What do I do/

Question

I created a calculator using HTML, CSS and Javascript.

But while the buttons for the numbers 1 to 9 plus the operators +, -, *, / and % work perfectly, the number 0, C and = don't work.

The code for the buttons that don't work is quite similar to the ones that do work so I;m not sure what the problem is.

Below is the code:

document.getElementById("one").addEventListener("click", () => {
  document.getElementById("calculation").value += "1";
});
document.getElementById("two").addEventListener("click", () => {
  document.getElementById("calculation").value += "2";
});
document.getElementById("three").addEventListener("click", () => {
  document.getElementById("calculation").value += "3";
});
document.getElementById("four").addEventListener("click", () => {
  document.getElementById("calculation").value += "4";
});
document.getElementById("five").addEventListener("click", () => {
  document.getElementById("calculation").value += "5";
});
document.getElementById("six").addEventListener("click", () => {
  document.getElementById("calculation").value += "6";
});
document.getElementById("seven").addEventListener("click", () => {
  document.getElementById("calculation").value += "7";
});
document.getElementById("eight").addEventListener("click", () => {
  document.getElementById("calculation").value += "8";
});
document.getElementById("nine").addEventListener("click", () => {
  document.getElementById("calculation").value += "9";
});
document.getElementById("period").addEventListener("click", () => {
  document.getElementById("calculation").value += ".";
});
document.getElementById("add").addEventListener("click", () => {
  document.getElementById("calculation").value += "+";
});
document.getElementById("subtract").addEventListener("click", () => {
  document.getElementById("calculation").value += "-";
});
document.getElementById("multiply").addEventListener("click", () => {
  document.getElementById("calculation").value += "*";
});
document.getElementById("divide").addEventListener("click", () => {
  document.getElementById("calculation").value += "/";
});
document.getElementById("percentage").addEventListener("click", () => {
  document.getElementById("calculation").value += "*(1/100)";
});

//clear calculation
document.getElementById("clear").addEventListener("click", () => {
  document.getElementById("calculation").value = "0";
});

// get result
document.getElementById("getResult").addEventListener("click", () => {
  document.getElementById("result").value = eval(document.getElementById("calculation").value);
});

:root {
    --main-color: darkblue;
    --secondary-color: blue;
    --tertiary-color: #318ce7;
    --dark-color: #444;
    --light-color: #fafafa;
}
body {
    font-family: "Montserrat", sans-serif;
    background-color: var(--light-color);
    color: var(--dark-color);
    margin-top: 0px;
    margin-bottom: 0px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
.calculator {
    
    box-shadow: var(--main-color) 1px 1px 1em;
    border-radius: 1em;
    height: fit-content;
    width: 370px;
    background-image: linear-gradient(-135deg,var(--secondary-color),var(--tertiary-color),var(--secondary-color));
    overflow: hidden;
}
.output {
    background-image: linear-gradient(-45deg,var(--main-color),var(--secondary-color));
    color: var(--tertiary-color);
    padding: 2em 0px;
}
.result,.calculation {
    display: flex;
    flex-direction: row-reverse;
    align-content: center;
    align-items: center;
    justify-content: end;
}
#result,#calculation {
    padding: 0.3em 10px;
    background-color: transparent;
    color: var(--light-color);
    border: none;
    text-align: right;
    font-size: inherit;
}
::placeholder {
  color: var(--light-color);
}
#result {
    font-size: 1.3em;
}
.result {
    height: 50px;
    font-size: 30px;
}
.calculation {
    height: 40px;
    font-size: 25px;
}
.keyboard {
    padding: 20px 10px;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto auto auto auto;
}
button {
    margin: 0.2em 0.2em;
    border: none;
    border-radius: 0.2em;
    height: 40px;
    opacity: 50%;
    color: var(--main-color);
    font-size: 15px;
    font-weight: bolder;
}
button:hover {
    background-image: linear-gradient(-45deg,var(--secondary-color),var(--tertiary-color),var(--secondary-color));
    color: var(--light-color);
    box-shadow: var(--main-color) 1px 1px 1em;
    transition-duration: 400ms;
}
button:active {
    background-image: linear-gradient(-45deg,var(--main-color),var(--secondary-color));
    color: var(--light-color);
    opacity: 100%;
    transition-duration: 400ms;
}

<!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>Calculator</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="calculator">
      <section class="output">
        <section class="result">
          <input id="result" placeholder="0" disabled />
        </section>
        <section class="calculation">
          <input id="calculation" disabled placeholder="0" />
        </section>
      </section>
      <section class="keyboard">
        <button id="clear">C</button>
        <button id="brackets">( )</button>
        <button id="percentage">%</button>
        <button id="divide">/</button>
        <button id="seven">7</button>
        <button id="eight">8</button>
        <button id="nine">9</button>
        <button id="multiply">X</button>
        <button id="four">4</button>
        <button id="five">5</button>
        <button id="six">6</button>
        <button>-</button>
        <button id="one" class="getResult2">1</button>
        <button id="two">2</button>
        <button id="three">3</button>
        <button id="add">+</button>
        <button id="change-sign">+/-</button>
        <button id="zero">0</button>
        <button id="period">.</button>
        <button id="getResult">=</button>
      </section>
    </div>
    <script type="text/javascript" src="index.js"></script>
  </body>
</html>

Can you help me figure out what the problem is?

Also, I wanted to write a rule where the input of id "result" will automatically update itself whenever there is a change to the input with id "calculation" but it did not work.

Answer 1

You were running into 2 different issues. First off, there was never an event listener set for the id zero. Second, there was not an id set for the subtract button, so the script failed at that getElementById and the remaining script. The below works well:

document.getElementById("zero").addEventListener("click", () => {
  document.getElementById("calculation").value += "0";
});
document.getElementById("one").addEventListener("click", () => {
  document.getElementById("calculation").value += "1";
});
document.getElementById("two").addEventListener("click", () => {
  document.getElementById("calculation").value += "2";
});
document.getElementById("three").addEventListener("click", () => {
  document.getElementById("calculation").value += "3";
});
document.getElementById("four").addEventListener("click", () => {
  document.getElementById("calculation").value += "4";
});
document.getElementById("five").addEventListener("click", () => {
  document.getElementById("calculation").value += "5";
});
document.getElementById("six").addEventListener("click", () => {
  document.getElementById("calculation").value += "6";
});
document.getElementById("seven").addEventListener("click", () => {
  document.getElementById("calculation").value += "7";
});
document.getElementById("eight").addEventListener("click", () => {
  document.getElementById("calculation").value += "8";
});
document.getElementById("nine").addEventListener("click", () => {
  document.getElementById("calculation").value += "9";
});
document.getElementById("period").addEventListener("click", () => {
  document.getElementById("calculation").value += ".";
});
document.getElementById("add").addEventListener("click", () => {
  document.getElementById("calculation").value += "+";
});
document.getElementById("subtract").addEventListener("click", () => {
  document.getElementById("calculation").value += "-";
});
document.getElementById("multiply").addEventListener("click", () => {
  document.getElementById("calculation").value += "*";
});
document.getElementById("divide").addEventListener("click", () => {
  document.getElementById("calculation").value += "/";
});
document.getElementById("percentage").addEventListener("click", () => {
  document.getElementById("calculation").value += "*(1/100)";
});

//clear calculation
document.getElementById("clear").addEventListener("click", () => {
  document.getElementById("calculation").value = "0";
});

// get result
document.getElementById("getResult").addEventListener("click", () => {
  document.getElementById("result").value = eval(document.getElementById("calculation").value);
});

:root {
    --main-color: darkblue;
    --secondary-color: blue;
    --tertiary-color: #318ce7;
    --dark-color: #444;
    --light-color: #fafafa;
}
body {
    font-family: "Montserrat", sans-serif;
    background-color: var(--light-color);
    color: var(--dark-color);
    margin-top: 0px;
    margin-bottom: 0px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
.calculator {
    
    box-shadow: var(--main-color) 1px 1px 1em;
    border-radius: 1em;
    height: fit-content;
    width: 370px;
    background-image: linear-gradient(-135deg,var(--secondary-color),var(--tertiary-color),var(--secondary-color));
    overflow: hidden;
}
.output {
    background-image: linear-gradient(-45deg,var(--main-color),var(--secondary-color));
    color: var(--tertiary-color);
    padding: 2em 0px;
}
.result,.calculation {
    display: flex;
    flex-direction: row-reverse;
    align-content: center;
    align-items: center;
    justify-content: end;
}
#result,#calculation {
    padding: 0.3em 10px;
    background-color: transparent;
    color: var(--light-color);
    border: none;
    text-align: right;
    font-size: inherit;
}
::placeholder {
  color: var(--light-color);
}
#result {
    font-size: 1.3em;
}
.result {
    height: 50px;
    font-size: 30px;
}
.calculation {
    height: 40px;
    font-size: 25px;
}
.keyboard {
    padding: 20px 10px;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto auto auto auto;
}
button {
    margin: 0.2em 0.2em;
    border: none;
    border-radius: 0.2em;
    height: 40px;
    opacity: 50%;
    color: var(--main-color);
    font-size: 15px;
    font-weight: bolder;
}
button:hover {
    background-image: linear-gradient(-45deg,var(--secondary-color),var(--tertiary-color),var(--secondary-color));
    color: var(--light-color);
    box-shadow: var(--main-color) 1px 1px 1em;
    transition-duration: 400ms;
}
button:active {
    background-image: linear-gradient(-45deg,var(--main-color),var(--secondary-color));
    color: var(--light-color);
    opacity: 100%;
    transition-duration: 400ms;
}

<!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>Calculator</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="calculator">
      <section class="output">
        <section class="result">
          <input id="result" placeholder="0" disabled />
        </section>
        <section class="calculation">
          <input id="calculation" disabled placeholder="0" />
        </section>
      </section>
      <section class="keyboard">
        <button id="clear">C</button>
        <button id="brackets">( )</button>
        <button id="percentage">%</button>
        <button id="divide">/</button>
        <button id="seven">7</button>
        <button id="eight">8</button>
        <button id="nine">9</button>
        <button id="multiply">X</button>
        <button id="four">4</button>
        <button id="five">5</button>
        <button id="six">6</button>
        <button id="subtract">-</button>
        <button id="one" class="getResult2">1</button>
        <button id="two">2</button>
        <button id="three">3</button>
        <button id="add">+</button>
        <button id="change-sign">+/-</button>
        <button id="zero">0</button>
        <button id="period">.</button>
        <button id="getResult">=</button>
      </section>
    </div>
    <script type="text/javascript" src="index.js"></script>
  </body>
</html>

Answer 2

You need to set your subtract button's id attribute to "subtract" and add an event listener to the element with the id zero:

document.getElementById("zero").addEventListener("click", () => {
  document.getElementById("calculation").value += "0";
});
document.getElementById("one").addEventListener("click", () => {
  document.getElementById("calculation").value += "1";
});
document.getElementById("two").addEventListener("click", () => {
  document.getElementById("calculation").value += "2";
});
document.getElementById("three").addEventListener("click", () => {
  document.getElementById("calculation").value += "3";
});
document.getElementById("four").addEventListener("click", () => {
  document.getElementById("calculation").value += "4";
});
document.getElementById("five").addEventListener("click", () => {
  document.getElementById("calculation").value += "5";
});
document.getElementById("six").addEventListener("click", () => {
  document.getElementById("calculation").value += "6";
});
document.getElementById("seven").addEventListener("click", () => {
  document.getElementById("calculation").value += "7";
});
document.getElementById("eight").addEventListener("click", () => {
  document.getElementById("calculation").value += "8";
});
document.getElementById("nine").addEventListener("click", () => {
  document.getElementById("calculation").value += "9";
});
document.getElementById("period").addEventListener("click", () => {
  document.getElementById("calculation").value += ".";
});
document.getElementById("add").addEventListener("click", () => {
  document.getElementById("calculation").value += "+";
});
document.getElementById("subtract").addEventListener("click", () => {
  document.getElementById("calculation").value += "-";
});
document.getElementById("multiply").addEventListener("click", () => {
  document.getElementById("calculation").value += "*";
});
document.getElementById("divide").addEventListener("click", () => {
  document.getElementById("calculation").value += "/";
});
document.getElementById("percentage").addEventListener("click", () => {
  document.getElementById("calculation").value += "*(1/100)";
});

//clear calculation
document.getElementById("clear").addEventListener("click", () => {
  document.getElementById("calculation").value = "0";
});

// get result
document.getElementById("getResult").addEventListener("click", () => {
  document.getElementById("result").value = eval(document.getElementById("calculation").value);
});

:root {
    --main-color: darkblue;
    --secondary-color: blue;
    --tertiary-color: #318ce7;
    --dark-color: #444;
    --light-color: #fafafa;
}
body {
    font-family: "Montserrat", sans-serif;
    background-color: var(--light-color);
    color: var(--dark-color);
    margin-top: 0px;
    margin-bottom: 0px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
.calculator {
    
    box-shadow: var(--main-color) 1px 1px 1em;
    border-radius: 1em;
    height: fit-content;
    width: 370px;
    background-image: linear-gradient(-135deg,var(--secondary-color),var(--tertiary-color),var(--secondary-color));
    overflow: hidden;
}
.output {
    background-image: linear-gradient(-45deg,var(--main-color),var(--secondary-color));
    color: var(--tertiary-color);
    padding: 2em 0px;
}
.result,.calculation {
    display: flex;
    flex-direction: row-reverse;
    align-content: center;
    align-items: center;
    justify-content: end;
}
#result,#calculation {
    padding: 0.3em 10px;
    background-color: transparent;
    color: var(--light-color);
    border: none;
    text-align: right;
    font-size: inherit;
}
::placeholder {
  color: var(--light-color);
}
#result {
    font-size: 1.3em;
}
.result {
    height: 50px;
    font-size: 30px;
}
.calculation {
    height: 40px;
    font-size: 25px;
}
.keyboard {
    padding: 20px 10px;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto auto auto auto;
}
button {
    margin: 0.2em 0.2em;
    border: none;
    border-radius: 0.2em;
    height: 40px;
    opacity: 50%;
    color: var(--main-color);
    font-size: 15px;
    font-weight: bolder;
}
button:hover {
    background-image: linear-gradient(-45deg,var(--secondary-color),var(--tertiary-color),var(--secondary-color));
    color: var(--light-color);
    box-shadow: var(--main-color) 1px 1px 1em;
    transition-duration: 400ms;
}
button:active {
    background-image: linear-gradient(-45deg,var(--main-color),var(--secondary-color));
    color: var(--light-color);
    opacity: 100%;
    transition-duration: 400ms;
}

<!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>Calculator</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="calculator">
      <section class="output">
        <section class="result">
          <input id="result" placeholder="0" disabled />
        </section>
        <section class="calculation">
          <input id="calculation" disabled placeholder="0" />
        </section>
      </section>
      <section class="keyboard">
        <button id="clear">C</button>
        <button id="brackets">( )</button>
        <button id="percentage">%</button>
        <button id="divide">/</button>
        <button id="seven">7</button>
        <button id="eight">8</button>
        <button id="nine">9</button>
        <button id="multiply">X</button>
        <button id="four">4</button>
        <button id="five">5</button>
        <button id="six">6</button>
        <button id="subtract">-</button>
        <button id="one" class="getResult2">1</button>
        <button id="two">2</button>
        <button id="three">3</button>
        <button id="add">+</button>
        <button id="change-sign">+/-</button>
        <button id="zero">0</button>
        <button id="period">.</button>
        <button id="getResult">=</button>
      </section>
    </div>
    <script type="text/javascript" src="index.js"></script>
  </body>
</html>