Why does the calculator I coded with Javascript, HTML and CSS show undefined when I press any/every-CodePudding

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 >
        <div >
            <button onclick="clk()">C</button>
        </div>
        <div >
            <button onclick="clk()">9</button>
            <button onclick="clk()">8</button>
            <button onclick="clk()">7</button>
            <button onclick="clk()">/</button>
        </div>
        <div >
            <button onclick="clk()">4</button>
            <button onclick="clk()">5</button>
            <button onclick="clk()">6</button>
            <button onclick="clk()">X</button>
        </div>
        <div >
            <button onclick="clk()">1</button>
            <button onclick="clk()">2</button>
            <button onclick="clk()">3</button>
            <button onclick="clk()">-</button>
        </div>
        <div >
            <button onclick="clk()">0</button>
            <button onclick="clk()">.</button>
            <button onclick="clk()">=</button>
            <button onclick="clk()"> </button>
    </div>
</div>

</body>
</html>

CodePudding user response：

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) {
  console.log('onclick', 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>
    <meta charset="UTF-8">
    <title>Calculator</title>
    <script src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
  <div id="mainbody">   
      <div>
          <input type="text" id="screen">
      </div> 
      <div >
          <div >
              <button value="C" onclick="clk(this.value)">C</button>
          </div>
          <div >
              <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 >
              <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="X" onclick="clk(this.value)">X</button>
          </div>
          <div >
              <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 >
              <button value="0" onclick="clk(this.value)">0</button>
              <button value="." onclick="clk(this.value)">.</button>
              <button value="=" onclick="clk(this.value)">=</button>
              <button value=" " onclick="clk(this.value)"> </button>
      </div>
  </div>
  
  </body>
</html>

CodePudding user response：

Thats because you don't pass val variable when executing clk() function from button.

You need to either execute the function like this: clk([number]) or make a function with sender argument.