Unexpected identifier at HTMLButtonElement.<anonymous>

August 16, 2022

I want to learn to calculate with the values of the select html element and in the process is a for me unrecognisable failure appeared. What I am doing wrong? Seemingly the failure is in my JavaScript. An another error which appears when I insert my code in codepen.io is "Unexpected identifier ‘HTMLSelectElement’. Expected ‘]’ to end a subscript expression." what is presumably the pretty same error message like in the chrome browser above.

<!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>Document</title>
    <script>
        window.onload = function () {
            const one = document.getElementById("1");
            const two = document.getElementById("2");
            const three = document.getElementById("3").value;
            const result = document.getElementById("span");
            const btn = document.getElementById("button");


            btn.addEventListener("click", () => {
                result.innerHTML = eval(one + two + three);
            });
        }

    </script>
</head>

<style>
    #span {
        margin: 5vh;
        border: 1px solid;
        border-color: black;
        width: 50%;
        height: 10vh;
    }

    button {
        position: absolute;
        top: 20vh;
        left: 0vh;
    }
</style>

<body>
    <select id="1">
        <option>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
    </select>
    <select id="2">
        <option>+</option>
        <option>-</option>
        <option>/</option>
        <option>*</option>
    </select>
    <select id="3">
        <options>0</options>
        <option>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
     </select>
        <span id="span"></span>
        <button id='button'>click!</button>
</body>

</html>

>Solution :

You cannot simply combine HTMLElement objects with a + operator. Like you already started with the three, you need to access their value property.

result.innerHTML = eval(one.value + two.value + three.value);

Note that by default the type of the value property is a string. If you combine strings with +, you are concatenating them, as you want to.

window.onload = function() {
  const one = document.getElementById("1");
  const two = document.getElementById("2");
  const three = document.getElementById("3");
  const result = document.getElementById("span");
  const btn = document.getElementById("button");


  btn.addEventListener("click", () => {
    result.innerHTML = eval(one.value + two.value + three.value);
  });
}

#span {
  margin: 5vh;
  border: 1px solid;
  border-color: black;
  width: 50%;
  height: 10vh;
}

button {
  position: absolute;
  top: 20vh;
  left: 0vh;
}

<select id="1">
  <option>0</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
</select>
<select id="2">
  <option>+</option>
  <option>-</option>
  <option>/</option>
  <option>*</option>
</select>
<select id="3">
  <options>0</options>
  <option>0</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
</select>
<span id="span"></span>
<button id='button'>click!</button>