We Keep Coding

JQuery onChange uses values before change (values after change needed)

I am working on a module, which should select the only possible value of a Multi- or Single selection field, if there is only one valid value and a empty one available.
So far its working fine, until I use ACLs to disable selection values.
For example, I got a single selection field with 3 possible values. Then I disable 2 of them (ACL - if there is a special Queue selected) so theres only one value (+ an empty one) left.
My module wont pick the last value at first, but when I change anything else on the same page (second onchange call) it will pick the last possible value.
The first if condition checks if the Field has only one possible value in it. When I log the 'Change' array it always got the disbaled values still in there even when the 'change' that called the whole function was the ACL disabling those values.
Im still kinda new to javascript and havent found a solution yet.
I would realy appreciate any help.
$('.TableLike').on("change", function () {
var Change = [];
$('.Row').each( function() {
$(this).children().next().children().next().children().each( function(index) {
Change[index] = $(this).text()
} )
if ( (!Change[2] || /.*Field needed.*/i.test(Change[2])) && Change[0] === "-") {
SoleOption = Change[1];
$(this).children().next().children().next().children().each(function() {
if ($(this).text() === "-") {
$(this).removeAttr("selected");
}
if ($(this).text() === SoleOption) {
$(this).attr("selected", "selected");
}
} )
$(this).children().next().children().children().children().val(SoleOption)
}
SoleOption = "";
Change = [];
} )
} )

I managed to fix the issue with the setTimeout() Method.
So the DOM updated before the ACL did the changes.
I opened up the setTimeout Method after the onChange method and inserted all the code thats supposed to run after the change into the setTimeout method.
I hope this will be helpfull for others in the future.

My Bools Aren't working?

I am trying to make a "Battleship" like game. Most of my board is supposed to be "missed" tiles, and only a few are supposed to be tiles with submarines on them for a "hit". The problem is that whenever I run my program, I cannot tell if it is ignoring my bool or if it isn't understanding what I coded, because everything I click is a "hit".
var cellClick=function(clicked)
{
var cell=clicked.target;
if(! cell.isEmpty) return;
if(cell.isSub=false)
{
cell.style.backgroundImage='url("missed.png")';
cell.style.backgroundSize='constrain';
}
else
{
cell.style.backgroundImage='url("hit.png")';
cell.style.backgroundSize='constrain';
cell.exploded=true;
}
cell.isEmpty=false;
console.log('click');
};
var waterCell=[[],[],[],[],[],[],[],[],[],[]];
for(var row=0;row<10;row++)
{
for(var column=0;column<10;column++)
{
waterCell[row][column]=document.createElement("div");
waterCell[row][column].style.width='10%';
waterCell[row][column].style.height='10%';
waterCell[row][column].style.position='absolute';
waterCell[row][column].style.left=(column*10)+'%';
waterCell[row][column].style.top=(row*10)+'%';
waterCell[row][column].style.backgroundImage='url("water_cell.jpg")';
waterCell[row][column].style.backgroundSize='contain';
gameBoard.appendChild(waterCell[row][column]);
waterCell[row][column].row=row;
waterCell[row][column].column=column;
waterCell[row][column].isEmpty=true;
waterCell[row][column].isSub=false;
waterCell[row][column].exploded=false;
}
}
//trying to make random subs
for(var i=0;i<5;i++)
{
row=Math.round(Math.random()*10);
column=Math.round(Math.random()*10);
waterCell[row][column].isSub=true;
}
gameBoard.addEventListener('click',cellClick,false);

Your code
if(cell.isSub=false) {
is assigning false to the property isSub of cell. The assignment's result is then tested by if, which is false. That's why the condition is never met and the else-branch is processed. Obviously, your intention was
if(cell.isSub==false) {
Maybe try swapping the branches of if statement and test for truthy value in cell.isSub instead making the code simpler:
if ( cell.isSub ) {
// it's a hit
} else {
// it's a miss
}
If you require to keep this order of branches testing for falsy values can be simplified as well by using negation operator:
if ( !cell.isSub ) {
// it's a miss
} else {
// it's a hit
}
One last tip: don't set custom properties of a DOM element as those perform poorly. Even worse, they are perfect soil for memory leakages when putting Javascript objects or functions. Thus, keep the two worlds - your Javascript and your HTML/DOM - as separated as possible and train yourself not to put additional data into Javascript-representations of objects managed in context of DOM. Use a separate description in pure Javascript (e.g. two-dimensional array) for tracking position of your subs and create a DOM representing that internal data set, only.

What to do if there is no data in localStorage?

I'm in a dilemma, I have a search engine which I keep the last results, everything perfect until there.
The problem is that I do not know what to do if I do not have items already saved, ie if it is the first time I search.
if(localStorage.getItem("searchResults") === null) {
// I do not know what to do here ...
}
else {
// Here the code is supposed to do what it has to do
}
Should not I do anything, should I save an empty string, or would I have to change the logic I'm working on?
What are your friends, what are you doing? Thank you

I would have a variable called "noResults", and set it to false, when search results are 0, or you can make it fetch results from server. It's all about context and logic

You could set it to N/A:
if(localStorage.getItem("searchResults") === null) {
localStorage.setItem("searchResults", "N/A");
}
else {
// Here the code is supposed to do what it has to do
}
Or use the following, and when you check if searchResults is null, last search result should be empty.
if(localStorage.getItem("searchResults") !== null) {
// Here the code is supposed to do what it has to do
}

Maybe you don't need an if statement. The if statement provides you with code blocks that can be executed for truthy or falsely expressions.
Instead, use a logical OR || to define a default value.
var results = localStorage.getItem('searchResults') || 'No results...';

Writing Javascript Algorithm, but I need to convert symbols into actual words

So, I'm writing a new JavaScript algorithm, codenamed jBam (Javascript Browser Algorithm Module), and it is used to write an extremely simple way to detect a browser and it's version. My main goal, is to be able to write this (with the library plugged in):
if(IE & version lessThan 9) {
// IE code for 8 and below
}
Right now, progress is going pretty good. I can write
if(browser == IE & version < 9)
So, back to my original question, the only thing I want to know is maybe someway set a variable for lessThan and set it equal to the symbol <. I've tried probably the most common remedy (var lessThan = <) but, of course, that's a little too wishful, and a little too easy. And, as we all know, nothing is ever too easy. Any suggestions, maybe a JavaScript preserve I'm not thinking of?

I agree with #JCOC611, but it's also possible that you make everything part of an object, and then make version an object as a property as well, where you can add a method called lessThan, so you would have something like:
var browserStuff = {
browser: {
value: "",
is: function (comparator) {
if (browserStuff.browser.value == comparator) {
return true;
}
return false;
}
},
version: {
value: "",
lessThan: function (comparator) {
if (browserStuff.version.value < comparator) {
return true;
}
return false;
}
},
init: function () {
// Do your stuff to determine the browser and its version
// You need to set browserStuff.version.value and browserStuff.browser.value
delete browserStuff.init;
}
}.init();
And then use it like:
if (browserStuff.browser.is("IE")) {
}
or
if (browserStuff.version.lessThan("7")) {
}
You'd have to add more things for "greater than" and "not equals" and whatnot, but that's just to start it off.
I don't exactly suggest this, because you can just as easily use normal Javascript operators to accomplish the same thing with less redundant code. This solution is more for a "readable" theme, but is in no way necessary or better.

correct way to tell if my selection caught any existing elements

I'm making a toggle in d3, and trying to avoid global variables.
I can go ahead and select the item as though it was already in the scene:
d3.select('#awesome_line_graph')
and then test to see if I caught anything using
if (d3.select('#awesome_line_graph')[0].every(function(d){return d===null})){
// draw awesome line graph
} else {
d3.select('#awesome_line_graph').remove()
}
but this testing for the zeroth element for maybe more than one null thing seems terrible and hacky. How should I do it instead? Apologies for not knowing much javascript.

Use selection.empty(). Also, if the selection is empty, there's no need to remove it.

I highly recommend you read Mike Bostock's D3 Workshop document. In it, he talks about how a selection returns an array of elements that match the selection criteria. Therefore, if the length of the array is greater than "0", you've properly matched and selected.
You may also want to read his documentation on "Nested Selections." I found it pretty useful.
I hope this helps.
Frank

In version d3.js v5, one can use
if(var n = d3.select('#awesome_line_graph').size() == 0) {
console.log("no DOM element selected.");
} else {
console.log(n + " DOM element(s) selected.");
}

Using length wont do as a single object containing all results will be returned in either cases. Maybe you could do something like ...
var selected = d3.select('#selected');
if (selected._group[0][0] == null) {
// nothing found
} else {
// found something
}