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

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"但只有一种功能。 非常感谢您的帮助。

Answer 1

您可以使用以下方法。单击每个按钮都会影响相应的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'+index);
      // logic
      elem.style.color = 'red';  // just an example
    }));

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