我的TypeScript按钮不响应用户输入，点击后无反应如何解决？

• 事件类型绑定错误：当前给input1绑定的是submit事件，该事件仅属于<form>表单元素，如果你input1是普通按钮，绑定submit事件自然不会触发。
• 未阻止表单默认提交行为：如果input1确实是表单元素，触发submit后浏览器会默认执行页面刷新/跳转逻辑，导致你修改DOM的代码还没生效页面就重载了，看不到预期变化。
• 元素不存在/ID拼写错误：需要确认页面中是否存在id="input1"、id="ausgabe"的元素，ID大小写、拼写完全匹配，否则getElementById会返回null，事件绑定失败或者赋值时报错。

• 打开浏览器控制台（F12切换到Console标签），查看是否有报错：如果出现Cannot read property 'addEventListener' of null说明input1元素不存在，出现Cannot set property 'innerHTML' of null说明ausgabe元素不存在。
• 确认input1的元素类型：如果是<button>、<input type="button">这类按钮元素，应该绑定click事件而非submit事件。
• 如果input1是表单，在事件处理函数第一行加console.log('事件触发了')，点击提交按钮后看控制台是否有打印，如果打印后页面马上刷新，就是默认提交行为未被阻止。

情况1：input1为普通按钮 #

将绑定的submit事件改为click事件即可，修改后代码如下：

function test(event)
{
    document.getElementById('ausgabe').innerHTML = 'test';
}

document.addEventListener("DOMContentLoaded", (event) => {
    // submit事件改为click事件
    document.getElementById("input1").addEventListener("click", (event) => {
        test(event);
    })
})

情况2：input1为

表单元素 #

调用event.preventDefault()阻止表单默认提交刷新行为即可，修改后代码如下：

function test(event)
{
    document.getElementById('ausgabe').innerHTML = 'test';
}

document.addEventListener("DOMContentLoaded", (event) => {
    document.getElementById("input1").addEventListener("submit", (event) => {
        // 阻止表单默认提交刷新行为
        event.preventDefault();
        test(event);
    })
})

内容的提问来源于stack exchange，提问作者Butzti