Unexpected identifier at HTMLButtonElement.<anonymous>-CodePudding

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.

        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);
            });
        }

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

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

<!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>
</head>

<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>

CodePudding user response：

You are trying to eval elements with values. Just put .value on each

            const one = document.getElementById("1").value;
            const two = document.getElementById("2").value;
            const three = document.getElementById("3").value;

CodePudding user response：

Here is the working example with different Math operation:

<!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 btn = document.getElementById("button");
            btn.addEventListener("click", () => {
                const one = document.getElementById("1").value;
                const two = document.getElementById("2").value;
                const three = document.getElementById("3").value;
                const result = document.getElementById("span");

                var calculation = one   two   three;
                result.innerHTML = eval(calculation);
            });
        }

    </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>

CodePudding user response：

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>