如何修改代码实现点击ID为slide-1-next的按钮后才执行JS打字代码

你的判断是正确的，仅需要调整末尾的事件监听逻辑，同时补全原代码遗漏的变量定义避免运行报错即可实现需求，具体操作如下：

核心修改点 #

1. 删除原代码中页面加载完成自动执行type()的DOMContentLoaded事件监听器
2. 补全原代码遗漏的textLength打字进度变量，避免运行时未定义报错
3. 给ID为slide-1-next的按钮绑定点击事件，点击时触发打字效果，可额外增加状态重置逻辑避免多次点击出现文字叠加

修改后完整代码 #

// 原英文文本可保留，此处已翻译为中文
let text = '以下是翻译为中文的Lorem ipsum内容：但我必须向你解释，所有这种谴责快乐、颂扬痛苦的错误观念是如何产生的。';
// 补全原代码缺失的打字进度变量
let textLength = 0;

function type() {
    let textChar = text.charAt(textLength++);
    let paragraph = document.getElementById("typed");
    let charElement = document.createTextNode(textChar);
    paragraph.appendChild(charElement);
    if(textLength < text.length+1) {
        setTimeout('type()', 50);
    } else {
        text = '';
    }
}

// 替换原页面加载监听为按钮点击监听
document.getElementById('slide-1-next').addEventListener('click', function() {
    // 不需要多次点击重复触发的话可以删掉下面两行重置代码
    document.getElementById('typed').innerText = '';
    textLength = 0;
    type();
});

注意事项 #

• 请确保页面中确实存在ID为slide-1-next的按钮元素，否则会出现绑定失败报错
• 不需要中文打字内容的话，把text变量的赋值改回原英文内容即可

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