We Keep Coding

Javascript for each loop

I'm trying to write this:
$('.circle_div').each(function(){
var $this = $(this),
thisWidth = $this.width();
$this.css('height', thisWidth + 'px');
});
in javascript like this:
var circle_div = document.getElementsByClassName('circle_div');
for (el in circle_div){
var thisWidth = el.style.width;
el.style.height = thisWidth + "px";
}
I also tried for...of and for each, and a regular for loop incrementing var i. The jquery function works but the javascript doesn't. Any idea what I'm doing wrong?

Eeeck. Never use for/in to iterate elements of an array or array-like object (doing so will include other iterable properties in addition to just the array elements).
Plus el in your loop is the index, not the value. You have to use circle_div[index] to get the element from the nodeList. But, you MUST switch to a traditional for loop, not for/in.
var circle_div = document.getElementsByClassName('circle_div');
for (var i = 0; i < circle_div.length; i++) {
var item = circle_div[i];
item.style.height = item.style.width;
}
You also have to remove the + "px" because the units are already there in plain javascript.
For more details on using for loop with document.getElementsByClassName() (including ES6 info), see this other answer: For loop for HTMLCollection elements.

If you convert the NodeList object that returns getElementsByCLassName to a regular array, you can use the Array.prototype.forEach method on it:
// Get the divs, and convert the NodeList to a regular array.
var circle_div = [].slice.call(document.getElementsByClassName('circle_div'), 0);
circle_div.forEach(function (el) {
el.style.height = el.clientWidth + "px";
});
This way looks more similar to your jquery code.
Check the fiddle: http://jsfiddle.net/7ew39phu/
Edit: I realize I should have used clientWidth, instead of style.width. The reason is that style properties seem to be only available if they were set using JavaScript, not if they were set using an css sylesheet.
Anyway, I fixed the code.

var circle_div = document.getElementsByClassName('circle_div');
for (var i=0,l=circle_div.length; i<l; i++){
circle_div[i].style.height = circle_div[i].style.width;
}

Jquery get text value of some selector using index in array

There is the following code with jQuery:
var ths = $(".timetable__table th");
var th;
for (var i = 0; i < ths.size(); i++) {
th = ths.get(i).text();
console.log(th);
}
When I try to execute this code I get the following exception: TypeError: ths.get(...).text is not a function. I don't understand why it occurs, I just need to get the text value of a tag. How can I fix it?

Do like this, Use .each() function at this context to traverse over a collection of jquery object.
$(".timetable__table th").each(function(){
console.log($(this).text());
});
.get(index) would return a javascript object and that does not contains a function called .text()
Note: Keep in mind that .size() has been deprecated from the version 1.8 use .length instead

because .get() returns the dom element not a jQuery object(the .text() is a method of jQuery wrapper object) use .eq() which will return a jQuery object
var ths = $(".timetable__table th");
var th;
for (var i = 0; i < ths.size(); i++) {
th = ths.eq(i).text();
console.log(th);
}

You need to iterate array like th[i] :
var ths = $(".timetable__table th");
var th;
for (var i = 0; i < ths.size(); i++) {
th = ths[i].text();
console.log(th);
}
But easiest way is below where you can skip for loop and simply use .each :
$(".timetable__table th").each(function(){
console.log($(this).text());
});

.get() returns the underlying DOM element(s), which don't have a text() method. Use .eq() instead.
Looks like you didn't decide if you want to use the DOM or jQuery. Your code can be simplified to something like:
$(".timetable__table th").each(function(index, el) {
console.log($(el).text());
});

How to select a DOM element with a new attribute added by JavaScript?

With:
var i = 0;
jQuery("a").each(function(){
this.nthcounter = i;
i += 1;
});
I was expecting to have
jQuery("a[nthcounter=20]").click();
or
document.querySelector("a[nthcounter=20]").click();
to work, but it seems none of them does anything at all.

Try this:
var i = 0;
jQuery("a").each(function(){
$(this).attr("nthcounter", i++);
});

You're adding a property to the DOM object itself...not adding an attribute via the jQuery API.
To do what I think you're trying to do is the following:
var i = 0;
jQuery("a").each(function(){
// jQuery object attr...
$(this).attr("nthcounter", i);
// Increment
i++;
});
Good luck.

get the text of a div

I have been trying to get the text from a div using only javascript.
I started with jQuery using the following code:
var divText = $("div.Xr3").html();
Then for my JavaScript I tried:
var divText = document.getElementsByClassName("Xr3").innerHtml;
Which returns undefined. How can I accomplish this using JavaScript only?

getElementsByClassName returns a live array of HTML elements, so you can't access innerHTML directly like this. You will either have to loop over its results, or if you know there's only one, apply [0] to it before accessing innerHTML.
var divTexts = [];
var divs = document.getElementsByClassName("Xr3");
var numDivs = divs.length;
while (var i = 0; i < numDivs; i++) {
divTexts.push(divs[i].innerHtml);
}
or, in a single-element scenario,
var divText = document.getElementsByClassName("Xr3")[0].innerHtml;

If Xr3 is used one time, you can use
var divText = document.getElementsByClassName("Xr3")[0].innerHtml;

Combining jQuery with native JS in DOM creation

I'm reusing an old application of mine and want to change the code so I'm applying the DOM structure that I build up to a node's class instead of it's id.
Below is a piece of the code and as you can see I try to combine jQuery (getting the node by it's class) with the old structure, but something doesn't work properly here.
Is it possible to combine jQuery and JS native like this?
If not, is there another way to accomplish what I want to do?
var gamearea = $('<div/>', {
text': 'testarea',
class': 'gamearea'
}).appendTo('.memory:last');
alert("this.rows: " + this.rows);
for (var j = 0; j < this.rows; j++){
var box = document.createElement('div');
for (var i = 0; i < this.cols; i++){
var iterator = (this.cols * j) + i;
var img = document.createElement('img');
var aNod = document.createElement('a');
aNod.href = "#";
img.src = "pics/0.png";
aNod.appendChild(img);
box.appendChild(aNod);
}
gamearea.appendChild(box);
}

You should be able to get it working by changing gamearea.appendChild(box); to gamearea[0].appendChild(box);
The reason behind that is you can get the bare DOM element for a jQuery extended object by simply doing obj[0], where obj is a jQuery extended object obtained like obj = $(...) etc. And the appendChild method in your code is a method of bare DOM element.