JS：div属性のテキストをdivに変換

Question

ボタンの属性 "dataset"のテキストをdivに配置する必要があります。

var buttons=document.querySelectorAll("button"); 
 
console.log(buttons); 
 
var div=document.querySelector("div"); 
 
console.log(div); 
 

 
for (i=0; i<buttons.length;i++){ 
 
    buttons[i].addEventListener("click", function(event){ 
 
    buttons[i].dataset.text=div.innerText; 
 
    }) 
 
}

<div id="container"> </div><br> 
 
<button data-text="Button text 1">Click me!</button> 
 
<button data-text="Button text 2">Click me!</button> 
 
<button data-text="Button text 3">Click me!</button>

コンソールでの結果：

はHTMLButtonElementで未定義 のプロパティ 'データセット' を読み取ることができません。

私が間違って何をしますか？

Answer 1

HTML buttonには、属性datasetがありません。属性の値を設定するには：

buttons[i].setAttribute('data-text', 'your-string-goes-here'); 

Answer 2

あなたは属性data-textを取得し、ボタンのクリックであなたのdivにそれを添付するgetAttribute()を使用することができます。

var buttons=document.querySelectorAll("button"); 
 
var div=document.querySelector("div"); 
 

 
for (var i=0; i< buttons.length; i++){ 
 
    (function (i) { 
 
    buttons[i].addEventListener("click", function(event){ 
 
     div.innerText = buttons[i].getAttribute('data-text'); 
 
    }) 
 
    })(i); 
 
}

<div id="container"> </div><br> 
 
<button data-text="Button text 1">Click me!</button> 
 
<button data-text="Button text 2">Click me!</button> 
 
<button data-text="Button text 3">Click me!</button>