JavaScriptによるHTMLカスタム属性値の変更方法は？

Question

私は現在、この持っている：

<div id="e2" 
    class="progress-bar progress-bar-danger active" 
    role="progressbar" data-transitiongoal="45"> 

をそして私は、実行時にデータ・transitiongoal値を変更したいです。これは私のために動作しません

：

document.getElementById("e2").setAttribute("data-transitiongoal", "10"); 

Answer 1

あなたは、実行時に変更することを告げ、あなたはすでに自分自身をロードでそれを変更します一つの解決策を試してみましたように、私はあなたの事を示唆しています。
これを読んで理解し、以下のコードだけをコピーしてください。

1. は、データを変更Timeout functionを設定して、関数内で、繰り返し実行を避けるためにTimeoutをクリアします。
2. ミリ秒単位で継続時間を設定し、変更する時間を指定します。 2000 - > 2秒。 0 - > immediate（秒* 1000）です。

コンソールと継続時間を確認して、変更がいつどこで発生したかを検出できます。

console.log(document.getElementById('e2')); // log actual element -> 45 
 
var SIT=window.setTimeout(function(){ 
 
    document.getElementById("e2").setAttribute("data-transitiongoal", "10"); 
 
    console.log(document.getElementById('e2')); 
 
    window.clearTimeout(SIT); 
 
},2000); // change duration 
 
// log changed element -> 10

<div id="e2" class="progress-bar progress-bar-danger active" role="progressbar" data-transitiongoal="45">Something</div>

Answer 2

おそらく、あなたはsetAttribute()動作するため、他の何か間違ったことをやっています。もう少しコードを投稿できますか？自分自身を参照してください：

var elem = document.getElementById("e2"); 
 

 
console.log(elem.getAttribute("data-transitiongoal")); 
 
elem.setAttribute("data-transitiongoal", 10); 
 
console.log(elem.getAttribute("data-transitiongoal"));

<div id="e2" class="progress-bar progress-bar-danger active" role="progressbar" data-transitiongoal="45">

Answer 3

オーケー、私は問題を是正。 私が修正した他のいくつかの問題があり、作業を開始しました。 ソリューションのおかげでありがとう、それも私を助けた。