Как объединить число в div?

Question

Я делаю калькулятор с HTML, CSS и JS. В настоящее время я хочу, чтобы число объединялось с выводом каждый раз, когда я нажимаю цифровую кнопку. Кто-нибудь знает, как это сделать, потому что мой код не работает. Консоль продолжает возвращать output.concat is not a function

const numbers = document.querySelectorAll("[data-number]");

numbers.forEach(number => {
    number.addEventListener("click", () => {
        output.concat(number);
    })
})

<div>
    <div data-output></div>
    <button data-clear>C</button>
    <button data-operator>/</button>
    <button data-number>7</button>
    <button data-number>8</button>
    <button data-number>9</button>
    <button data-operator>*</button>
    <button data-number>4</button>
    <button data-number>5</button>
    <button data-number>6</button>
    <button data-operator>-</button>
    <button data-number>1</button>
    <button data-number>2</button>
    <button data-number>3</button>
    <button data-operator>+</button>
    <button data-number>0</button>
    <button data-number>.</button>
    <button data-equals>=</button>
  </div>

Answer 1

Вам нужно определить output, так как в настоящее время он не определен. Сделайте это так:

const output = document.querySelector("[data-output]");

И тогда вы должны обращаться с ним как с элементом, а не как со строкой. То же самое и с переменной number: это не строка (и не число), а элемент кнопки. Поэтому прочтите и добавьте контент, используя свойство textContent для обоих задействованных элементов:

output.textContent += number.textContent;

NB: у вас есть ошибка в вашей первой строке. Требуется закрытие ] в селекторе:

const numbers = document.querySelectorAll("[data-number]");

Код:

const output = document.querySelector("[data-output]");
const numbers = document.querySelectorAll("[data-number]");

numbers.forEach(number => {
    number.addEventListener("click", () => {
        output.textContent += number.textContent;
    })
})

<div>
    <div data-output></div>
    <button data-clear>C</button>
    <button data-operator>/</button>
    <button data-number>7</button>
    <button data-number>8</button>
    <button data-number>9</button>
    <button data-operator>*</button>
    <button data-number>4</button>
    <button data-number>5</button>
    <button data-number>6</button>
    <button data-operator>-</button>
    <button data-number>1</button>
    <button data-number>2</button>
    <button data-number>3</button>
    <button data-operator>+</button>
    <button data-number>0</button>
    <button data-number>.</button>
    <button data-equals>=</button>
  </div>

Answer 2

Я, вероятно, не буду использовать этот подход, но, основываясь на вашем коде, вы, вероятно, захотите что-то вроде

const numbers = document.querySelectorAll("[data-number]");
const operator = document.querySelectorAll("[data-operator]");
const clear = document.getElementById("clear");

const output = document.getElementById("output");
resu=""
numbers.forEach(number => {
    number.addEventListener("click", () => {
         resu+=number.textContent
      output.textContent=resu
    })
})
 operator.forEach(op => {
    op.addEventListener("click", () => {
     if(output.textContent.charAt(output.textContent.length-1)===op.textContent) return
     else {resu+=op.textContent
  output.textContent=resu}
    })
})
clear.addEventListener("click",()=>{
  output.textContent=""
})

<div>
  <div data-output></div>
  <button data-clear id="clear">C</button>
  <button data-operator>/</button>
  <button data-number>7</button>
  <button data-number>8</button>
  <button data-number>9</button>
  <button data-operator>*</button>
  <button data-number>4</button>
  <button data-number>5</button>
  <button data-number>6</button>
  <button data-operator>-</button>
  <button data-number>1</button>
  <button data-number>2</button>
  <button data-number>3</button>
  <button data-operator>+</button>
  <button data-number>0</button>
  <button data-number>.</button>
  <button data-equals>=</button>
</div>
<div id="output">#######</div>