user3684314 user3684314 - 6 months ago 15
HTML Question

Javascript Specificity (Only Respond to Clicked Item)

I'm very new to Javascript and am looking for a way to have my code only respond to the clicked item in the list. (full JSFiddle here: http://jsfiddle.net/5cjPF/, although for some reason buttons aren't responsive...)

For the functions below, each applies only to a certain clicked item, however, right now only the first item that each refers to is responding. A friend of mine suggesting creating a class for each function, but I honestly have no idea where to begin and would really appreciate a push in the right direction!

<script type="text/javascript">
var submitcount = 0;
function arrow() {
if (submitcount == 0 || submitcount % 2 == 0) {
var extension = document.getElementById('one');
extension.insertAdjacentHTML('beforeend', '<div id="before-two"><div id="two"><div class="btn-group"><!----><button type="button" class="left" onclick="modify_qtyTag(1)"></button><!----><button type="button" class="tag" id=tag>synonyms</button><!----><button type="button" class="right" onclick="modify_qtyTag(0)"></button><!----></div><div class="btn-group"><button type="button" class="left" onclick="modify_qtyTag(1)"></button><!----><button type="button" class="tag" id=tag>beast</button><!----><button type="button" class="right" onclick="modify_qtyTag(0)"></button></div><p><div class="btn-group"><!----><button type="button" class="left" onclick="modify_qtyTag(1)"></button><!----><button type="button" class="tag" id=tag>antonyms</button><!----><button type="button" class="right" onclick="modify_qtyTag(0)"></button><!----></div><div class="btn-group"><button type="button" class="left" onclick="modify_qtyTag(1)"></button><!----><button type="button" class="tag" id=tag>gentle</button><!----><button type="button" class="right" onclick="modify_qtyTag(0)"></button></div></p></div></div></div>');
}
else if(document.getElementById('two')) {
var deleted = document.getElementById('before-two');
deleted.remove(deleted.selectedIndex);
}
submitcount += 1;
};

var upvotes = 0;
var votes = 0;

function modify_qty(val) {
var qty = document.getElementById('qty').value;

votes += 1;
upvotes += val;

var percent = Math.round((upvotes / votes) * 100);

document.getElementById('qty').value = percent;
}

var upvotesTag = 0;
var votesTag = 0;

function modify_qtyTag(val) {
var extension = document.getElementById('tag');

votes += 1;
upvotes += val;

var percent = Math.round((upvotes / votes) * 100);

var allThings = percent + "%," + " 100%," + " 100%," + " 100%;";

extension.style.backgroundSize = allThings;
extension.style.backgroundSize = "100%";
extension.style.backgroundSize = percent + "%, 100%, 100%, 100%";
}
</script>

Answer

The JS should be:

function modify_qtyTag(val, tagid) {
    var extension = document.getElementById(tagid);
    var votes = parseInt(extension.getAttribute("data-votes"), 10) + 1;
    var upvotes = parseInt(extension.getAttribute("data-upvotes"), 10) + val;
    var percent = Math.round((upvotes / votes) * 100);
    var allThings = percent + "%," + " 100%," + " 100%," + " 100%;";
    extension.style.backgroundSize = allThings;
    extension.setAttribute('data-votes', votes);
    extension.setAttribute('data-upvotes', upvotes);
}

The HTML would be something like:

<button type="button" class="left" onclick="modify_qtyTag(1, 'tag1')"></button>
<button type="button" class="tag" id="tag1" data-votes="0" data-upvotes="0">synonyms</button>

This adds an argument to the function that tells it which tag to update. And instead of using global variables for the votes and upvotes, it stores it in data attributes in the tag element, so that each one can have its own percentage.

Comments