Как проверить знак умножения в JavaScript?
Я работаю над программой-калькулятором. Я хотел бы отобразить знак умножения в 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>×</button>
Использование button.textContent в слушателе создает циклическую ссылку, которая (когда-то давно) была серьезной проблемой. В любом случае он создает закрытие для каждой кнопки, в которой нет необходимости. Попробуйте заменить стрелочную функцию реальной функцией и используйте вместо нее это: function(e){ if (this.textContent == ...) ...}.
вы можете создать объект действий: const ops = { '×': multiply, '÷': divide: '+': add, '-': subtract}, где каждое является обратным вызовом. При каждом нажатии клавиши делайте Object.keys(ops).includes(currentKey);
@JacobSchneider Метод JS - это .includes, а не .contains
@CertainPerformance Мне очень жаль, element.classList имеет функцию contains, и я всегда их путаю.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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.info('× clicked');
} else {
myDiv.textContent += button.textContent;
}
});
});<div id=display></div>
<button>1</button>
<button>2</button>
<button>×</button>В качестве альтернативы, если у вас есть лоты символьных кнопок, вы можете подумать о том, чтобы сделать обратное - проверьте, является ли textContent числом, и если это так, добавьте к myDivtextContent:
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.info('non-digit button clicked');
}
});
});<div id=display></div>
<button>1</button>
<button>2</button>
<button>×</button>Альтернативой добавлению множества отдельных слушателей с закрытием каждого из них было бы использование делегирования событий в контейнере button:
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.info('non-digit button clicked');
}
});<div id=display></div>
<div id = "buttons">
<button>1</button>
<button>2</button>
<button>×</button>
</div>Вы отвечаете на его вопрос, но не видите, что он пытается сделать, очевидно, что проверка времени - неправильный путь.
В его коде написано // call on some operator function, но речь не идет о упомянутой функции, и не совсем понятно, откуда берутся два числа для умножения или где будет отображаться результат. Но он спрашивал не об этом, и, похоже, не имеет прямого отношения к проблеме, с которой он сталкивается.
Скорее всего, список символов, которые нужно отображать или не отображать, должен быть в массиве или объекте, поскольку потребуется отображать десятичные точки и, возможно, другие нецифровые символы. Или, может быть, к содержащему элементу можно добавить класс для категоризации символов, чтобы они могли отображаться или нет в зависимости от контекста. Или… ;-)
Как уже было предложено, добавление отдельных прослушивателей событий к разным типам кнопок является предпочтительным путем, однако, если это не помогает вашей лодке, сделайте следующее:
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.
}
Вам нужно добавить селекторы к этим кнопкам и иметь несколько прослушивателей событий. Один прослушиватель событий, который нацелен на значения (1–9), а затем другие для операций. Классы могут нацеливаться на несколько элементов, идентификаторы могут нацеливаться на отдельные элементы.