Как проверить наличие знака умножения в JavaScript?

Question

Я работаю над программой калькулятора. Я хотел бы отображать знак умножения в HTML, но также и иметь возможность определять в JavaScript, был ли нажат знак умножения, чтобы он не добавлялся на экран. Это относится и к другим символам. Я пытался использовать значение UNICODE, но если вы нажмете (например):

1,

, затем 2,

затем знак умножения,

на экране появляется знак умножения (чего я не хочу). Есть идеи?

const myDiv = document.querySelector('#display');
const myButtons = document.querySelectorAll('button');
myButtons.forEach((button) => {
    button.addEventListener('click', () => {
        if(button.textContent == 0x000D7) {
            // call on some operator function
        } else {
            myDiv.textContent += button.textContent;
        }
    });
});

<div id=display></div>
<button>1</button>
<button>2</button>
<button>&times;</button>



    

Answer 1

Как уже было предложено, добавление отдельных слушателей событий к различным типам кнопок является предпочтительным способом, однако, если это не сработает, выполните следующие действия:

let input = "";
const callbacks = {
    '×': multiply,
    '÷': divide,
    '+': add, 
    '-': subtract
};

const btnHandler = function(e) {
    if (callbacks[this.value])
        callbacks[this.value]();
    else
        input += this.value;

    // do whatever else you need to do, like condition checking etc.
}

Answer 2

0x000D7 разрешается в число , 215, которое не является textContent кнопки ×. Скорее просто проверьте, является ли textContent ×:

const myDiv = document.querySelector('#display');
const myButtons = document.querySelectorAll('button');
myButtons.forEach((button) => {
    button.addEventListener('click', () => {
        if(button.textContent === '×') {
            // call on some operator function
            console.log('× clicked');
        } else {
            myDiv.textContent += button.textContent;
        }
    });
});

<div id=display></div>
<button>1</button>
<button>2</button>
<button>&times;</button>

В качестве альтернативы, если у вас есть лоты символьных кнопок, вы можете рассмотреть возможность сделать обратное - проверить, является ли textContent число, и, если оно есть, добавить к myDiv. textContent

const myDiv = document.querySelector('#display');
const myButtons = document.querySelectorAll('button');
myButtons.forEach((button) => {
  button.addEventListener('click', () => {
    if (button.textContent.match(/^\d+$/)) {
      myDiv.textContent += button.textContent;
    } else {
      console.log('non-digit button clicked');
    }
  });
});

<div id=display></div>
<button>1</button>
<button>2</button>
<button>&times;</button>

Альтернативой добавлению большого количества отдельных слушателей с закрытием над каждым будет использование делегирования события в контейнере button s:

const myDiv = document.querySelector('#display');
document.querySelector('#buttons').addEventListener('click', ({ target }) => {
  if (!target.matches('button')) return;
  if (target.textContent.match(/^\d+$/)) {
    myDiv.textContent += target.textContent;
  } else {
    console.log('non-digit button clicked');
  }
});

<div id=display></div>
<div id="buttons">
  <button>1</button>
  <button>2</button>
  <button>&times;</button>
</div>