We Keep Coding

I'm not sure how to use lodash orderBy

My program is currently supposed to take the HTML input, put it into an object array, sort it using orderBy, then output it to the p2 textContent. I tested all of the aspects of this program before adding orderBy, and then the program stopped working.
var p1 = document.getElementById("p1");
var p2 = document.getElementById("p2");
var enterName = document.getElementById("name");
var enterRating = document.getElementById("rating");
var button = document.getElementById("button");
var players = [];
button.addEventListener("click", addPlayer);
function addPlayer() {
p1.innerText += enterName.value + " - " + enterRating.value + " " + "| ";
players.push({ player: enterName.value, rating: enterRating.value });
var sortedPlayers = _.orderBy(players, [rating, player], [desc, desc]);
console.log(players);
console.log(sortedPlayers);
p2.innerText = "";
for (i = 0; i < players.length; i++) {
p2.innerText += players[i].player + " - " + players[i].rating + " | ";
}
}
p1 exists and is used for testing purposes, just to make sure that my browser isn't lagging. After I added the orderBy, neither array logged to the console. Before, the players array logged with every run of the addPlayer() function.
I'm using codepen to write this program, and I am pretty sure lodash is installed if that is relevant.

Dynamic Color-Thief / Get dominant color

I have a very special problem with color-thief. I'm trying to load some data from my datatable containing a realtive path to a image stored on the same domain.
There are about 20 links where I have to grab the dominant color and push it to an array.
My problem is now, that when i load my data (with AJAX) and I try to grab the color, the image is not loaded jet and i get a "Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0."
So here is what i have tried so far:
METHODE 1: GetColor
// Create Objects for colorThief
var colorThief = new ColorThief();
var myImage = new Image();
var colors = [];
for (var i = 0; i < result.length; i += 3) {
labels.push(result[i]);
data.push(result[i + 1]);
myImage.src = result[i + 2];
var color = colorThief.getColor(myImage);
colors.push("#" + rgbToHex(color[0]) + rgbToHex(color[1]) + rgbToHex(color[2]));
}
METHODE 2: GetColorByUrl
// Create Objects for colorThief
var colorThief = new ColorThief();
var colors = [];
for (var i = 0; i < result.length; i += 3) {
labels.push(result[i]);
data.push(result[i + 1]);
//Also tried with a absolute path, not changing anything
var color = colorThief.getColorFromUrl(result[i + 2]);
colors.push("#" + rgbToHex(color[0]) + rgbToHex(color[1]) + rgbToHex(color[2]));
}
METHODE 3: Append Image to HTML
var colorThief = new ColorThief();
var colors = [];
var content = "<div id='temp' style='display:none'>";
//Create options
for (var i = 0; i < result.length; i += 3) {
options += "<option value='" + result[i] + "'>" + result[i + 1] + "</option>";
content += "<img src='" + result[i + 2] + "'>";
}
content += "</div>"
$("#contentRightTop").append(content);
var thisColor;
var theseColors = [];
$("#temp img").each(function () {
thisColor = colorThief.getColor(this);
theseColors.push(thisColor);
});
$("#temp").remove();
METHODE 4: Object.onload
// Create Objects for colorThief
var colorThief = new ColorThief();
var myImage = new Image;
var colors = [];
for (var i = 0; i < result.length; i += 3) {
labels.push(result[i]);
data.push(result[i + 1]);
myImage.onload = function() {
var color = colorThief.getColor(myImage);
colors.push("#" + rgbToHex(color[0]) + rgbToHex(color[1]) + rgbToHex(color[2]));
}
myImage.src = result[i + 2];
}
So how i told you, so far nothing really worked. I also tried to set absolute paths to my domain.
THE ONLY methode that worked, was a try catch, with repeating the whole for loop, what wasn't that nice.
So guys if you would have some ideas/inputs on how to solve this problem or also alternatives to color-thied (it's very heavy) would be great.
Mention, that i allready tried to combine/replace color-thief with this scipts:
ImagesLoaded - Very bugy in Google Chrome
Colorify - Didn't manage to change the script to what i need
[Dominant-Color - Has imagemagick dependencie, that i want to avoid]
[Adaptive Background - Same as Colorify]
[PrimaryColor - I have to give it a try again, think there was an error in my code]
(Only allowed to post 2 links^^)
Thanks so far
Martin

how to change the text of node in Go.js

I am using go.js to making the graphs. Everything is ok, but now I want to edit the text like the color. For this i have made a textarea. And I have done this, but the issue is when i change the text for one node it changes the text for the other nodes I have selected previously. Don't know where I am wrong. Here is my code:
var info = document.getElementById("myInfo");
myDiagram.addDiagramListener("ChangedSelection", function(e1) {
var sel = e1.diagram.selection;
var str = "";
if (sel.count === 0) {
str = "Selecting nodes in the main Diagram will display information here.";
info.innerHTML = str;
return;
} else if (sel.count > 1) {
str = sel.count + " objects selected.";
info.innerHTML = str;
return;
}
// One object selected, display some information
var elem = sel.first();
var shape = elem.findObject("SHAPE");
var txtblock = elem.findObject("TEXT");
str += "<h3>Selected Node:</h3>";
str += "<p>Figure: " + shape.figure + "</p>";
str += "<p>Text: <textarea style='height:100px;' id='nodetext'> " + txtblock.text + "</textarea></p>";
var strokeColor = shape.stroke;
str += '<p style="float: left; margin-right: 10px;">Color: <input type="text" id="custom" /></p>';
info.innerHTML = str;
$(document).on('keyup','#nodetext',function(a)
{
a.preventDefault();
txtblock.text=$(this).val() ;
})
// Initialize color picker
$("#custom").spectrum({
color: strokeColor,
// Change colors by constructing a gradient
change: function(color) {
var c = color.toRgb();
var r, g, b;
var grad1 = new go.Brush(go.Brush.Linear);
r = Math.min(c.r + 10, 255);
g = Math.min(c.g + 10, 255);
b = Math.min(c.b + 10, 255);
grad1.addColorStop(0, "rgb(" + r + "," + g + "," + b + ")");
grad1.addColorStop(0.5, color.toRgbString());
r = Math.max(c.r - 30, 0);
g = Math.max(c.g - 30, 0);
b = Math.max(c.b - 30, 0);
grad1.addColorStop(1, "rgb(" + r + "," + g + "," + b + ")");
shape.fill = grad1;
shape.stroke = "rgb(" + r + "," + g + "," + b + ")";
txtblock.stroke = (r < 100 && g < 100 && b < 100) ? "white" : "black";
}
});
});

To be clear, your question is about modifying the colors of a Shape and a TextBlock, not trying to modify the TextBlock.text property.
The problem is that you are adding a "change" event handler for the Spectrum object each time the Diagram.selection collection changes. That event handler is a closure that holds a reference to the particular selected Node. As the selection changes you add a new event handler, but the old ones are still there and being called, modifying the previously selected nodes.
There are several possible solutions. I suggest that you define Spectrum's change event handler only once, not in the "ChangedSelection" DiagramEvent listener. Set it to be a function that operates on all of the selected Nodes in the Diagram, not on a particular Node. Or perhaps change the colors if there is only one Node that is selected, it that is the policy that you want.
By the way, unless your Links are not selectable, your code ought to handle the case when the user selects a Link.

Javascript style using getBoundingClientRect not working

Hi I am trying to use getBoundingClientRect javascript function but the problem is this only seems to work for 1 of my elements. Here is the code.
function getDataXML(getID, cellId) {
var divMain = document.getElementById('Main');
var divCell = document.getElementById(cellId);
var divHoverControl = document.getElementById(getID);
var rectMain = divHoverControl.getBoundingClientRect();
var rectCell = divCell.getBoundingClientRect();
var divWidth = divHoverControl.offsetWidth;
var cellWidth = divCell.offsetWidth;
alert(rectMain.left + " " + rectMain.right + " " + divWidth + " " + cellWidth);
}
Its seems as though the page gets the elements using there ID correctly as I get no error and setting some style attributes works for each element but I only seem to get a result for my rectCell and cellWidth variables but the exact same code for rectMain and DivWidth dont seem to work. Any help would be greatly appreciated.

Assigning array value not working?

For a chess game I search for possible attackers on an enemy piece.
Board representation is done via a multi-dimensional array. board[i][j], where i = row and j is column (so 8x8) and the value is the piece itself.
When searching for possible attackers I want to create a new array aPossibleAttackers[i][j]
var aPossibleAttackers = []; // create array
var ti,tj; // temp row/col
I do a search in all possible directions (0-7) and look for the first piece I meet. So direction and distance are known then. Then I calculate which field this is and want to copy the correspondending value from board[i][j] to aPossibleAttackers[i][j]. It's not working, though.
Code:
alert( veld(attackerRow,attackerCol) + " pos att op veld " + veld((attackerRow + (i * rowStep)), (attackerCol + (i * colStep))));
aPossibleAttackers[search_dir] = i; // searchdirection and distance, OK
ti = attackerRow + (i * rowStep); // OK
tj = attackerCol + (i * colStep); // OK
//aPossibleAttackers[ti][tj] = board[ti][tj]; // not possible????
alert("test2 ti= " + ti + " tj=" + tj + " ?? " + aPossibleAttackers);
What am I doing wrong?? board[i][j] does exist, or else I would not have found a piece.

could be a string casting issue
try
alert(
veld(attackerRow,attackerCol)
+ " pos att op veld "
+ veld(((attackerRow*1) + (i * rowStep)), ((attackerCol*1) + (i * colStep))));
aPossibleAttackers[search_dir] = i; // searchdirection and distance, OK
ti = (attackerRow*1) + (i * rowStep); // OK
tj = (attackerCol*1) + (i * colStep); // OK
//aPossibleAttackers[ti][tj] = board[ti][tj]; // not possible????
alert("test2 ti= " + ti + " tj=" + tj + " ?? " + aPossibleAttackers);
just a guess