Simple Calculator Script I written my own calculator script in javascript! It is a basic one, but works really well. I am just wondering if there is any way to make this script more efficient &amp; clean. On first look, I feel like I did some redundant stuff in it, however I am a beginner and in no right to judge the code on my own.



window.onload = () =&gt; {
  const calculator = document.querySelector('form[name = "calculator"]')
  const btns = document.querySelectorAll(`form[name = "calculator"] table tr input[type = "button"]`)
  btns.forEach((button) =&gt; {
    if(button.value != 'c' &amp;&amp; button.value != '='){
      button.addEventListener('click', () =&gt; {
        calculator.display.value += button.value
      })
    } else {
      if (button.value == 'c') {
        button.addEventListener('click', () =&gt; {
          calculator.display.value = '';
        })
      } else if (button.value == '=') {
        button.addEventListener('click', () =&gt; {
          calculator.display.value = eval(calculator.display.value);
        })
      }
    }
  })
}
&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;&lt;/head&gt;
    &lt;/body&gt;
      &lt;!-- Page Contents !--&gt;
      &lt;form name = "calculator"&gt;
        &lt;table&gt;
          &lt;tr&gt;
            &lt;input type = "text" name = "display" id = "display" disabled&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;input type = "button" name = "one" value = "1"&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type = "button" name = "two" value = "2"&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type = "button" name = "three" value = "3"&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type = "button" name = "plus" value = "+"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;input type = "button" name = "four" value = "4"&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type = "button" name = "five" value = "5"&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type = "button" name = "six" value = "6"&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type = "button" name = "minus" value = "-"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;input type = "button" name = "seven" value = "7"&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type = "button" name = "eight" value = "8"&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type = "button" name = "nine" value = "9"&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type = "button" name = "multiplicatio" value = "*"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;input type = "button" name = "clear" value = "c"&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type = "button" name = "0" value = "0"&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type = "button" name = "equal" value = "="&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type = "button" name = "division" value = "/"&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/form&gt;
      &lt;script src = "script.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;




Are there any ways to make this script "better"? Thanks for the help.
Yes, It can be better in many ways just replace all your code with this:

The first thing I did is made the code formatting just a bit better.
then I added a title tag a webpage cannot go on without a title
after that I include the meta tags for the UTF-8 encoding and then the viewport meta tag for responsiveness. I also corrected your opening body tag you wrote it as the closing body tag.

Tip: Use vscode as your code editor and add the prettier extension with it to format your code better.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;!-- These meta tags should be here --&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;!-- Your page can't go on without a title --&gt;
    &lt;title&gt;Your Page should have a title&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;!-- Page Contents !--&gt;
    &lt;form name = "calculator"&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;input type = "text" name = "display" id = "display" disabled&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;input type = "button" name = "one" value = "1"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type = "button" name = "two" value = "2"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type = "button" name = "three" value = "3"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type = "button" name = "plus" value = "+"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;&lt;input type = "button" name = "four" value = "4"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type = "button" name = "five" value = "5"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type = "button" name = "six" value = "6"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type = "button" name = "minus" value = "-"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;input type = "button" name = "seven" value = "7"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type = "button" name = "eight" value = "8"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type = "button" name = "nine" value = "9"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type = "button" name = "multiplicatio" value = "*"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;input type = "button" name = "clear" value = "c"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type = "button" name = "0" value = "0"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type = "button" name = "equal" value = "="&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type = "button" name = "division" value = "/"&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    &lt;/form&gt;
    &lt;script src = "script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;


The Js part

The only thing I did with the Javascript is made the code formatting a lot more readable

window.onload = () =&gt; {
  const calculator = document.querySelector('form[name = "calculator"]');
  const btns = document.querySelectorAll(
    `form[name = "calculator"] table tr input[type = "button"]`
  );
  btns.forEach((button) =&gt; {
    if (button.value != "c" &amp;&amp; button.value != "=") {
      button.addEventListener("click", () =&gt; {
        calculator.display.value += button.value;
      });
    } else {
      if (button.value == "c") {
        button.addEventListener("click", () =&gt; {
          calculator.display.value = "";
        });
      } else if (button.value == "=") {
        button.addEventListener("click", () =&gt; {
          calculator.display.value = eval(calculator.display.value);
        });
      }
    }
  });
};