Есть блок заданий, у каждого блока кнопка выполнено, при клике должна увеличивать прогресс на 20.
Но увеличение происходит каждой кнопкой отдельно, и счет идет заново. А я хочу суммировать прогресс от каждой кнопки в одну переменную.
const input = document.querySelector('.add')
const text = document.querySelector('.second-block')
function setProgress(percent) {
const offset = circumference - percent / 100 * circumference;
circle.style.strokeDashoffset = offset;
if (percent >= 25) {
circle.style.stroke = 'red'
}
if (percent >= 50) {
circle.style.stroke = 'yellow'
document.querySelector('.icon').src = "./img/neutral.png"
}
if (percent >= 75) {
circle.style.stroke = 'green'
document.querySelector('.icon').src = './img/smile.png'
}
document.querySelector('.persent').innerHTML = 'Current level of enjoyment ' + percent + ' %';
}
function addWishes(values = input.value) {
const WishBlock = document.createElement('div')
const btnBlock = document.createElement('div')
const delBtn = document.createElement('button')
const acceptBtn = document.createElement('button')
acceptBtn.className = 'accept-btn'
btnBlock.className = 'btn_block'
delBtn.className = 'delete-btn'
WishBlock.className = 'wishes'
WishBlock.style.visibility = 'visible'
text.appendChild(WishBlock)
WishBlock.innerHTML = values;
btnBlock.appendChild(acceptBtn)
btnBlock.appendChild(delBtn)
WishBlock.appendChild(btnBlock)
let count = 0
let btn = document.querySelectorAll('button.accept-btn')
acceptBtn.addEventListener('click', function ss(e) {
let getYes = confirm('Ready ???')
if (getYes) {
console.log(e.target, 'target');
console.log(this, 'this');
count+= 20
setProgress(count)
}
})
delBtn.addEventListener('click', () => {
text.removeChild(WishBlock)
localStorage.removeItem('item')
})
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<title>Wish List</title>
</head>
<body>
<div class="container">
<div class="first-block">
<h3 class="header">Write your wishes </h3>
<div class="inp">
<input type="text" class="add" placeholder="Write...">
</div>
<div class="circl">
<svg class="progress-ring" width="120" height="120">
<circle class="progress-ring__circle" stroke="white" stroke-width="5" cx="60" cy="60" r="52" fill="transparent"/>
</svg>
<p class="persent"></p>
<figure class="smile">
<img class="icon" src="./img/angry.png" alt="smile" >
</figure>
</div>
</div>
<div class="second-block">
<figure class="img">
<figcaption>
Andrii
</figcaption>
</figure>
</div>
</div>
<script src="./app.js"></script>
</body>
</html>
