Question

<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>

这是我的标记。我试图只使用一个函数来单独更新<p>标签。示例场景：点击Set demo1按钮只会更新<p> id="demo1"，{strong}只有一个功能。非常感谢帮助。

Answer 1

您可以使用以下方法。点击每个HAVING count(JOB) = 2 or count(JOB) = 4会影响相应的button元素。

＆＃13;

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'+index);
      // logic
      elem.style.color = 'red';  // just an example
    }));

＆＃13;

Answer 2

如果稍微更改标记以使每个按钮都具有<button class='btn'>Set demo1</button> <button class='btn'>Set demo2</button> <button class='btn'>Set demo3</button> <p id="demo1">1</p> <p id="demo2">2</p> <p id="demo3">3</p>属性，则可以轻松完成。

HTML：

data-target

JS

<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>

如何在javascript中动态更新字段？

2 个答案: