DIG Digital Corner
Alles wat je altijd al over computers, hardware, software, internet en elektronische gadgets had willen weten, maar niet op Tweakers.net durft te vragen.
Hi,
Voor een website moet ik van elke keuze (11 in totaal) die geselecteerd word de waarde hiervan optellen, iemand die weet waarmee ik dit het makkelijkste kan doen? jQuery?
Als voorbeeld: hier zie je dus de waardes rechts optellen als je een speler selecteert op een positie
Hoop op jullie hulp!
Voor een website moet ik van elke keuze (11 in totaal) die geselecteerd word de waarde hiervan optellen, iemand die weet waarmee ik dit het makkelijkste kan doen? jQuery?
Als voorbeeld: hier zie je dus de waardes rechts optellen als je een speler selecteert op een positie
Hoop op jullie hulp!
Die heb ik nog niet want ik moet het nog gaan maken, maar het is niks simpelers dan verschillende select form's met wat keuze's, alleen die waardes moeten dus daaronder bij elkaar opgeteld worden live.
Je weet niet hoe je twee (drie, vier, vijf, ..., elf) waardes bij elkaar kunt optellen?quote:Op vrijdag 20 april 2018 19:49 schreef Nickskuh het volgende:
Die heb ik nog niet want ik moet het nog gaan maken, maar het is niks simpelers dan verschillende select form's met wat keuze's, alleen die waardes moeten dus daaronder bij elkaar opgeteld worden live.
Als je de waardes selecteert dat ze live updaten ja.. dus dat het de hele tijd aanpast zonder dat de pagina herladen is. Hoe kan ik dit het makkelijkste doen dan?quote:
[..]
Je weet niet hoe je twee (drie, vier, vijf, ..., elf) waardes bij elkaar kunt optellen?
clientside via onchange of een vergelijkbaar DOM event.quote:
[..]
Als je de waardes selecteert dat ze live updaten ja.. dus dat het de hele tijd aanpast zonder dat de pagina herladen is. Hoe kan ik dit het makkelijkste doen dan?
Je zou ook eens kunnen kijken naar Vue.js. Dat is een JS framework wat gemaakt is om dit soort reactiviteit simpel uit te voeren.
Wat je er mee kunt doen is een data object maken met je verschillende scores er in. Met een computed property kun je deze automatisch bij elkaar optellen.
Vervolgens koppel je je data input elementen en toon je de berekende score op het scherm.
Vue neemt alle reactiviteit op zich. Zodra je de score in een van de inputs veranderd zal de uitslag live mee verspringen.
Zelf hoef je je dus niet meer druk te maken over het luisteren naar DOM events en alle inputs en uitslagen steeds zelf te updaten.
Hier kun je dit voorbeeldje zelf proberen.
Als je meer wilt leren kan ik je de videos van VueCasts aanbevelen.
Wat je er mee kunt doen is een data object maken met je verschillende scores er in. Met een computed property kun je deze automatisch bij elkaar optellen.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var vue = new Vue({ el : "#app", data : { points1: 0, points2: 0, points3: 0, }, computed { totalScore : function () { return points1 + points2 + points3; } } }); |
Vervolgens koppel je je data input elementen en toon je de berekende score op het scherm.
| 1 2 3 4 5 | <input type="number" v-model.number="points1"> <input type="number" v-model.number="points2"> <input type="number" v-model.number="points3"> Total score: {{ totalScore }} |
Vue neemt alle reactiviteit op zich. Zodra je de score in een van de inputs veranderd zal de uitslag live mee verspringen.
Zelf hoef je je dus niet meer druk te maken over het luisteren naar DOM events en alle inputs en uitslagen steeds zelf te updaten.
Hier kun je dit voorbeeldje zelf proberen.
Als je meer wilt leren kan ik je de videos van VueCasts aanbevelen.
Whether or not you can become great at something, you can always become better.
And one day you'll wake up and find out how good you actually became, having transcended whatever limits you might have thought you couldn't pass.
Neil Degrasse Tyson
And one day you'll wake up and find out how good you actually became, having transcended whatever limits you might have thought you couldn't pass.
Neil Degrasse Tyson
bloated. Voor zoiets simpels heb je echt geen framework nodig.quote:
Je zou ook eens kunnen kijken naar Vue.js. Dat is een JS framework wat gemaakt is om dit soort reactiviteit simpel uit te voeren.
....
Zelf hoef je je dus niet meer druk te maken over het luisteren naar DOM events en alle inputs en uitslagen steeds zelf te updaten.
Als het alleen om dit kleine beetje interactiviteit op één pagina gaat ben ik het met je eens dat je het met pure JavaScript alleen prima af kunt.quote:
[..]
bloated. Voor zoiets simpels heb je echt geen framework nodig.
Wil OP echter meer interactiviteit in de front-end stoppen dan levert het al snel een voordeel op om Vue een hoop van het werk uit handen te laten nemen.
Qua grootte is Vue gelijk aan jQuery dus zo zwaar is die ook weer niet.
Ik geef het maar aan als suggestie, het is aan OP om te bepalen of dit zinvol is voor zijn project om Vue te gebruiken.
Whether or not you can become great at something, you can always become better.
And one day you'll wake up and find out how good you actually became, having transcended whatever limits you might have thought you couldn't pass.
Neil Degrasse Tyson
And one day you'll wake up and find out how good you actually became, having transcended whatever limits you might have thought you couldn't pass.
Neil Degrasse Tyson
|
|
