'Why does my calculator show undefined when I press any button?

Why does the calculator I coded with JavaScript, HTML and CSS show undefined when I press any/every button on the calculator? I searched for some solutions but the only one I found was that using == was incorrect and would create this problem but I did not use == in any of my code. I'm pretty new to JavaScript so I'm pretty lost.

I added my HTML, JavaScript and CSS below. I do notice though with my Javascript when I change around = .value+val; (Undefined then goes away but then it just stays blank)

function clk(val){

    document.getElementById("screen").value=document.getElementById("screen").value+val;
}

function clrdisp(){
    document.getElementById("screen").value=""
}

function eql(){
    var text=document.getElementById("screen").value;
    var result=eval(text);
    document.getElementById("screen").value=result
}

body{
    background: whitesmoke;
}


#mainbody{
    margin-left: 40%;
    margin-top: 2px;
    background: linear-gradient(#eeaeca, #94bbe9);
    width: 350px;
    height: 450px;
    border: solid 6px;
    border-color: #708193;
    border-radius: 12px;
}
#screen{
    border-width: 5px;
    margin-left: 18px;
    width: 85%;
    height: 4ipx;
    margin-top: 13px;
    border-color: #708193;
    border-radius: 8px;
    font-size: xx-large;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    pointer-events: none;
}
.but{
    width: 248px;
    height: 334px;
    margin-left: 1px;
}
button{
    width: 37px;
    height: 45px;
    margin-top: 16px;
    background: linear-gradient(#22c1c3, #708193);
    margin-left: 16px;
    border: solid pink;
    border-radius: 34px;
    font-size: 24px;
    font-weight: 600;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
button:hover{
    cursor: pointer;
    background: linear-gradient(#eeaeca, #708193);
    
}

<html>
    <head>
        <title>Calculator</title>
        <link type="text/css" href="style.css" rel="stylesheet">
        <script src="javascript.js"></script>
</head>

<body>
<div id="mainbody">   
    <div>
        <input type="text" id="screen">
    </div> 
    <div class="but">
        <div class="row">
            <button onclick="clk()">C</button>
        </div>
        <div class="row">
            <button onclick="clk()">9</button>
            <button onclick="clk()">8</button>
            <button onclick="clk()">7</button>
            <button onclick="clk()">/</button>
        </div>
        <div class="row">
            <button onclick="clk()">4</button>
            <button onclick="clk()">5</button>
            <button onclick="clk()">6</button>
            <button onclick="clk()">X</button>
        </div>
        <div class="row">
            <button onclick="clk()">1</button>
            <button onclick="clk()">2</button>
            <button onclick="clk()">3</button>
            <button onclick="clk()">-</button>
        </div>
        <div class="row">
            <button onclick="clk()">0</button>
            <button onclick="clk()">.</button>
            <button onclick="clk()">=</button>
            <button onclick="clk()">+</button>
    </div>
</div>

</body>
</html>

Solution 1:^[1]

You have to add value attribute to your buttons and pass that value to clk(this.value) function onclick, and then write your own logic whatever you want to do

Please check below code snippet

function clk(val) {
  document.getElementById('screen').value =
    document.getElementById('screen').value + val;
}

function clrdisp(val) {
  document.getElementById('screen').value = '';
}

function eql(val) {
  var text = document.getElementById('screen').value;
  var result = eval(text);
  document.getElementById('screen').value = result;
}

body{
  background: whitesmoke;
}


#mainbody{
  margin-left: 40%;
  margin-top: 2px;
  background: linear-gradient(#eeaeca, #94bbe9);
  width: 350px;
  height: 450px;
  border: solid 6px;
  border-color: #708193;
  border-radius: 12px;
}
#screen{
  border-width: 5px;
  margin-left: 18px;
  width: 85%;
  height: 4ipx;
  margin-top: 13px;
  border-color: #708193;
  border-radius: 8px;
  font-size: xx-large;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  pointer-events: none;
}
.but{
  width: 248px;
  height: 334px;
  margin-left: 1px;
}
button{
  width: 37px;
  height: 45px;
  margin-top: 16px;
  background: linear-gradient(#22c1c3, #708193);
  margin-left: 16px;
  border: solid pink;
  border-radius: 34px;
  font-size: 24px;
  font-weight: 600;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
button:hover{
  cursor: pointer;
  background: linear-gradient(#eeaeca, #708193);
  
}

<html>
  <head>
    <meta charset="UTF-8">
    <title>Calculator</title>
  </head>
  <body>
  <div id="mainbody">   
      <div>
          <input type="text" id="screen">
      </div> 
      <div class="but">
          <div class="row">
              <button value="C" onclick="clrdisp(this.value)">C</button>
          </div>
          <div class="row">
              <button value="9" onclick="clk(this.value)">9</button>
              <button value="8" onclick="clk(this.value)">8</button>
              <button value="7" onclick="clk(this.value)">7</button>
              <button value="/" onclick="clk(this.value)">/</button>
          </div>
          <div class="row">
              <button value="4" onclick="clk(this.value)">4</button>
              <button value="5" onclick="clk(this.value)">5</button>
              <button value="6" onclick="clk(this.value)">6</button>
              <button value="*" onclick="clk(this.value)">*</button>
          </div>
          <div class="row">
              <button value="1" onclick="clk(this.value)">1</button>
              <button value="2" onclick="clk(this.value)">2</button>
              <button value="3" onclick="clk(this.value)">3</button>
              <button value="-" onclick="clk(this.value)">-</button>
          </div>
          <div class="row">
              <button value="0" onclick="clk(this.value)">0</button>
              <button value="." onclick="clk(this.value)">.</button>
              <button value="=" onclick="eql(this.value)">=</button>
              <button value="+" onclick="clk(this.value)">+</button>
      </div>
  </div>
  
  </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'Why does my calculator show undefined when I press any button?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]