.disable not working and .includes not working

Question

I'm making a calculator. If mainScreenArea doesn't have either one of the numbers in the numberForDecimal or numberForDecimalString, it should disable the button. I used .includes but it doesn't work it's always going straight to false even though it has numbers in it and same goes for true and it doesn't disable it

P.S: I'm aware of the repetitive code, I have the not repetitive code in a notepad

Code:

let calcKeys = document.querySelectorAll(".calc-keys span");
let mainScreenArea = document.querySelector("#screen-area-js");
let operators = ["+", "-", "*", "/"];
let calcKeyValue;
console.log(calcKeys);
console.log(mainScreenArea);

for (let i = 0; i < calcKeys.length; i++) {
  calcKeys[i].addEventListener("click", function(e) {
    console.log(e);
    calcKeyValue = this.innerHTML;
    console.log(calcKeyValue);
    switch (calcKeyValue) {
      case "C":
        mainScreenArea.innerHTML = "";
        break;
      case "7":
        mainScreenArea.innerHTML += calcKeyValue;
        break;
      case "8":
        mainScreenArea.innerHTML += calcKeyValue;
        break;
      case "9":
        mainScreenArea.innerHTML += calcKeyValue;
        break;
      case "4":
        mainScreenArea.innerHTML += calcKeyValue;
        break;
      case "5":
        mainScreenArea.innerHTML += calcKeyValue;
        break;
      case "6":
        mainScreenArea.innerHTML += calcKeyValue;
        break;
      case "1":
        mainScreenArea.innerHTML += calcKeyValue;
        break;
      case "2":
        mainScreenArea.innerHTML += calcKeyValue;
        break;
      case "3":
        mainScreenArea.innerHTML += calcKeyValue;
        break;
        //! operators case below this line
      case "+":
        if (mainScreenArea.innerHTML == "") {
          mainScreenArea.innerText = "Error, number first before operator";
          console.log("Error occured");
          setTimeout(() => {
            mainScreenArea.innerHTML = "";
          }, 2000);
        } else {
          mainScreenArea.innerHTML += calcKeyValue;
        }
        break;
      case "*":
        if (mainScreenArea.innerHTML == "") {
          mainScreenArea.innerText = "Error, number first before operator";
          console.log("Error occured");
          setTimeout(() => {
            mainScreenArea.innerHTML = "";
          }, 2000);
        } else {
          mainScreenArea.innerHTML += calcKeyValue;
        }
        break;
      case "/":
        if (mainScreenArea.innerHTML == "") {
          mainScreenArea.innerText = "Error, number first before operator";
          console.log("Error occured");
          setTimeout(() => {
            mainScreenArea.innerHTML = "";
          }, 2000);
        } else {
          mainScreenArea.innerHTML += calcKeyValue;
        }
        break;
      case "-":
        if (mainScreenArea.innerHTML == "") {
          mainScreenArea.innerText = "Error, number first before operator";
          console.log("Error occured");
          setTimeout(() => {
            mainScreenArea.innerHTML = "";
          }, 2000);
        } else {
          mainScreenArea.innerHTML += calcKeyValue;
        }
        break;
        /* ! separator */
      case ".":
        const numberForDecimal = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
        const numberForDecimalString = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]
        const dotButton = document.getElementsByClassName("dot-operator");
        if (mainScreenArea.innerHTML.includes(numberForDecimal)) {
          dotButton.disabled = false
        } else if (mainScreenArea.innerHTML.includes(numberForDecimalString)) {
          dotButton.disabled = false
        } else {
          mainScreenArea.innerHTML += calcKeyValue
          dotButton.disabled = true
        }
    }
  });
}

<!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" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,100&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="calc.css" />
  <title>JS calculator</title>
</head>

<body>
  <div class="main-container">
    <div class="header-texts">
      <h1>JS Calculator</h1>
    </div>
    <div class="screen-area-css" id="screen-area-js"></div>
    <div class="calc-keys">
      <span class="">7</span>
      <span class="">8</span>
      <span class="">9</span>
      <span class="">+</span>
      <span class="">4</span>
      <span class="">5</span>
      <span class="">6</span>
      <span class="">-</span>
      <span class="">1</span>
      <span class="">2</span>
      <span class="">3</span>
      <span class="">*</span>
      <span class="">0</span>
      <span class="">/</span>
      <span class="dot-operator">.</span>
      <span class="">C</span>
      <!-- <span class=""></span> -->
    </div>
  </div>
  <script src="calc.js"></script>
</body>

</html>

Specific code of block with problem:

case ".":
                const numberForDecimal = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
                const numberForDecimalString = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]
                const dotButton = document.getElementsByClassName("dot-operator");
                if (mainScreenArea.innerHTML.includes(numberForDecimal)) {
                dotButton.disabled = false
                } else if (mainScreenArea.innerHTML.includes(numberForDecimalString)) {
                dotButton.disabled = false
                } else {
                mainScreenArea.innerHTML += calcKeyValue
                dotButton.disabled = true
                }
            }
        });

The [**String.prototype.includes**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes) method performs a case-sensitive search to determine whether one string may be found within another string, returning `true` or `false` as appropriate. — Lain, Oct 24 '22 at 13:40
Does this answer your question? [multiple conditions for JavaScript .includes() method](https://stackoverflow.com/questions/37896484/multiple-conditions-for-javascript-includes-method) — Lain, Oct 24 '22 at 13:42
I tried doing that, I stored the result on variables and used in if statement to see if true or false — yeet, Oct 24 '22 at 13:50
`['1', '2', '3', '4'].some(value => 'test4'.includes(value))` => **true** `['1', '2', '3'].some(value => 'test4'.includes(value))` => **false**. — JavaScript, Oct 24 '22 at 14:01
Disabled does not work because you are using `getElementsByClassName` which returns a [collection](https://stackoverflow.com/questions/36089874/how-to-iterate-through-the-getelementbyclassname-return). — Lain, Oct 24 '22 at 14:05

.disable not working and .includes not working

0 Answers0