Создавая систему для выставления баллов 3 сотрудникам, каждый раз, нажимая на одну из кнопок, я даю 1 балл выбранному пользователю. - PullRequest
Новая
       0

Создавая систему для выставления баллов 3 сотрудникам, каждый раз, нажимая на одну из кнопок, я даю 1 балл выбранному пользователю.

1 голос
/ 21 марта 2020 

// 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>

Я новичок в программировании, и я не могу понять, что я делаю неправильно в этом: я пытаюсь создать систему, чтобы дать точку 3 сотрудникам (оцените сотрудников по баллам, сотрудник получает наибольшее количество баллов, чтобы получить подарок) каждый раз, когда я нажимаю на одну из кнопок, я даю 1 очко выбранному пользователю - и балл увеличивается каждый раз, когда я нажимаю на тот же пользователь, затем, если я хочу дать оценку другому пользователю, я просто нажимаю на другого пользователя. но мой код не работает -

Вот мой код HTML и JavaScript код - 

// Declare Variables
var madsPoint, lindaPoint, peterPoint, resultatContainer, voteContainer, stemPaa2Container

const buttons = document.querySelectorAll('button')

// Variabler point declare and assign
var point = {   
    mads: 0,
    linda: 0,
    peter: 0
  }

  function votes(vote) {

 // Print names for votes
 var targ = document.getElementsByClassName(vote)[0].children[0]
 targ.innerText = parseInt(targ.innerText) + 1
 nameValg.innerText = `You voted on ${vote}`
 
 var str = "Yo got a vote " + vote + '!' 
    resultatContainer.innerText = str 
    
    point[vote] += 1
    setTimeout(()=>{evalPoints()}, 100)
}


//  the first user get 10 point wins and an alert says no more votes 
const evalPoints = () =>{
 if (point.mads=== 10) {
 alert('No more votes. Mads is the winner!')
 resetScore()
 } else if (point.linda === 10) {
 alert('No more votes. Linda is the winner!')
 resetScore()
 } else if (point.peter === 10){
  alert('No more votes. Peter is the winner!')
  resetScore()
 }
}

// Set event handles for each button
buttons.forEach(button => {
    button.addEventListener('click', e => {
      // Assign data attribute to variable
      let vote = e.target.dataset.type 
      e.preventDefault()
      votes(vote)
    })
    })


// Reset score after the first user gets the 10 point
const resetScore = () =>{
    point = {mads: 0, linda: 0, peter: 0}
  
    madsPoint.innerText = 0
    lindaPoint.innerText = 0
    peterPoint.innerText = 0
  }

window.addEventListener('DOMContentLoaded', (event) => {
    madsPoint = document.querySelector('.mads .point')
    lindaPoint = document.querySelector('.linda .point')
    peterPoint = document.querySelector('.peter .point')
    resultatContainer = document.querySelector('.resultat')
    nameValg = document.querySelector('.nameValg')
   });
<!DOCTYPE html>
<html lang="da">
  <head>
    <meta charset="UTF-8" />
    <title>PointSystem</title>
  </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">En point til Mads</button>
    <button data-type="mads">To point til Mads</button>
    <button data-type="mads">Tre point til Mads</button>
    <br>
    <br>
    <div class="linda">Point til Linda: <span class="point">0</span></div>
    <button data-type="linda">En point til Linda</button>
    <button data-type="linda">To point til Linda</button>
    <button data-type="linda">Tre point til Linda</button>
    <br>
    <br>
    <div class="peter">Point til Peter: <span class="point">0</span></div>
    <button data-type="peter">En point til Peter</button>
    <button data-type="peter">To point til Peter</button>
    <button data-type="peter">Tre point til Peter</button>
    <br>
  
    <h4>Her vises resultat hvem fik en stemme ind</h4>
    <div class="nameValg"></div>
  
    <h4>Her vises resultat for hvert stemme der kommer ind</h4>
    <div class="resultat"></div>

    <h4>plus alle point</h4>
    <div class="pluspoint"></div>
    <button data-type="pluspoint">Plus alle point</button>
    </body>
<script src="IT.js"></script>
</html>

1 Ответ

0 голосов
/ 22 марта 2020

Я думаю, вы можете немного реорганизовать свой код и обернуть свои querySelector в прослушиватель событий onload, потому что (по крайней мере для меня) все переменные не определены. Вам следует подождать, пока содержимое (имена классов и т. Д. c.) Уже будет отображено в DOM.

Затем вам нужно обернуть проверку точек в функцию, которая вызывается в конце назначения точки. В противном случае проверка будет вызвана только при начальной загрузке файла JS. Я поместил оценку точки в функцию evalPoints и добавил ее в конце функции назначения точки, чтобы проверка запускалась каждый раз, когда вы добавляете точку.

У вас также, похоже, нет resetScore объявлено где угодно, поэтому я также добавил это. 

// const er variabler som declare en værdi men kan ikke assignes igen.
var madsPoint, lindaPoint, peterPoint, resultatContainer, madsValgContainer, lindaValgContainer, peterValgContainer

const buttons = document.querySelectorAll('button')

// Point variabler som declare en værdi
var point = {   
    mads: 0,
    linda: 0,
    peter: 0
  }

  function stem(madsValg) {

 // Print navne stemer
 
  var targ = document.getElementsByClassName(madsValg)[0].children[0]
 
  targ.innerText = parseInt(targ.innerText) + 1
  
  nameValg.innerText = `Du stemt på ${madsValg}`
  
  var str = "Det Du fik en stemme " + madsValg + '!' 
     resultatContainer.innerText = str 
     
     point[madsValg] += 1
     setTimeout(()=>{evalPoints()}, 100)
}

const evalPoints = () =>{
  if (point.mads === 3) {
  alert('Du vandt!')
  resetScore()
  } else if (point.linda === 3) {
  alert('Du vandt')
  resetScore()
  } else if (point.peter === 3){
   alert('Du vandt')
   resetScore()
  }
}
// if hvis spiller vinder 3 gang så kommer der en alert at Spiller vandt 

// Sæt begivenhedshåndterere til hver knap
buttons.forEach(button => {
button.addEventListener('click', e => {
  // Tildel dataattribut til variabel
  let madsValg = e.target.dataset.type 
  e.preventDefault()
  // Vælge Spillervalg til  SSP = Sten Saks Papir Spil
  stem(madsValg)
})
})

const resetScore = () =>{
  point = {mads: 0, linda: 0, peter: 0}

  madsPoint.innerText = 0
  lindaPoint.innerText = 0
  peterPoint.innerText = 0
}

window.addEventListener('DOMContentLoaded', (event) => {
 madsPoint = document.querySelector('.mads .point')
 lindaPoint = document.querySelector('.linda .point')
 peterPoint = document.querySelector('.peter .point')
 resultatContainer = document.querySelector('.resultat')
 nameValg = document.querySelector('.nameValg')
});
<!DOCTYPE html>
<html lang="da">
  <head>
    <meta charset="UTF-8" />
    <title>PointSystem</title>
  </head>
<body>
    <h4>Her vises point. Alle hold starter med 0 point</h4> 
    <div class="mads">Mads Point: <span class="point">0</span></div>
    <div class="linda">Linda Point: <span class="point">0</span></div>
    <div class="peter">Peter Point: <span class="point">0</span></div>

    <h4>Valg hvem du vil stemme på</h4> 
    <button data-type="mads">Mads</button>
    <button data-type="linda">Linda</button>
    <button data-type="peter">Peter</button>

    <div class="nameValg"></div>
  
    <h4>Her vises resultat for hvert stemme der kommer ind</h4>
    <div class="resultat"></div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...