在 Javascript 中有更短的方法吗？（更多内容见下文）

Question

我正在制作一个计算器，我正在向数字按钮添加 eventListeners。 JS 看起来像这样：

document.addEventListener('click', e =>{
    if (e.target.matches('#num1')){
        const x = document.createElement('p');
        x.innerHTML = e.target.innerHTML;
        screen.appendChild(x)
    }
    else if (e.target.matches('#num2')){
        const x = document.createElement('p');
        x.innerHTML = e.target.innerHTML;
        screen.appendChild(x)
    } 

    else if (e.target.matches('#num3')){
        const x = document.createElement('p');
        x.innerHTML = e.target.innerHTML;
        screen.appendChild(x)
    } 
})

它工作正常，但显然有 10 个数字按钮，所以我尝试使用三元运算符使其更短，或者从这部分创建一个函数：

        const x = document.createElement('p');
        x.innerHTML = e.target.innerHTML;
        screen.appendChild(x)

但是，这种方式e.target是未定义的。任何建议表示赞赏！

标记：

<button type='button' class='btn numBtn' id='num1'>1</button>
<button type='button' class='btn numBtn' id='num2'>2</button>
<button type='button' class='btn numBtn' id='num3'>3</button>

Answer 1

检查 class 而不是 ID。

由于您不是故意插入或检索 HTML 标记，因此您还应该使用 textContent 而不是 innerHTML，它更安全、更快捷且在语义上更合适。

document.addEventListener('click', e =>{
    if (e.target.matches('.numBtn')){
        const x = document.createElement('p');
        x.textContent = e.target.textContent;
        screen.appendChild(x)
    }
})

您也可以使用 insertAdjacentHTML，尽管这与 innerHTML 有相同的问题。

document.addEventListener('click', e =>{
    if (e.target.matches('.numBtn')){
        screen.insertAdjacentHTML(
            'beforeend',
            `<p>${e.target.textContent}</p>`
        );
    }
})

在 Javascript 中有更短的方法吗？（更多内容见下文）

Is there a shorter way to do this in Javascript? (more below)

html

javascript

dom

project

calculator

在 Javascript 中有更短的方法吗？ （更多内容见下文）

Is there a shorter way to do this in Javascript? (more below)

html

javascript

dom

project

calculator

在 Javascript 中有更短的方法吗？（更多内容见下文）