На что поменять querySelector и можно ли ввести data-action

Вопрос-ответ JavaScript
2

Вот такая разметка

<div class="screen" maxlength="10">
	<p class="out">0</p>
</div>

и такой js код сработают

const out = document.querySelector(".out");

Мне не понятна причина сомнений и вопроса. В целом почти всегда (99% случаев) достаточно ввести уникальный css класс и использовать его для получения ссылки на DOM элемент.

Это хорошая и правильная идея. Она “разводит” в стороны несвязанные концепции: то что отображается пользователю не влияет на операцию. Хоть вставляй картинки или текст в кнопки, с моделированием операции через data- все продолжит работать.

Вот как она примерно реализуется: https://jsfiddle.net/xd95uwop/

Разметка

<button data-action="ac" class="knop ac pink">AC</button>
<button data-action="del" class="knop delete pink">&lt;</button>
<button data-action="%" class="knop percent pink">%</button>
<button data-action="/" class="knop division pink">÷</button>
<!-- ... -->
<button data-action="1" class="knop one">1</button>
<button data-action="2" class="knop two">2</button>
<button data-action="3" class="knop three">3</button>

Код:

[...document.querySelectorAll('[data-action]')].forEach((actionNode) => {
	actionNode.addEventListener('click', () => {
  	const operation = actionNode.dataset.action
    console.log('operation', operation)
  })
})

Обрати внимание что тип значения actionNode.dataset.action всегда будет строковым, даже если в датф-аттрибут записана цифра.

Код не обязательно переписывать, можно интегрировать кусок который отвечает за доступ к дата аттрибутам и интегрировать в районе const key = event.target.textContent;. По сути мой пример делает тоже самое, доставая значение для key из дата-аттрибута.