如何在Javascript中动态更新字段？ 设置演示1 设置演示2 设置演示3

这是我的标记。我尝试只使用一个函数来分别更新

标记

示例场景：单击

设置演示1

按钮将仅更新

，该按钮具有

id=“demo1”

，但只有一个功能。

---

非常感谢您的帮助。

您可以使用以下方法。单击每个

按钮将影响相应的
p
元素


var elems=document.getElementsByClassName（'btn'）；
Array.from（elems）.forEach（v=>v.addEventListener（'click'，function（））{
var index=this.innerHTML.match（/\d+/）[0]；
var elem=document.getElementById（'demo'+索引）；
//逻辑
elem.style.color='red'；//只是一个例子
}));
设置演示1
设置演示2
设置演示3
1
2
3
您可以使用以下方法。单击每个
按钮将影响相应的
p
元素


var elems=document.getElementsByClassName（'btn'）；
Array.from（elems）.forEach（v=>v.addEventListener（'click'，function（））{
var index=this.innerHTML.match（/\d+/）[0]；
var elem=document.getElementById（'demo'+索引）；
//逻辑
elem.style.color='red'；//只是一个例子
}));
设置演示1
设置演示2
设置演示3
1
2
3
如果稍微更改标记，使每个按钮都有一个
数据目标
属性，则可以轻松完成

HTML:

如果稍微更改标记，使每个按钮都有一个
数据目标
属性，那么就可以轻松完成

HTML:

非常感谢你。你能解释一下js部分的第三行和第四行吗？非常感谢。你能解释一下js部分的第三行和第四行吗？
<button onclick="myFunction()">Set demo1</button>
<button onclick="myFunction()">Set demo2</button>
<button onclick="myFunction()">Set demo3</button>

<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>

<button onclick="myFunction()" data-target="#demo1">Set demo1</button>
<button onclick="myFunction()" data-target="#demo2">Set demo2</button>
<button onclick="myFunction()" data-target="#demo3">Set demo3</button>

function myFunction() {
    var pTag = document.getElementById(this.getAttribute('data-target'));
    pTag.textContent = "Hello world"; // whatever you would like
}