₦airaland Forum

Hy, i'm making a site were i have a page that have a number of dj's and i put a button for everyone to vote. However, i don't know how to count the votes per dj and display votes
Please help

manando1:
Hy, i'm making a site were i have a page that have a number of dj's and i put a button for everyone to vote. However, i don't know how to count the votes per dj and display votes
Please help

Are you using any back end to persist your data? Or your page is built with only HTML CSS and JavaScript.

Shepherdd:
Are you using any back end to persist your data? Or your page is built with only HTML CSS and JavaScript.

my page is made with HTML CSS and JavaScript.

manando1:
my page is made with HTML CSS and JavaScript.

ok. You can get the current dj count using a Javascript query selector then you increase the count and you set the count back.

It will look something like

<form>
   <input type="text" id="dj_likes" value="0"/>
   <input type="button" onclick="increaseLike()" value="number of likes" />
</form>

const increaseLike = ( ) => {
    var like_count= parseInt(document.getElementById('dj_likes').value, 10);
    like_count= isNaN(like_count) ? 0 : value;
    like_count++;
    document.getElementById('dj_likes').value = like_count;
}

Note the likes will be zeroed on browser refresh or close. To fix this you could save the counts to local storage or implement a backend (I would recommend Express with Javascript as you are familiar with Javascript already).

Shepherdd:
ok. You can get the current dj count using a Javascript query selector then you increase the count and you set the count back.

It will look something like

<form>
   <input type="text" id="dj_likes" value="0"/>
   <input type="button" onclick="increaseLike()" value="number of likes" />
</form>

const increaseLike = ( ) => {
    var like_count= parseInt(document.getElementById('dj_likes').value, 10);
    like_count= isNaN(like_count) ? 0 : value;
    like_count++;
    document.getElementById('dj_likes').value = like_count;
}

Note the likes will be zeroed on browser refresh or close. To fix this you could save the counts to local storage or implement a backend (I would recommend Express with Javascript as you are familiar with Javascript already).

OK thanks very much Sir

manando1:
Hy, i'm making a site were i have a page that have a number of dj's and i put a button for everyone to vote. However, i don't know how to count the votes per dj and display votes
Please help

Here's what I did... I created on the HTML side
1. A drop down with the names of the DJs
2. A read-only input field for displaying the votes
3. A button which when clicked, will increment the value of the DJ votes by 1.

On the JavaScript side,
1. I created an object that contains the names of each DJ with the corresponding vote count.

I then added an event listener to the click to vote button that loops through the object and checks if the selected dj value is the same as the object. If it is, then increment it and display it.

I also added an event listener to the drop down for changing the value of the count.

You should use local storage to save the states. Lemme know if you need help with that! Cheers.

nosagold:
Here's what I did... I created on the HTML side
1. A drop down with the names of the DJs
2. A read-only input field for displaying the votes
3. A button which when clicked, will increment the value of the DJ votes by 1.

On the JavaScript side,
1. I created an object that contains the names of each DJ with the corresponding vote count.

I then added an event listener to the click to vote button that loops through the object and checks if the selected dj value is the same as the object. If it is, then increment it and display it.

I also added an event listener to the drop down for changing the value of the count.

You should use local storage to save the states. Lemme know if you need help with that! Cheers.

Here's the output...
Note: I didn't style it

nosagold:
Here's what I did... I created on the HTML side
1. A drop down with the names of the DJs
2. A read-only input field for displaying the votes
3. A button which when clicked, will increment the value of the DJ votes by 1.

On the JavaScript side,
1. I created an object that contains the names of each DJ with the corresponding vote count.


I then added an event listener to the click to vote button that loops through the object and checks if the selected dj value is the same as the object. If it is, then increment it and display it.

I also added an event listener to the drop
down for changing the value of the count.

You should use local storage to save the states. Lemme know if you need help with that! Cheers.

Wow thanks very much Sir

Creating a counter in Vue is also possible and can be done in a variety of methods. One way is to make our Vue component resemble the following;

new Vue({
el: '#app',
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
}
}
})


And our Template will look like this:

<div id="app">
{{ count }}
<div>
<button @click="increment">+</button>
</div>
</div>

@OP, all the voters are they on a single system or devices. Because I cannot comprehend how in a group of different connected devices, all other users can see the latest vote count or update it.
Also votes per user should be limited to one.

this thing needs a server side storage of votes from how I understand it.