We Keep Coding

how to get value from select without refresh?

I made a CGPA-SGPA calculator and I cannot get the value with refresh.
When I refresh and check the value it get feed
but not getting value without refresh.
var credit_1001 = document.querySelector('#credit_1001')
var grade_1001 = document.querySelector('#grade_1001')
var credit_1002 = document.querySelector('#credit_1002')
var grade_1002 = document.querySelector('#grade_1002')
var credit_1003 = document.querySelector('#credit_1003')
var grade_1003 = document.querySelector('#grade_1003')
var credit_1004 = document.querySelector('#credit_1004')
var grade_1004 = document.querySelector('#grade_1004')
var credit_1008 = document.querySelector('#credit_1008')
var grade_1008 = document.querySelector('#grade_1008')
var credit_1009 = document.querySelector('#credit_1009')
var grade_1009 = document.querySelector('#grade_1009')
//btn and result S1
var btn_check = document.querySelector('#check_s1')
var result_s1 = document.querySelector('#result_s1')
//btn click S1
var total_s1_credit = parseInt(credit_1001.value) + parseInt(credit_1002.value) + parseInt(credit_1003.value) + parseInt(credit_1004.value) + parseInt(credit_1008.value) + parseInt(credit_1009.value)
var got_s1_marks = parseInt(credit_1001.value) * parseInt(grade_1001.value) + parseInt(credit_1002.value) * parseInt(grade_1002.value) + parseInt(credit_1003.value) * parseInt(grade_1003.value) + parseInt(credit_1004.value) * parseInt(grade_1004.value) + parseInt(credit_1008.value) * parseInt(grade_1008.value) + parseInt(credit_1009.value) * parseInt(grade_1009.value)
btn_check.addEventListener('click', () => {
result_s1.innerText = " S1 SGPA " + got_s1_marks / total_s1_credit
console.log("S1 Total Credit = " + total_s1_credit)
console.log("S1 Got Marks = " + got_s1_marks)
console.log("S1 SGPA = " + result_s1.innerText)
})

You need to get the values for your calculation inside of the click handler, right now you get them before the click, and then use (the old values) when the click happens
btn_check.addEventListener('click', () => {
//btn click S1
var total_s1_credit = parseInt(credit_1001.value) + parseInt(credit_1002.value) + parseInt(credit_1003.value) + parseInt(credit_1004.value) + parseInt(credit_1008.value) + parseInt(credit_1009.value)
var got_s1_marks = parseInt(credit_1001.value) * parseInt(grade_1001.value) + parseInt(credit_1002.value) * parseInt(grade_1002.value) + parseInt(credit_1003.value) * parseInt(grade_1003.value) + parseInt(credit_1004.value) * parseInt(grade_1004.value) + parseInt(credit_1008.value) * parseInt(grade_1008.value) + parseInt(credit_1009.value) * parseInt(grade_1009.value)
result_s1.innerText = " S1 SGPA " + got_s1_marks / total_s1_credit
console.log("S1 Total Credit = " + total_s1_credit)
console.log("S1 Got Marks = " + got_s1_marks)
console.log("S1 SGPA = " + result_s1.innerText)
})

Troubleshoot with JS

I have been looking over a JS and HTML for my friend, because it doesn't work, and I have spent 5 hours on it, and I can't stil find the error...
When you test the code in jsfiddle, try to click on "Bountie", it should take HP from you, but it doesn't, it does nothing...
Im sorry for the long code.
Demo
/*
Variables
Started at 10:57 1/2-16
Finished at unknown
*/
//Level variables
var level = 1;
var gon = 0;
var xp = 0;
var sp = 3;
//Item variables
var items = 0;
var key = 0;
var gem = 0;
var stone = 0;
//Token system
var token = 0;
var heatf = 0;
var heltf = 0;
//Quest system
var bountieqp = 0;
var mapqp = 10;
var hellqp = 10;
var heavenqp = 10;
var underworldqp = 10;
//Quest tracker
var bountieqtracker = 0;
var mapqtracker = 0;
var hellqtracker = 0;
var heavenqtracker = 0;
var underworldqtracker = 0;
//Predium varables
var giftbox = 1;
//Combats variables
var str = 0;
var dex = 0;
var intt = 0;
var armor = 4;
var dmg = 5;
var hp = 300;
var hpren = 3;
var mana = 60;
var manaren = 1;
//Addon variables
var xpbonus = 1;
var xponkill = 0;
var mf = 1;
var souls = 0;
//Prestige system
var prelevel = 1;
var ppiece = 0;
//Map tracker variables
var bountietracker = 0;
var maptracker = 0;
var gmaptracker = 0;
var helltracker = 0;
var heaventracker = 0;
var underworldtracker = 0;
//Quest system updates
document.getElementById('hellqp').innerHTML = hellqp;
document.getElementById('heavenqp').innerHTML = heavenqp;
document.getElementById('bountieqp').innerHTML = bountieqp;
document.getElementById('mapqp').innerHTML = mapqp;
document.getElementById('underworldqp').innerHTML = underworldqp;
//Tracker system updates
document.getElementById('maptracker').innerHTML = maptracker;
document.getElementById('underworldtracker').innerHTML = underworldtracker;
document.getElementById('gmaptracker').innerHTML = gmaptracker;
document.getElementById('bountietracker').innerHTML = bountietracker;
document.getElementById('helltracker').innerHTML = helltracker;
document.getElementById('heaventracker').innerHTML = heaventracker;
//Quest tracker system updates
document.getElementById('mapqtracker').innerHTML = mapqtracker;
document.getElementById('underworldqtracker').innerHTML = underworldqtracker;
document.getElementById('bountieqtracker').innerHTML = bountieqtracker;
document.getElementById('hellqtracker').innerHTML = hellqtracker;
document.getElementById('heavenqtracker').innerHTML = heavenqtracker;
//Stats system updates
document.getElementById('sp').innerHTML = sp;
document.getElementById('dex').innerHTML = dex;
document.getElementById('str').innerHTML = str;
document.getElementById('intt').innerHTML = intt;
document.getElementById('dmg').innerHTML = dmg;
document.getElementById('hp').innerHTML = hp;
document.getElementById('mana').innerHTML = mana;
document.getElementById('armor').innerHTML = armor;
document.getElementById('hpren').innerHTML = hpren;
document.getElementById('manaren').innerHTML = manaren;
//Addon system updates
document.getElementById('giftbox').innerHTML = giftbox;
document.getElementById('souls').innerHTML = souls;
document.getElementById('xponkill').innerHTML = xponkill;
document.getElementById('xpbonus').innerHTML = xpbonus;
document.getElementById('mf').innerHTML = mf;
//Items system updates
document.getElementById('key').innerHTML = key;
document.getElementById('stone').innerHTML = stone;
document.getElementById('gem').innerHTML = gem;
document.getElementById('items').innerHTML = items;
document.getElementById('token').innerHTML = token;
document.getElementById('heatf').innerHTML = heatf;
document.getElementById('heltf').innerHTML = heltf;
//Level system updates
document.getElementById('level').innerHTML = level;
document.getElementById('gon').innerHTML = gon;
document.getElementById('xp').innerHTML = xp;
/*
Test selection
*/
/*
Predium Addons
Started at 14:10 1/2-16
Finished at
*/
function openBox() {
var boxrand = Math.floor(Math.random() * (13 - 1 + 1)) + 1;
var gembrand = Math.floor(Math.random() * (5 - 1 + 1)) + 1;
var itemsbrand = Math.floor(Math.random() * (100 - 1 + 1)) + 1;
var keybrand = Math.floor(Math.random() * (20 - 1 + 1)) + 1;
var stonebrand = Math.floor(Math.random() * (10 - 1 + 1)) + 1;
var bountieqpbrand = Math.floor(Math.random() * (9 - 1 + 1)) + 1;
var mapqpbrand = Math.floor(Math.random() * (9 - 1 + 1)) + 1;
var hellqpbrand = Math.floor(Math.random() * (9 - 1 + 1)) + 1;
var heavenqpbrand = Math.floor(Math.random() * (9 - 1 + 1)) + 1;
var underworldqpbrand = Math.floor(Math.random() * (9 - 1 + 1)) + 1;
var heltfrand = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
var heabrand = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
var xpbrand = Math.floor(Math.random() * (500000 - 1 + 1)) + 1;
if (boxrand == 1) {
gem = gem + gembrand;
document.getElementById('gem').innerHTML = gem;
} else if (boxrand == 2) {
items = items + itemsbrand;
document.getElementById('items').innerHTML = items;
}else if (boxrand == 3) {
key = key + keybrand;
document.getElementById('key').innerHTML = key;
}else if (boxrand == 4) {
stone = stone + stonebrand;
document.getElementById('stone').innerHTML = stone;
}else if (boxrand == 5) {
bountieqp = bountieqp + bountieqpbrand;
document.getElementById('bountieqp').innerHTML = bountieqp;
}else if (boxrand == 6) {
mapqp = mapqp + mapqpbrand;
document.getElementById('mapqp').innerHTML = mapqp;
}else if (boxrand == 7) {
hellqp = hellqp + hellqpbrand;
document.getElementById('hellqp').innerHTML = hellqp;
} else if (boxrand == 8) {
heavenqp = heavenqp + heavenqpbrand;
document.getElementById('heavenqp').innerHTML = heavenqp;
} else if (boxrand == 9) {
underworldqp = underworldqp + underworldqpbrand;
document.getElementById('underworldqp').innerHTML = underworldqp;
} else if(boxrand == 10) {
heltf = heltf + heltfbrand;
document.getElementById('heltf').innerHTML = heltf;
} else if(boxrand == 11) {
heatf = heatf + heatfbrand;
document.getElementById('heatf').innerHTML = heatf;
} else if(boxrand == 12) {
xp = xp + xpbrand;
document.getElementById('xp').innerHTML = xp;
} else if (boxrand == 13) {
ppiece = ppiece + ppiecebrand;
document.getElementById('ppiece').innerHTML = ppiece;
}
}
function gbChecker() {
if (giftbox >= 1) {
openBox();
giftbox = giftbox - 1;
document.getElementById('giftbox').innerHTML = giftbox;
} else {
alert('You dont have a Mystery Box!');
}
}
/*
Level
Started at 11:46 1/2-16
Finished at
*/
function levelUp() {
var levelCost = Math.floor(200 * Math.pow(1.1,level));
if (xp >= levelCost){
level = level + 1;
xp = xp - levelCost;
sp = sp + 3;
document.getElementById('level').innerHTML = level;
document.getElementById('xp').innerHTML = xp;
document.getElementById('sp').innerHTML = sp;
}
var nextlevelCost = Math.floor(200 * Math.pow(1.1,level));
document.getElementById('levelCost').innerHTML = nextlevelCost;
}
function gonUp() {
var gonCost = Math.floor(200 * Math.pow(1.1,gon));
if (xp >= gonCost) {
gon = gon + 1;
xp = xp - gonCost;
sp = sp + 1;
document.getElementById('gon').innerHTML = gon;
document.getElementById('xp').innerHTML = xp;
document.getElementById('sp').innerHTML = sp;
}
var nextgonCost = Math.floor(200 * Math.pow(1.1,gon));
document.getElementById('gonCost').innerHTML = nextgonCost;
}
function levelChecker() {
if (level == 120) {
gonUp();
} else {
levelUp();
}
}
/*
Addon Makers
Started at 11:34 1/2-16
Finished at 12:42 1/2-16
*/
function pp256Maker() {
var pp256rand = Math.floor(Math.random() * (256 - 1 + 1)) + 1;
if (pp256rand == 1) {
ppiece = ppiece + (1 * mf);
document.getElementById('ppiece').innerHTML = ppiece;
}
}
function gb256Maker() {
var gb256rand = Math.floor(Math.random() * (256 - 1 + 1)) + 1;
if (gb256rand == 1) {
giftbox = giftbox + 1;
document.getElementById('giftbox').innerHTML = giftbox;
}
}
function pp128Maker() {
var pp128rand = Math.floor(Math.random() * (128 - 1 + 1)) + 1;
if (pp128rand == 1) {
ppiece = ppiece + (1 * mf);
document.getElementById('ppiece').innerHTML = ppiece;
}
}
function gb128Maker() {
var gb128rand = Math.floor(Math.random() * (128 - 1 + 1)) + 1;
if (gb128rand == 1) {
giftbox = giftbox + 1;
document.getElementById('giftbox').innerHTML = giftbox;
}
}
function pp25Maker() {
var pp25rand = Math.floor(Math.random() * (25 - 1 + 1)) + 1;
if (pp25rand == 1) {
ppiece = ppiece + (1 * mf);
document.getElementById('ppiece').innerHTML = ppiece;
}
}
function gb64Maker() {
var gb64rand = Math.floor(Math.random() * (64 - 1 + 1)) + 1;
if (gb64rand == 1) {
giftbox = giftbox + 1;
document.getElementById('giftbox').innerHTML = giftbox;
}
}
function pp17Maker() {
var pp17rand = Math.floor(Math.random() * (17 - 1 + 1)) + 1;
if (pp17rand == 1) {
ppiece = ppiece + (1 * mf);
document.getElementById('ppiece').innerHTML = ppiece;
}
}
function gb32Maker() {
var gb32rand = Math.floor(Math.random() * (32 - 1 + 1)) + 1;
if (gb32rand == 1) {
giftbox = giftbox + 1;
document.getElementById('giftbox').innerHTML = giftbox;
}
}
function pp5Maker() {
var pp5rand = Math.floor(Math.random() * (5 - 1 + 1)) + 1;
if (pp5rand == 1) {
ppiece = ppiece + (1 * mf);
document.getElementById('ppiece').innerHTML = ppiece;
}
}
function gb10Maker() {
var gb10rand = Math.floor(Math.random() * (10 - 1 + 1)) + 1;
if (gb10rand == 1) {
giftbox = giftbox + 1;
document.getElementById('giftbox').innerHTML = giftbox;
}
}
function gb16Maker() {
var gb16rand = Math.floor(Math.random() * (16 - 1 + 1)) + 1;
if (gb16rand == 1) {
giftbox = giftbox + 1;
document.getElementById('giftbox').innerHTML = giftbox;
}
}
function gb5Maker() {
var gb5rand = Math.floor(Math.random() * (5 - 1 + 1)) + 1;
if (gb5rand == 1) {
giftbox = giftbox + 1;
document.getElementById('giftbox').innerHTML = giftbox;
}
}
/*
Quest Makers
Started at 12:43 1/2-16
Finished at 12:47 1/2-16
*/
function bountieqpMaker() {
var bountieqprand = Math.floor(Math.random() * (10 - 1 + 1)) + 1;
if (bountieqprand == 1) {
bountieqp = bountieqp + (1 * mf);
document.getElementById('bountieqp').innerHTML = bountieqp;
}
}
function mapqpMaker() {
var mapqprand = Math.floor(Math.random() * (10 - 1 + 1)) + 1;
if (mapqprand == 1) {
map = map + (1 * mf);
document.getElementById('mapqp').innerHTML = mapqp;
}
}
function hellqpMaker() {
var bountieqprand = Math.floor(Math.random() * (10 - 1 + 1)) + 1;
if (hellqprand == 1) {
hell = hell + (1 * mf);
document.getElementById('hellqp').innerHTML = hellqp;
}
}
function heavenqpMaker() {
var heavenqprand = Math.floor(Math.random() * (10 - 1 + 1)) + 1;
if (heavenqprand == 1) {
heavenqp = heavenqp + (1 * mf);
document.getElementById('heavenqp').innerHTML = heavenqp;
}
}
function underworldqpMaker() {
var underworldqprand = Math.floor(Math.random() * (10 - 1 + 1)) + 1;
if (underworldqprand == 1) {
underworldqp = underworldqp + (1 * mf);
document.getElementById('underworldqp').innerHTML = underworldqp;
}
}
/*
Req items Maker
Started at 12:44 1/2-16
Finished at 13:17 1/2-16
*/
function keyMaker() {
var keyrand = Math.floor(Math.random() * (10 - 1 + 1)) + 1;
if (keyrand == 1) {
key = key + (1 * mf);
document.getElementById('key').innerHTML = key;
}
}
function stoneMaker(){
var stonerand = Math.floor(Math.random() * (5 - 1 + 1)) + 1;
if (stonerand == 1) {
stone = stone + (1 * mf);
document.getElementById('stone').innerHTML = stone;
}
}
/*
Quest completing
Started at 13:17 1/2-16
Finished at 13:45 1/2-16
*/
function bouqChecker(){
if (bountieqp >= 10) {
bouQuest();
} else {
alert('You dont have 10 Bountie quest pieces!. You only have ' + bountieqp + '!');
}
}
function mapqChecker(){
if (mapqp >= 10) {
mapQuest();
} else {
alert('You dont have 10 Map quest pieces!. You only have ' + mapqp + '!');
}
}
function hellqChecker(){
if (hellqp >= 10) {
hellQuest();
} else {
alert('You dont have 10 Hell quest pieces!. You only have ' + hellqp + '!');
}
}
function heavenqChecker(){
if(heavenqp >= 10){
heavenQuest();
}else{
alert('You dont have 10 Heaven quest pieces!. You only have ' + heavenqp + '!');
}
}
function underworldqChecker(){
if(underworldqp >= 10){
underworldQuest();
}else{
alert('You dont have 10 Underworld quest pieces!. You only have ' + underworldqp + '!');
}
}
function bouQuest(){
var bouqxprand = Math.floor(Math.random() * (1000 - 200 + 200)) + 1;
xp = xp + ((bouqxprand * xpbonus) * prelevel);
bountieqp = bountieqp - 10;
gb128Maker();
document.getElementById('xp').innerHTML = xp;
document.getElementById('bountieqp').innerHTML = bountieqp;
}
function mapQuest(){
var mapqxprand = Math.floor(Math.random() * (4500 - 850 + 850)) + 1;
xp = xp + ((mapqxprand * xpbonus) * prelevel);
mapqp = mapqp - 10;
gb64Maker();
document.getElementById('xp').innerHTML = xp;
document.getElementById('mapqp').innerHTML = mapqp;
}
function hellQuest(){
var hellqxprand = Math.floor(Math.random() * (250000 - 50000 + 50000)) + 1;
xp = xp + ((hellqxprand * xpbonus) * prelevel);
hellqp = hellqp - 10;
gb16Maker();
document.getElementById('xp').innerHTML = xp;
document.getElementById('hellqp').innerHTML = hellqp;
}
function heavenQuest(){
var heavenqxprand = Math.floor(Math.random() * (250000 - 50000 + 50000)) + 1;
xp = xp + ((heavenqxprand * xpbonus) * prelevel);
heavenqp = heavenqp - 10;
gb16Maker();
document.getElementById('xp').innerHTML = xp;
document.getElementById('heavenqp').innerHTML = heavenqp;
}
function underworldQuest(){
var underworldqxprand = Math.floor(Math.random() * (1250000 - 500000 + 500000)) + 1;
xp = xp + ((underworldqxprand * xpbonus) * prelevel);
underworldqp = underworldqp - 10;
gb5Maker();
document.getElementById('xp').innerHTML = xp;
document.getElementById('underworldqp').innerHTML = underworldqp;
}
/*
Bountie Map
Started at 11:27 1/2-16
Finished at 13:18 1/2-16
*/
function doBountie() {
var bountieCost = Math.floor(50 * Math.pow(1.006,bountietracker));
var bouxprand = Math.floor(Math.random() * (200 - 20 + 20)) + 1;
var bouitemrand = Math.floor(Math.random() * (5 - 1 + 1)) + 1;
if (dmg + armor >= bountieCost) {
hp = hp - 1;
xp = xp + (((bouxprand + xponkill) * xpbonus) * prelevel);
items = items + (bouitemrand * mf);
bountietracker = bountietracker + 1;
keyMaker();
bountieqpMaker();
pp256Maker();
gb256Maker();
document.getElementById('hp').innerHTML = hp;
document.getElementById('hp2').innerHTML = hp;
document.getElementById('xp').innerHTML = xp;
document.getElementById('items').innerHTML = items;
} else if (hp >= bountieCost) {
hp = hp - (bountieCost - (armor + dmg));
xp = xp + (((bouxprand + xponkill) * xpbonus) * prelevel);
items = items + (bouitemrand* mf);
bountietracker = bountietracker + 1;
keyMaker();
bountieqpMaker();
pp256Maker();
gb256Maker();
document.getElementById('hp').innerHTML = hp;
document.getElementById('xp').innerHTML = xp;
document.getElementById('hp2').innerHTML = hp;
document.getElementById('items').innerHTML = items;
}else{
alert('You dont have enough HP to complete a bountie. Bountie costs ' + bountieCost + ' and you only have ' + hp + '!');
}
var nextbountieCost = Math.floor(50 * Math.pow(1.006,bountietracker));
document.getElementById('bountieCost').innerHTML = nextbountieCost;
}
/*
Map Map
Started at 12:37 1/2-16
Finished at
*/
function doMap(){
var mapCost = Math.floor(300 * Math.pow(1.006,maptracker));
var mapxprand = Math.floor(Math.random() * (850 - 200 + 200)) + 1;
var mapitemrand = Math.floor(Math.random() * (12 - 4 + 4)) + 1;
if(dmg + armor >= mapCost){
hp = hp - 1;
xp = xp + (((mapxprand + xponkill) * xpbonus) * prelevel);
items = items + (mapitemrand * mf);
keyMaker();
gb128Maker();
mapqpMaker();
document.getElementById('hp').innerHTML = hp;
document.getElementById('xp').innerHTML = xp;
document.getElementById('hp2').innerHTML = hp;
document.getElementById('items').innerHTML = items;
}else if(hp >= mapCost){
hp = hp - (mapCost - (armor + dmg));
xp = xp + (((mapxprand + xponkill) * xpbonus) * prelevel);
items = items + (mapitemrand * mf);
keyMaker();
gb128Maker();
mapqpMaker();
document.getElementById('hp').innerHTML = hp;
document.getElementById('xp').innerHTML = xp;
document.getElementById('hp2').innerHTML = hp;
document.getElementById('items').innerHTML = items;
}else if(hp =< mapCost){
alert('You dont have enough HP to complete a Map. Map costs ' + mapCost + ' and you only have ' + hp + '!');
}else{
alert('You dont have a key to open a Map!');
}
var nextmapCost = Math.floor(300 * Math.pow(1.006,maptracker));
document.getElementById('mapCost').innerHTML = nextmapCost;
}

When I click the bountie button, I get the error Uncaught ReferenceError: levelChecker is not defined.
Also, on Line #582
Uncaught SyntaxError: Unexpected token <
if(hp =< mapCost) should be if(hp <= mapCost)
It looks like there are a few Javascript errors in your script. I recommend using Google Chrome's Inspection tool for stepping through your Javascript, using breakpoints to see the data and errors.

Single jQuery function to manipulate elements with the same ".class" independently

I want to duplicate the "voting-bar-container" div that carries jQuery functionality with it. However, because each duplicate carries with it the same ".classes" (and my jQuery Selectors target those classes), the jQuery is executed on each duplicate regardless of which "voting-bar-container" div is being interacted with.
I want the jQuery events to be executed ONLY on the elements being interacted with.
I believe the answer lies in my choice of Selectors as I know I don't need to duplicate my jQuery code for each duplicate HTML element with different "ID's".
https://jsfiddle.net/STEEZENS/aqd87b2d/
OR
Here is my HTML & jQuery:
<div class="voting-bar-container">
<button class="upvote">
<span class="upvote-counter">0</span>
</button>
<div class="vote-meter">
<div class="upvotes"></div>
<div class="downvotes"></div>
</div>
<button class="downvote">
<span class="downvote-counter">0</span>
</button>
</div>
jQuery:
$(document).ready(function () {
var $downvoteCount = 0;
var $upvoteCount = 0;
$(".upvote").click(function () {
$upvoteCount++;
$(".upvote-counter").text(" " + $upvoteCount);
var $totalVoteCount = $upvoteCount + $downvoteCount;
var $upvoteProportion = Math.round(($upvoteCount / $totalVoteCount) * 100);
var $downvoteProportion = Math.round(($downvoteCount / $totalVoteCount) * 100);
if (($upvoteProportion + $downvoteProportion) > 100) {
$(".upvotes").width(($upvoteProportion - 0.5) + "%");
$(".downvotes").width(($downvoteProportion - 0.5) + "%");
} else {
$(".upvotes").width($upvoteProportion + "%");
$(".downvotes").width($downvoteProportion + "%");
}
});
$(".downvote").click(function () {
$downvoteCount++;
$(".downvote-counter").text(" " + $downvoteCount);
var $totalVoteCount = $upvoteCount + $downvoteCount;
var $upvoteProportion = Math.round(($upvoteCount / $totalVoteCount) * 100);
var $downvoteProportion = Math.round(($downvoteCount / $totalVoteCount) * 100);
if (($upvoteProportion + $downvoteProportion) > 100) {
$(".upvotes").width(($upvoteProportion - 0.5) + "%");
$(".downvotes").width(($downvoteProportion - 0.5) + "%");
} else {
$(".upvotes").width($upvoteProportion + "%");
$(".downvotes").width($downvoteProportion + "%");
}
});
});

you need to use $(this)
$(this).find(".upvote-counter")
instead of
$(".upvote-counter")
while you asked for (*What I want is for the jQuery events to be executed ONLY on the elements being interacted with) .. your code should be something like this .. you will need to use .closest() as well >> to get the downvote div related with the upvote div and reverse
$(document).ready(function () {
var $downvoteCount = 0;
var $upvoteCount = 0;
$(".upvote").click(function () {
$upvoteCount++;
$(this).find(".upvote-counter").text(" " + $upvoteCount);
var $totalVoteCount = $upvoteCount + $downvoteCount;
var $upvoteProportion = Math.round(($upvoteCount / $totalVoteCount) * 100);
var $downvoteProportion = Math.round(($downvoteCount / $totalVoteCount) * 100);
if (($upvoteProportion + $downvoteProportion) > 100) {
$(this).width(($upvoteProportion - 0.5) + "%");
$(this).closest('voting-bar-container').find(".downvotes").width(($downvoteProportion - 0.5) + "%");
} else {
$(this).width($upvoteProportion + "%");
$(this).closest('voting-bar-container').width($downvoteProportion + "%");
}
});
$(".downvote").click(function () {
$downvoteCount++;
$(this).find(".downvote-counter").text(" " + $downvoteCount);
var $totalVoteCount = $upvoteCount + $downvoteCount;
var $upvoteProportion = Math.round(($upvoteCount / $totalVoteCount) * 100);
var $downvoteProportion = Math.round(($downvoteCount / $totalVoteCount) * 100);
if (($upvoteProportion + $downvoteProportion) > 100) {
$(this).closest('voting-bar-container').find(".upvotes").width(($upvoteProportion - 0.5) + "%");
$(this).width(($downvoteProportion - 0.5) + "%");
} else {
$(this).closest('voting-bar-container').find(".upvotes").width($upvoteProportion + "%");
$(this).width($downvoteProportion + "%");
}
});
});
DEMO
Note: this answer upon to your request .. you will need to work on it a little bit to reach a style you want

You need to be traversing the DOM to find the elements in question relative to the element that was clicked, instead of globally.
First, as you have multiple elements that have upvotes associated with them, the value of this and it's iteration needs to occur based on the existing upvote value of the element that is closest to upvote. Please observe below:
$(".upvote").click(function () {
var upvote_counter = $(this).find('span'),
downvote_counter = $(this).parent().find('.downvote-counter'),
upvotes = $(this).parent().find('.upvotes'),
downvotes = $(this).parent().find('.downvotes'),
$upvoteCount = upvote_counter.text(),
$downvoteCount = downvote_counter.text();
$upvoteCount++;
upvote_counter.text($upvoteCount);
var $totalVoteCount = $upvoteCount + $downvoteCount;
var $upvoteProportion = Math.round(($upvoteCount / $totalVoteCount) * 100);
var $downvoteProportion = Math.round(($downvoteCount / $totalVoteCount) * 100);
if (($upvoteProportion + $downvoteProportion) > 100) {
upvotes.width(($upvoteProportion - 0.5) + "%");
downvotes..width(($downvoteProportion - 0.5) + "%");
} else {
upvotes.width($upvoteProportion + "%");
downvotes.width($downvoteProportion + "%");
}
});
This will allow you to properly select the elements that are closest associated with the upvote element that is clicked. Do something similar for the downvote function.

js (node.js) while loop not working

My node.js code is below.
Basically I have a buffer called searchRes and first I get some values from it.
It is supposed to loop round "results - 1" times.
It is looping.
It prints the first 3 bits of information totally correctly and then after that (4th onwards) is always the same as the 3rd one.
I have no idea why.
results = 20;
var sSize = searchRes.slice(8,16);
sSize = parseInt(sSize,16);
lols = new Array();
while(num <= results -1 ){
var cur = num + 1;
var sres=0;
for(var i in lols) { sres += lols[i]; }
if (num == 0){
var clanRes = searchRes.slice(0, 128 + (sSize * 2));
var cLen = clanRes.slice(8,16);
cLen = parseInt(cLen,16);
var firstLen = clanRes.length;
var lastLen = clanRes.length;
}else{
var cLen = searchRes.slice(lastLen + 8, lastLen + 16);
cLen = parseInt(cLen,16);
var clanRes = searchRes.slice(
lastLen,
lastLen + 128 + (cLen * 2)
);
var abc = 1;
if (abc == 1){
var lastLen = firstLen + clanRes.length;
abc++;
}else{
var lastLen = lastLen + clanRes.length;
}
}
lols.push(cLen);
console.log('\n\nClan ' + cur + ' Details');
var clanID = clanRes.slice(0,8);
clanID = parseInt(clanID,16);
num ++;
}
I'm not sure at all about where the problem is. Is it when defining clanRes or is it in making the loop?
Thanks!
**
Updated code for #bergi
**
num = 0;
var sSize = searchRes.slice(8,16);
sSize = parseInt(sSize,16);
lols = new Array();
while(num <= 3){
var cur = num + 1;
var sres=0;
for(var i in lols) { sres += lols[i]; }
if (num == 0){
var clanRes = searchRes.slice(0, 128 + (sSize * 2));
var cLen = clanRes.slice(8,16);
cLen = parseInt(cLen,16);
var firstLen = clanRes.length;
var lastLen = clanRes.length;
}else{
var cLen = searchRes.slice(lastLen + 8, lastLen + 16);
cLen = parseInt(cLen,16);
var clanRes = searchRes.slice(
lastLen,
lastLen + 128 + (cLen * 2)
);
var abc = 1;
if (abc == 1){
var lastLen = firstLen + clanRes.length;
abc++;
}else{
var lastLen = lastLen + clanRes.length;
}
}
lols.push(cLen);
console.log('\n\nClan ' + cur + ' Details');
var clanID = clanRes.slice(0,8);
clanID = parseInt(clanID,16);
console.log(clanID);
num ++;
}
Here is a exmaple searchRes:
http://pastie.org/10075399
And an example sSize:
0000000e - hex
14 - int.

var abc = 1;
if (abc == 1){
abc is always 1 in that comparison (the value is assigned right in the line before), so it will never evaluate the else block. I assume you want to move the initialisation of the variable out of the looping.

cant figure out how to get the return showing .toFixed(2) amount without error

The script works great for adding items on invoice however i cant figure how to convert the data using .toFixed(2) to show $10.00 instead of 10. I get an error every time I try to add .toFixed(2) . thank you
<script type="text/javascript">
function myFunction() {
var answer = document.getElementById('total');
var x = document.getElementById('itemprice1');
var y = document.getElementById('itemprice2');
var z = document.getElementById('itemprice3');
var w = document.getElementById('itemprice4');
var taxt = document.getElementById('taxtot');
var thetot = document.getElementById('thetot');
// parseFloat converts to values, otherwise you'll concatenate the strings.
answer.value = parseFloat("0" + x.value) + parseFloat("0" + y.value) + parseFloat("0" + z.value) + parseFloat("0" + w.value);
}
function myFunction1() {
var answer = document.getElementById('total');
var taxt = document.getElementById('taxtot');
var thetot = document.getElementById('thetot');
thetot.value = parseFloat("0" + answer.value) + parseFloat("0" + taxt.value);
if (thetot > "0") {
{
//function myFunction2()
var taxt = document.getElementById('taxtot');
var tx1 = document.getElementById('tax1');
var tx2 = document.getElementById('tax2');
var tx3 = document.getElementById('tax3');
var tx4 = document.getElementById('tax4');
var x = document.getElementById('itemprice1');
var y = document.getElementById('itemprice2');
var z = document.getElementById('itemprice3');
var w = document.getElementById('itemprice4');
var answer = document.getElementById('total');
taxt.value = parseFloat("0" + tx1.value) * ("0" + x.value) + parseFloat("0" + tx2.value) * ("0" + y.value) + parseFloat("0" + tx3.value) * ("0" + z.value) + parseFloat("0" + tx4.value) * ("0" + w.value);
}
}
}
</script>

Presumably your controls are in a form, so you can reference them simply using their name in the form. You can also convert strings to numbers using unary +:
function myFunction(formId) {
var f = document.getElementById(formId);
var answer = f.total;
var x = +f.itemprice1.value;
var y = +f.itemprice2.value;
var z = +f.itemprice3.value;
var w = +f.itemprice4.value;
var taxt = f.taxtot;
var thetot = f.thetot;
// Presumably here is where you want to use toFixed
answer.value = '$' + (x + y + z + w).toFixed(2);
}

function to_dollar_string(amount)
{
return "$" + amount.toFixed(2);
}
to_dollar_string(10);
=> "$10.00"
to_dollar_string(10.567);
=> "$10.57"