здесь (оценка сотрудников по баллам) каждый раз, когда я нажимаю на одну из кнопок, я даю 1 очко выбранному пользователю - и балл увеличивается каждый раз, когда я нажимаю на того же пользователя, тогда, если я хочу получить данные о баллах , получить автоматически обновляется в диаграмме, есть ли способ сделать это, я вставил код HTML и JAVAScript в сниппер.
// Declare Variables
var madsPoint, lindaPoint, peterPoint, resultatContainer, voteContainer
const buttons = document.querySelectorAll('button') // Henter alle elementer i dokumentet med class = "button"
// Variabler point declare and assign
var point = {
mads: 0,
linda: 0,
peter: 0
}
votes = (vote, amount) => {
// Print names for votes
var targ = document.getElementsByClassName(vote)[0].children[0]
targ.innerText = parseInt(targ.innerText) + amount
nameValg.innerText = `You voted on ${vote}`
var string = "You got a vote " + vote + '!'
resultatContainer.innerText = string
point[vote] += amount
setTimeout(()=>{evalPoints(vote)}, 50) // Vises den nedståede alarmboks efter 2 sekunder (2000 millisekunder):
}
// the first user get 30 or more point wins and an alert says no more votes
evalPoints = (vote) =>{
if (point[vote] >= 30) {
alert(`No more votes. ${vote} is the winner!`)
resetScore() // socering vil blive restet efterfølgende
}
}
// Set event handles for each button
buttons.forEach(button => {
button.addEventListener('click', e => {
// Assign data attribute to variable
let targ = e.target
let vote = targ.dataset.type
let amount = parseInt(targ.value) //konveter string (text) til tal.
e.preventDefault()
votes(vote, amount)
})
})
// Resetscore after the first user gets the 30 eller mere point
resetScore = () =>{
point = {mads: 0, linda: 0, peter: 0}
madsPoint.innerText = 0
lindaPoint.innerText = 0
peterPoint.innerText = 0
}
// når det oprindelige HTML-dokument er blevet indlæst. så vil denne begivenhed blive indlæst.
window.addEventListener('DOMContentLoaded', (event) => {
// returnerer det første element i dokumentet, der matcher den specificerede vælger.navn plus point (madspoint) osv.
madsPoint = document.querySelector('.mads .point')
lindaPoint = document.querySelector('.linda .point')
peterPoint = document.querySelector('.peter .point')
resultatContainer = document.querySelector('.resultat')
nameValg = document.querySelector('.nameValg')
var chart = document.getElementById("itChart");
// Global Options
Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontSize = 18;
Chart.defaults.global.defaultFontColor = "#777";
var itChart = new Chart(chart, {
type:"bar", // alle type diagramer.
data:{
labels:["Mads", "Linda", "Peter"],
datasets:[{
label:"Point pr. Supporter",
data:[
30, 18, 25,],
// backgroundColor
backgroundColor:[
'rgba(54, 162, 235, 0.6)',
'rgba(255, 99, 132, 0.6)',
'rgba(255, 206, 86, 0.6)',
],
borderWidth:0,
borderColor:[
'rgba(54, 162, 235, 0.6)',
'rgba(255, 99, 132, 0.6)',
'rgba(255, 206, 86, 0.6)',
],
hoverBorderWidth:2,
hoverBorderColor:"#000"
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
legend:{
display:true,
position:"top",
labels:{
fontColor:"#000"
}
},
tooltips:{
enabled:true
}
}
});
});
<html lang="da">
<head>
<meta charset="UTF-8" />
<title>PointSystem</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<h4>Her vises point. Alle hold starter med 0 point</h4>
<div class="mads">Point til Mads: <span class="point">0</span></div>
<button data-type="mads" value="1">Mindre Godt</button>
<button data-type="mads" value="3">Godt</button>
<button data-type="mads" value="5">Rigtig Godt</button>
<br>
<br>
<div class="linda">Point til Linda: <span class="point">0</span></div>
<button data-type="linda" value="1">Mindre Godt</button>
<button data-type="linda" value="3">Godt</button>
<button data-type="linda" value="5">Rigtig Godt</button>
<br>
<br>
<div class="peter">Point til Peter: <span class="point">0</span></div>
<button data-type="peter" value="1">Mindre Godt</button>
<button data-type="peter" value="3">Godt</button>
<button data-type="peter" value="5">Rigtig Godt</button>
<br>
<h4>Her vises resultat Navn på hvem fik en stemme ind</h4>
<div class="nameValg"></div>
<h4>Her vises resultat Navn for hvert stemme der kommer ind</h4>
<div class="resultat"></div>
<div style= "width: 60%;">
<canvas id="itChart" width="750" height="450"></canvas>
</body>
</html>