JS，想知道怎么简化这段代码

复制

复制

需求: 这能不能优化一下让所有按钮点击事件调动一个方法来返回不同结果，html是否同时需要更正写法来配合js达到那种效果。

【以下回答由 GPT 生成】

问题标题: JavaScript优化-简化按钮点击事件和修正HTML写法

问题标签: javascript, html

问题内容:

<input type="text" value="1234" id="One" />

<p>复制</p>
<input type="text" value="5678" id="Two" />

<p>复制</p>

<p></p>
<p>需求:</p>
<p>这能不能优化一下，让所有按钮点击事件调用同一个方法返回不同的结果？同时，是否需要修改HTML的写法来配合JavaScript实现这种效果。</p>

要实现让所有按钮点击事件调用同一个方法返回不同的结果，可以使用以下步骤：

  1. 首先，在HTML文件中引入一个名为script.js的JavaScript文件。
<script src="script.js"></script>
  1. 在script.js文件中，编写一个函数 copyText 来处理复制操作。
function copyText() {
  // 取得所有的输入框元素
  var inputs = document.querySelectorAll('input[type="text"]');

  // 遍历每个输入框，并将其值复制到下一个元素
  for (var i = 0; i < inputs.length - 1; i++) {
    inputs[i + 1].value = inputs[i].value;
  }
}
  1. 修改HTML，给复制按钮添加一个点击事件监听器，当点击按钮时调用 copyText 函数。
<input type="text" value="1234" id="One" />

<p>复制</p>
<input type="text" value="5678" id="Two" />

<p>复制</p>

<p></p>
<p>需求:<br />      
这能不能优化一下，让所有按钮点击事件调用同一个方法来返回不同的结果？HTML是否同时需要更正写法来配合JavaScript达到那种效果。</p>

<button onclick="copyText()">复制按钮</button>

现在，当点击复制按钮时，会调用 copyText 函数，将第一个输入框的值复制到下一个输入框，以此类推。这样可以使用同一个方法实现不同按钮的点击事件。

如果有多个复制按钮，可以使用不同的id给每个按钮添加点击事件监听器，并在JavaScript中根据id来执行相应的逻辑。

综上所述，以上就是优化按钮点击事件和修正HTML写法的具体解决方案。



【相关推荐】



如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

根据事件冒泡可以在外层标签添加点击事件，然后捕获点击的标签，再根据标签拿到对应的值


<body>
    <div id="div1">
        <input type="text" value="1234" id="One" />
        <a id="copy1">复制</a>
        <input type="text" value="5678" id="Two" />
        <a id="copy2">复制</a>
    </div>
    <script>
        let ele = document.getElementById("div1");
        ele.addEventListener('click', e => {
            console.log(e.target.id);
            let id = e.target.id;
            let value = '';
            switch (id) {
                case 'copy1': value = document.getElementById('One').value; break;
                case 'copy2': value = document.getElementById('Two').value; break;
                default: break;
            }
            console.log(value);
            return value;
        });
    </script>
</body>