I'm building a (very) mini JS framework to use for customizing my eBay listings. I do know how to circumvent their "no remote scripts" policy, and I could use jQuery, but this is really an exercise in getting myself better at JS.
I have a function of the global window object which returns a bunch of methods, like this:
window.iq = (function(){
return {
tag: function(tag) {
return document.getElementsByTagName(tag);
},
map: function(el, attr) {
var arr = [];
el = iq.tag(el);
for (i = 0; i < el.length; i++) {
var x = el[i].getAttribute(attr);
arr.push(x);
}
return arr;
},
// A bunch of others like this
};
})();
I'm having trouble (by which I mean I'm utterly stuck) iterating through an array of data-name attributes and hiding or showing images based on whether there is a match. Here's the function:
iq.click('#mblThumbs img', function(){
var dn = iq.map('img', 'data-name');
for (i = 0; i < dn.length; i++) {
if (this.getAttribute('data-name') === dn[i]) {
iq.fadeOut(200, iq.sel('#mblSlide img:not([data-name="' + dn[i] + '"])'));
iq.fadeIn(200, iq.sel('#mblSlide img[data-name="' + dn[i] + '"]'));
}
}
});
I can cycle through the first two images as many times as my heart desires, but as soon as I click on anything past the second image, the function only continues to work for it, and the subsequent indexes in the array. I'm guessing that this is either a problem with my map method, or maybe something to do with array length? I don't know. I'm flummoxed. Any thoughts or suggested are much appreciated.
FIDDLE: http://jsfiddle.net/h8z7c/
The issue is indeed with your click callback. Your fadeout selector is finding the first image that is not data-name=dn[i], which is always either "one" (if you clicked 2), or "two" (if you clicked 1). You either need to use selAll to grab all of the elements that are not the clicked one, or keep track of which one is currently selected. Here are the two ways of fixing it.
// Make sure they are all hidden
iq.click('#mblThumbs img', function(){
var dn = iq.map('img', 'data-name');
for (i = 0; i < dn.length; i++) {
if (this.getAttribute('data-name') === dn[i]) {
var outs = iq.selAll('#mblSlide img:not([data-name="' + dn[i] + '"])');
for (var j = 0; j < outs.length; j++) {
iq.fadeOut(200, outs[j]);
}
iq.fadeIn(200, iq.sel('#mblSlide img[data-name="' + dn[i] + '"]'));
}
}
});
// Or keep track of the currently selected
var selected = "one";
iq.click('#mblThumbs img', function(){
var dn = iq.map('img', 'data-name');
for (i = 0; i < dn.length; i++) {
if (this.getAttribute('data-name') === dn[i] && dn[i] !== selected) {
iq.fadeOut(200, iq.sel('#mblSlide img[data-name="' + selected + '"]'));
iq.fadeIn(200, iq.sel('#mblSlide img[data-name="' + dn[i] + '"]'));
selected = dn[i];
}
}
});
Related
I have been trying to add a mouseover listener in javascript as follows:
for (var i = 0; i < classes.length; i++)
{
var elements = document.getElementsByClassName("class" + i.toString());
for (var j = 0; j < elements.length; j++) {
elements[j].addEventListener("mouseover", function(e) {
showDiv(i, e.pageX, e.pageY);
});
}
}
and showDiv is:
function showTranslationDiv(idx, x, y){
const notification = document.getElementsById('div0');
notification.innerHTML = "You are at: " + x.toString() + " " + y.toString();
notification.style.top = y.toString() + 'px';
notification.style.left = x.toString() + 'px';
notification.style.display = 'flex';
setTimeout(function () {
notification.style.display = 'none';
}, 5000);
}
classes is a list of 3 different class names (the real name is not relevant).
I encountered two problems here:
When I use style.top, as you see above, it doesn't work and div0 didn't appear, but if I write a hard-coded top value (style.top = '400px' for example) it's working fine.
the value of idx is always 3 for any class, it should be different for different class indices.
What is wrong with my code?
Your notification isn't appearing because it looks like you have a typo when calling getElementById.
This:
const notification = document.getElementsById('div0');
Should be:
const notification = document.getElementById('div0');
Your idx is always 3 becuase, as #phuzi mentioned in the comments, your event handler forms a closure around the value of i. The linked answer has more information.
When this:
showDiv(i, e.pageX, e.pageY);
Accesses i from here:
for (var i = 0; i < classes.length; i++)
It always refers to the same instance of i that was declared as a var.
To solve these problems, correct the typo and scope i so that its unique to each iteration of the loop creating your event handlers.
for (let i = 0; i < classes.length; i++)
{
var elements = document.getElementsByClassName("class" + i.toString());
for (var j = 0; j < elements.length; j++) {
elements[j].addEventListener("mouseover", function(e) {
showDiv(i, e.pageX, e.pageY);
});
}
}
function showTranslationDiv(idx, x, y){
const notification = document.getElementById('div0');
notification.innerHTML = "You are at: " + x.toString() + " " + y.toString();
notification.style.top = y.toString() + 'px';
notification.style.left = x.toString() + 'px';
notification.style.display = 'flex';
setTimeout(function () {
notification.style.display = 'none';
}, 5000);
}
As a side note, you may want to use innerText instead of innerHTML since you're only setting text value. innerHTML is a potential vector for cross-site scripting (XSS). Even though you're likely safe here, it's good practice to avoid it when possible.
notification.innerText = `You are at: ${x} ${y}`;
Also, you may want to prefer querySelectorAll over getElementsByClassName because the latter is rechecked every time you interact with it.
var elements = document.querySelectorAll(`.class${i}`);
I am getting data over websocket every 10 seconds and i am updating the cells using this function:
agentStatSocket.onmessage = function (e) {
data = JSON.parse(e.data);
//console.log(typeof(data));
for (var i = 0; i < data.length; i++) {
var inboundTd = '#' + data[i]['id'] + '-inbound';
var outboundTd = '#' + data[i]['id'] + '-outbound';
if (data[i]['inboundCalls'] != 0) {
$(inboundTd).html(data[i]['inboundCalls']);
}
if (data[i]['outboundCalls'] != 0) {
$(outboundTd).html(data[i]['outboundCalls']);
}
}
};
This is working pretty fine. However, I see some lag with the table being updated. Currently, there are only 150 rows in the table. I do not know what will be the latency if rows will become 1000 or more.
I have the following questions:
What is the correct approach to design these kinds of tables in which data is changing very frequently? I am not using any library like react or angular. This is plain jQuery.I am using dataTables
jQuery to enhance table view.
One thing to consider is that, in many cases, accessing an element based on an ID is usually a lot quicker in vanilla javascript compared to jquery.
A simple example of that is:
function jsTest() {
for (let i = 0; i < 1000; i++) {
document.getElementById("js").innerHTML = i;
}
}
function jqueryTest() {
for (let i = 0; i < 1000; i++) {
$("#jquery").html(i);
}
}
function startup() {
console.time("javascript");
jsTest();
console.timeEnd("javascript");
console.time("jquery");
jqueryTest();
console.timeEnd("jquery");
}
// For testing purposes only
window.onload = startup;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Javascript: <div id="js"></div>
Jquery: <div id="jquery"></div>
So, you could try changing your code to:
agentStatSocket.onmessage = function (e) {
data = JSON.parse(e.data);
//console.log(typeof(data));
for (var i = 0; i < data.length; i++) {
//var inboundTd = '#' + data[i]['id'] + '-inbound';
//var outboundTd = '#' + data[i]['id'] + '-outbound';
var inboundTd = data[i]['id'] + '-inbound';
var outboundTd = data[i]['id'] + '-outbound';
if (data[i]['inboundCalls'] != 0) {
//$(inboundTd).html(data[i]['inboundCalls']);
document.getElementById(inboundTd).innerHTML = data[i]['inboundCalls'];
}
if (data[i]['outboundCalls'] != 0) {
//$(outboundTd).html(data[i]['outboundCalls']);
document.getElementById(outboundTd).innerHTML = data[i]['outboundCalls'];
}
}
};
You can still use jquery for the rest of your code, if you wish, but simple updates to elements that can be targeted by ID are usually quicker with vanilla javascript.
I need to add elements to container on a first click and delete it on a second one. I guess I'm trying to make it super hard while there is a more elegant and clear solution. Fiddle Link
I was thinking of arrays to create a 1st array for clicked elements and the 2nd one for elements that are already in a container. Then filter the first array through the second one and delete those (unmatched) elements from my container.
var click = +$(this).data('clicks') || 0; // Check if contacts cliked first time
if (click % 2 == 1) { // 2nd click
fruits.splice($.inArray(name, fruits), 1); // Remove Name from an array
$(".test .single").each(function (index, elem) {
compArr.push($(this).text());
});
keyArr = fruits.filter(i => compArr.indexOf(i) !== -1);
var i = 0;
for (; i < keyArr.length; i++) {
$(".name").each(function () {
$(".single:not(:contains('" + keyArr + "'))").remove();
});
} // I guess problem is here
} else { // 1st click
fruits.push(name);
$('.test textarea').css({
'font-size': '12px',
'border': '0'
}).prop('placeholder', '').before('<span class="single">' + name + '></span>');
$('textarea').val('');
}
$(this).data('clicks', click + 1);
For me, this part doesn't work properly. But I would love to hear any of your suggestions even if the entire logic is wrong. Thanks!
var i = 0;
for (; i < keyArr.length; i++) {
$(".name").each(function () {
$(".single:not(:contains('" + keyArr + "'))").remove();
});
}
I've managed to fix it. Added this code:
let deleteSingle = $('.single');
for (let i = 0; i < deleteSingle.length; i++) {
for (let j = 0; j < arrayNewKeys.length; j++) {
if (deleteSingle[i].innerHTML.includes(arrayNewKeys[j])) {
deleteSingle.eq(i).addClass('a');
break;
} else {
deleteSingle.eq(i).removeClass('a');
}
}
}
$('.styleContacts:not(.a)').remove();
if ($('.test > .single.a:only-child')) {
$('.single.a').removeClass('a');
}
Instead of this:
var i = 0;
for (; i < keyArr.length; i++) {
$(".name").each(function () {
$(".single:not(:contains('" + keyArr + "'))").remove();
});
} // I guess problem is here
I'm writing a simple little Connect 4 game and I'm running into an infinite loop on one of my functions:
var reds = 0;
var greens = 0;
function checkEmpty(div) {
var empty = false;
var clicked = $(div).attr('id');
console.log(clicked);
var idnum = parseInt(clicked.substr(6));
while (idnum < 43) {
idnum = idnum + 7;
}
console.log("idnum=" + idnum);
while (empty == false) {
for (var i = idnum; i > 0; i - 7) {
idnumStr = idnum.toString();
var checking = $('#square' + idnumStr);
var str = checking.attr('class');
empty = str.includes('empty');
console.log(empty);
var divToFill = checking;
}
}
return divToFill;
}
function addDisc(div) {
if (reds > greens) {
$(div).addClass('green');
greens++;
console.log("greens=" + greens);
} else {
$(div).addClass('red');
reds++;
console.log("reds=" + reds);
};
$(div).removeClass('empty');
}
$(function() {
var i = 1;
//add a numbered id to every game square
$('.game-square').each(function() {
$(this).attr('id', 'square' + i);
i++;
//add an on click event handler to every game square
//onclick functions
$(this).on('click', function() {
var divToFill = checkEmpty(this);
addDisc(divToFill);
})
})
})
Here is a link to the codepen http://codepen.io/Gobias___/pen/xOwNOd
If you click on one of the circles and watch the browser's console, you'll see that it returns true over 3000 times. I can't figure out what I've done that makes it do that. I want the code to stop as soon as it returns empty = true. empty starts out false because I only want the code to run on divs that do not already have class .green or .red.
Where am I going wrong here?
for (var i = idnum; i > 0; i - 7);
You do not change the i.
Do you want to decrement it by 7?
Change your for loop to the one shown below:
for (var i = idnum; i > 0; i -= 7) {
// ...
}
You also do not use loop variable in the loop body. Instead, you use idnum, I think this can be issue.
while (empty == false) {
for (var i = idnum; i > 0; i -= 7) {
idnumStr = i.toString(); // changed to i
var checking = $('#square' + idnumStr);
var str = checking.attr('class');
empty = str.includes('empty');
console.log(empty);
var divToFill = checking;
// and don't forget to stop, when found empty
if (empty) break;
}
}
I add break if empty found, because if we go to next iteration we will override empty variable with smallest i related value.
You can also wrap empty assignment with if (!empty) {empty = ...;} to prevent this override, but I assume you can just break, because:
I want the code to stop as soon as it returns empty = true
Offtop hint:
while (idnum < 43) {
idnum = idnum + 7;
}
can be easy replaced with: idnum = 42 + (idnum%7 || 7)
Change to this:
for (var i = idnum; i > 0; i = i - 7) {
You are not decrementing the i in your for loop
Building on what the others have posted You would want to change the value of empty inside the for loop. because obviously the string still checks the last string in the loop which would always return false.
while(empty==false){
for (var i = idnum; i > 0; i -= 7) {
// your other codes
if (!empty) {
empty = str.includes('empty');
}
}
This might be simple thing but just can't figure it out.
Let's assume I got fifty similar functions and there's two of them:
var unit = ['red', 'pink']
var unit2 = ['red2', 'red2']
$('#red').click(function() {
if($('#red2').is(':hidden')) {
$('#red2').toggle();
} else {
$('#red2').toggle();}}}
and
$('#pink').click(function() {
if($('#pink2').is(':hidden')) {
$('#pink2').toggle();
} else {
$('#pink').toggle();}}}
and I want to add all these functions in one/two for loops.
I tried this:
for (var i = 0; i < unit.length; i++) {
for (var y = 0; y < unit2.length; y++) {
$('#i').click(function() {
if($('#y').is(':hidden')) {
$('#y').toggle();
} else {
$('#y').toggle();}}}}
.toggle() method detects the visibility of the element itself, there is no need to use if statement, you can use this keyword which refers to the clicked element:
$('#red, #pink').on('click', function() {
// Based on the id property of the clicked element
// this selects #red2 or #pink2 element
$('#' + this.id + '2').toggle();
});
Also note that $('#i') selects an element with ID of i, you should concatenate the strings:
$('#' + i).foo();
You should concatenate strings:
for (var i = 0; i < unit.length; i++) {
$('#' + unit[i])
.attr('data-dst', unit2[i])
.click(function() {
var dst = $(this).attr('data-dst');
$('#' + dst).toogle();
}
}