クリック時にデータ属性を変更する

-1

クリック時にデータ属性をどのように変更できるのだろうかと思っていました。私がしたいことは、値を25だけ増やすことです。そのため、プログレスバーとボタンがあります。今プログレスバーは、私は私はそれが50にインクリメントしたいボタンをクリックすると、25の値を持つ75、ここでは100クリック時にデータ属性を変更する

は、コードは次のとおりです。

let button = document.getElementById("btn"); 
 
let bar = document.getElementById("progress-bar"); 
 

 
button.addEventListener('click', function(){ 
 
    console.log("you clicked the btn"); 
 
});

body { 
 
    max-width: 1200px; 
 
    margin: 0 auto; 
 
    padding: 10px; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
     flex-wrap: wrap; 
 
    margin-top: 3em; 
 
} 
 

 
progress { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
      appearance: none; 
 
    width: 100%; 
 
    height: 20px; 
 
} 
 

 
progress::-webkit-progress-bar { 
 
    background-color: #ccc; 
 
    width: 100%; 
 
} 
 

 
progress::-webkit-progress-value { 
 
    background-color: orange !important; 
 
} 
 

 
button { 
 
    margin-top: 2em; 
 
    background: black; 
 
    color: white; 
 
    border: none; 
 
    padding: .5em 2em; 
 
} 
 
button:hover { 
 
    background: #1a1a1a; 
 
}

<body> 
 
    <h2>Quiz Progress</h2> 
 
    <progress max='100' value='25'></progress> 
 
    <button id='btn'>Next</button> 
 
</body>

出典

2017-10-18 ThomasBrushel

**value**プロパティはprogress要素を使用できます。進行中の要素に割り当てられていないIDにアクセスしようとしていました。

let button = document.getElementById("btn"); 
 
let bar = document.getElementById("progress-bar"); 
 

 
button.addEventListener('click', function(){ 
 
    //console.log("you clicked the btn"); 
 
    if(bar.value>=100) 
 
    { 
 
    bar.value=100; 
 
    } 
 
    else 
 
    { 
 
    bar.value+=25; 
 
    } 
 
    
 
});

body { 
 
    max-width: 1200px; 
 
    margin: 0 auto; 
 
    padding: 10px; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
     flex-wrap: wrap; 
 
    margin-top: 3em; 
 
} 
 

 
progress { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
      appearance: none; 
 
    width: 100%; 
 
    height: 20px; 
 
} 
 

 
progress::-webkit-progress-bar { 
 
    background-color: #ccc; 
 
    width: 100%; 
 
} 
 

 
progress::-webkit-progress-value { 
 
    background-color: orange !important; 
 
} 
 

 
button { 
 
    margin-top: 2em; 
 
    background: black; 
 
    color: white; 
 
    border: none; 
 
    padding: .5em 2em; 
 
} 
 
button:hover { 
 
    background: #1a1a1a; 
 
}

<body> 
 
    <h2>Quiz Progress</h2> 
 
    <progress id="progress-bar" max='100' value='25'></progress> 
 
    <button id='btn'>Next</button> 
 
</body>

出典

2017-10-18 21:08:20

、これは多くのことを私を助けて、あなたの応答のためにどうもありがとうございます！ – ThomasBrushel

クリック時にデータ属性を変更する

答えて

関連する問題