why eval() is not evaluating two values in javascript

i am new to coding, attended few boot-camps & now trying to make a calculator in javascript. Problem arises when i try to evaluate 2 values when = is clicked. Please sensei guide me. i tried few work around but they didn't worked, watched few youtube videos but felt like i am copy pasting some one else code in my project so to improve i need to do stuff on my own or at least know where the problem is.

var buttons = document.querySelectorAll('button')
var result = document.getElementById('screen')


function number() {
  for (num of buttons) {
    num.addEventListener('click', (e) => {
      buttonText = e.target.innerText
      console.log(buttonText)
      result.value += buttonText

      if (buttonText === '=') {
        result.value = eval('result.value')

      } else if (buttonText === 'x') {
        buttonText = '*'

      } else if (buttonText === 'C') {
        result.value = ''

      }

    })

  }
}
number()

body {
  font-family: 'sans-serif', Tahoma, Geneva, Verdana;
}

.container {
  text-align: center;
}

input {
  font-size: 1.3rem;
  margin-bottom: .5rem;
  padding: .2rem;
  text-align: right;
}

input:focus {
  border: none;
}

table {
  margin: auto;
}

button {
  width: 3.38rem;
  height: 2rem;
  border: none;
  font-size: 16px;
  cursor: pointer;
  background-color: aliceblue;
}

button:hover {
  background-color: #d4c2c2;
}

td:hover {
  background-color: #d4c2c2;
}

<!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="style.css" />
  <script src="https://kit.fontawesome.com/c77dc29510.js" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container">
    <h1>Calculator</h1>

    <input type="text" value="" id="screen" />

    <table>
      <tr>
        <td colspan="2" style="background-color: aliceblue;"><button> <i class="fas fa-backspace"</i> </button></td>
        <td><button>C</button></td>
        <td><button>%</button></td>
      </tr>
      <tr>
        <td><button>7</button></td>
        <td><button>8</button></td>
        <td><button>9</button></td>
        <td><button>x</button></td>
      </tr>
      <tr>
        <td><button>4</button></td>
        <td><button>5</button></td>
        <td><button>6</button></td>
        <td><button>-</button></td>
      </tr>
      <tr>
        <td><button>1</button></td>
        <td><button>2</button></td>
        <td><button>3</button></td>
        <td><button>+</button></td>
      </tr>
      <td><button>0</button></td>
      <td><button>.</button></td>
      <td><button>/</button></td>
      <td><button>=</button></td>
    </table>
  </div>

</body>
<script src="calculator.js"></script>

</html>

Solution

As has been mentioned in comments: You're evaluating the string 'result.value', instead of the contents of result.value.

As well as that, you're adding the symbol = to the "screen", which makes the evaluation fail. I made a fix below.

var buttons = document.querySelectorAll('button')
var result = document.getElementById('screen')


function number() {
  for (num of buttons) {
    num.addEventListener('click', (e) => {
      buttonText = e.target.innerText
      console.log(buttonText)

      if (buttonText === '=') {
        result.value = eval(result.value)
      } else if (buttonText === 'x') {
        result.value = '*'
      } else if (buttonText === 'C') {
        result.value = ''
      } else { // I added this part, and removed it from above the ifs
        result.value += buttonText
      }

    })

  }
}
number()

body {
  font-family: 'sans-serif', Tahoma, Geneva, Verdana;
}

.container {
  text-align: center;
}

input {
  font-size: 1.3rem;
  margin-bottom: .5rem;
  padding: .2rem;
  text-align: right;
}

input:focus {
  border: none;
}

table {
  margin: auto;
}

button {
  width: 3.38rem;
  height: 2rem;
  border: none;
  font-size: 16px;
  cursor: pointer;
  background-color: aliceblue;
}

button:hover {
  background-color: #d4c2c2;
}

td:hover {
  background-color: #d4c2c2;
}

<!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="style.css" />
  <script src="https://kit.fontawesome.com/c77dc29510.js" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container">
    <h1>Calculator</h1>

    <input type="text" value="" id="screen" />

    <table>
      <tr>
        <td colspan="2" style="background-color: aliceblue;"><button> <i class="fas fa-backspace"</i> </button></td>
        <td><button>C</button></td>
        <td><button>%</button></td>
      </tr>
      <tr>
        <td><button>7</button></td>
        <td><button>8</button></td>
        <td><button>9</button></td>
        <td><button>x</button></td>
      </tr>
      <tr>
        <td><button>4</button></td>
        <td><button>5</button></td>
        <td><button>6</button></td>
        <td><button>-</button></td>
      </tr>
      <tr>
        <td><button>1</button></td>
        <td><button>2</button></td>
        <td><button>3</button></td>
        <td><button>+</button></td>
      </tr>
      <td><button>0</button></td>
      <td><button>.</button></td>
      <td><button>/</button></td>
      <td><button>=</button></td>
    </table>
  </div>

</body>
<script src="calculator.js"></script>

</html>