Vote Count Viewer

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";

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)

StackExchange Code Review Q#114138, answer score: 6