클릭시 데이터 속성 변경

-1

클릭하면 데이터 속성을 어떻게 변경할 수 있는지 궁금합니다. 내가하고 싶은 것은 값을 25 씩 증가시키는 것입니다. 그래서 진행 막대와 버튼이 있습니다.클릭시 데이터 속성 변경

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

: 지금 진행 표시 줄이 여기

(100)는 코드입니다, 나는 그것이 50, 75로 증가하고 싶은 버튼을 클릭 (25)의 값이 **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

클릭시 데이터 속성 변경

답변

관련 문제