Javascript 对多个按钮使用js函数

我有一个音频录制器按钮，它使用以下代码通过浏览器onclick录制音频：

const button = document.querySelector('button');
    const recorder = new MicRecorder({
      bitRate: 128
    });

    button.addEventListener('click', startRecording);

    function startRecording() {
      recorder.start().then(() => {
        button.textContent = 'Stop recording';
        button.classList.toggle('btn-danger');
        button.removeEventListener('click', startRecording);
        button.addEventListener('click', stopRecording);
      }).catch((e) => {
        console.error(e);
      });
    }

    function stopRecording() {
      recorder.stop().getMp3().then(([buffer, blob]) => {
        console.log(buffer, blob);
        const file = new File(buffer, 'music.mp3', {
          type: blob.type,
          lastModified: Date.now()
        });

        const li = document.createElement('li');
        const player = new Audio(URL.createObjectURL(file));
        player.controls = true;
        li.appendChild(player);
        document.querySelector('#playlist').appendChild(li);

        button.textContent = 'Start recording';
        button.classList.toggle('btn-danger');
        button.removeEventListener('click', stopRecording);
        button.addEventListener('click', startRecording);
      }).catch((e) => {
        console.error(e);
      });
    }

我已经使用了，第一个按钮正在按预期运行：

---

现在我的问题是，如何在不为每个按钮编写代码的情况下为其余按钮应用相同的逻辑？

选择所有按钮并对所有按钮进行操作。看起来您使用的是引导，这需要jQuery，而jQuery使实现这一点更加简单，无需显式地在每个按钮上循环

下面是一个香草JS的例子

const buttons=document.queryselectoral'button'； 常量记录器=新的MicRecorder{ 比特率：128 }; buttons.foreachbutton=>button.addEventListener'click'，startRecording； 函数开始记录{ recorder.start.then=>{ buttons.forEachbutton=>{ button.textContent='停止录制'； 按钮。类列表。切换“btn-danger”； 按钮。移除EventListener“单击”，开始录制； 按钮。添加EventListener“单击”，停止录制； }; }.catch=>{ 控制台错误； }; } 功能停止记录{ recorder.stop.getMp3.then[buffer，blob]=>{ console.logbuffer，blob； const file=新文件缓冲区'music.mp3'{ 类型：blob.type， lastModified:Date.now }; const li=document.createElement'li'； const player=new AudioURL.createObjectURLfile； player.controls=true； 李娜是一名儿童选手； querySelector'playlist'。appendChildli； buttons.forEachbutton=>{ button.textContent='开始录制'； 按钮。类列表。切换“btn-danger”； 按钮。移除EventListener“单击”，停止录制； 按钮。添加EventListener“单击”，开始录制； }; }.catch=>{ 控制台错误； }; } 麦克风录音机到Mp3示例 检查web开发人员工具控制台

开始录音 麦克风录音机到Mp3示例 检查web开发人员工具控制台

开始录音 麦克风录音机到Mp3示例 检查web开发人员工具控制台

开始录音

---

改为使用const buttons=document.querySelectorAllbutton。现在您有了一个按钮节点列表。执行buttons.forEach并将事件侦听器添加到所有按钮中为什么不使用循环？@GabrielLupu，谢谢我遵循了你的方法：但没有起作用……有什么帮助吗？谢谢你的快速回复。但这不起作用：我在发布后立即修复了这个错误。查看编辑。仍不工作。我做错什么了吗？哥们，如果你看看控制台上的错误，你就能清楚地看到问题是什么。我输入了foreach而不是foreach。我修正了答案中的代码，但是帮你自己一个忙，试着多调试一下自己。这将帮助你提高你的技能。你确定问题只存在于foreach吗？我认为它不起作用。您能在JSFIDLE上编辑并显示以标记为答案吗？