如何修改JS中TypeIt元素内容？按钮点击后内容叠加问题求助

问题场景 #

我正在使用TypeIt插件，想要实现点击按钮后更新同一段落内容，显示新消息。

HTML代码 #

<p id="connection-typeit"></p>
<button id="change-typeit">切换文本</button>

JS代码 #

const mytypeit = new TypeIt("#connection-typeit", {
    strings: "One",
    speed: 100,
    waitUntilVisible: true,
}).go()

const button = document.getElementById("change-typeit")

button.addEventListener("onclick", () => {
    mytypeit.type("Two")
    mytypeit.go()
})

遇到的问题：点击按钮后两段文本叠加显示为OneTwo，而非替换成Two，尝试过.destroy()和.reset()方法无效。

解决方法 #

要实现文本替换，核心是先清空原有内容，再输入新文本。同时注意修正事件监听的错误类型：

基础修正版 #

const mytypeit = new TypeIt("#connection-typeit", {
    strings: "One",
    speed: 100,
    waitUntilVisible: true,
}).go()

const button = document.getElementById("change-typeit")

// 修正事件类型为click（原代码用了onclick是错误的）
button.addEventListener("click", () => {
    // 先清空元素内容，再输入新文本
    mytypeit.empty().type("Two").go()
})

彻底重置版（清除动画队列状态） #

如果需要完全重置TypeIt的内部动画队列，可结合.reset()方法：

button.addEventListener("click", () => {
    mytypeit.reset().empty().type("Two").go()
})

关键说明 #

• .empty()：直接清空目标元素的现有文本内容，是实现替换效果的核心步骤
• 原代码中事件监听使用onclick是错误的，标准事件类型应为click
• .reset()：重置TypeIt实例的内部状态，清空未执行的动画队列，适合需要完全重置动画场景

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