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>タグを更新するだけで1機能を使用しようとしています。 シナリオ例：Set demo1ボタンをクリックすると、1つのつのみの機能でid="demo1"を持っていますが<p>更新します。 ヘルプをいただければ幸いです。

Answer 1

次のアプローチを使用することができます。各buttonをクリックすると、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>

Answer 2

各ボタンはdata-target属性を持つようにあなたが少しあなたのマークアップを変更した場合、それは簡単に行うことができます。

HTML：

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

JS

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