Vote Count Viewer

Question

I've written a small script to enable the vote count viewing functionality that comes for users at 1k reputation:

// ==UserScript==
// @name Vote count viewer
// @namespace https://github.com/The-Quill/VoteCountViewer
// @version 1.0
// @description Lets you view the vote count on posts.
// @author Quill
// @match *://meta.stackexchange.com/questions/*
// @match *://*.stackexchange.com/questions/*
// @match *://meta.*.stackexchange.com/questions/*
// @match *://stackoverflow.com/questions/*
// @match *://meta.stackoverflow.com/questions/*
// @match *://serverfault.com/questions/*
// @match *://meta.serverfault.com/questions/*
// @match *://superuser.com/questions/*
// @match *://meta.superuser.com/questions/*
// @match *://askubuntu.com/questions/*
// @match *://meta.askubuntu.com/questions/*
// ==/UserScript==
(function() {
 Array.prototype.slice.call(document.getElementsByClassName('vote-count-post')).forEach(function(post) {
 post.addEventListener("click", getScore);
 });
 function getScore() {
 var post = this;
 var postId = post.parentElement.children[0].value;
 var site = document.location.hostname;
 var url = "//api.stackexchange.com/2.2/posts/" + postId + "?site=" + site + "&key=fetJx5PJVUspEFsbpN9n1A((&filter=!.UE7HKkP*tRsqwc8";
 var ups = 0;
 var downs = 0;
 $.getJSON(url, function(e) {
 ups = parseInt(e.items[0].up_vote_count, 10);
 downs = parseInt(e.items[0].down_vote_count, 10);
 }).done(function() {
 post.title = ups + " up / " + downs + " down";
 post.innerHTML = "";
 var green = document.createElement('div');
 green.style.color = "green";
 green.textContent = ups;
 var separator = document.createElement('div');
 separator.classList.add('vote-count-separator');
 var maroon = document.createElement('div');
 maroon.color = "maroon";
 maroon.textContent = downs;
 post.appendChild(green);
 post.appendChild(separator);
 post.appendChild(maroon);
 });
 };
})();

• SirPython: I'm confused. Does this UserScript add the functionality for users who don't already have it?
• Quill: Yes @SirPython, it does.

Answer 1

You'd probably be better off renaming your var green and var maroon to something like var upElement and var downElement. The reason being if you later decide to use different colors you wouldn't need to change the variable name to match the new colors.

Instead of parseInt you can use + i.e ups = +e.items[0].up_vote_count;

If you're concerned about performance, you could create a documentFragment to which you would append your green, separator, maroon elements, before appending the fragment to post.

If you don't need to support IE you could use fetch instead of relying on jQuery's getJSON, :

var getCounts = function (e) {
 return {
 ups : parseInt(e.items[0].up_vote_count, 10),
 downs = parseInt(e.items[0].down_vote_count, 10)
 }
}
var showCounts = function (counts) {
 var ups = counts.ups;
 var downs = counts.downs;
 // etc;
}
fetch(url).then(getCounts).then(showCounts)

• SirPython: I disagree with using + instead of parseInt; that is very "hacky" and should only be reserved for golfing.
• user5325596: @SirPython - + behaves differently to parseInt - stackoverflow.com/questions/17106681/… .
• SirPython: That's a very interesting post; thanks for sharing! However, I still believe it's a bit hacky. Perhaps Number() could be used instead, as they will both generate the same value?