Develop Reference

How do get a character count from innerText or InnerHTML using dojo?

I have to use Dojo in my application and I am trying to get the total numbers with in an HTML element and I keep getting an error.
Here is my code:
var attributeIcons = dojo.query(".attribute-icon");
if (attributeIcons.innerText.length = 4) {
console.log(attributeIcons);
}
And I try to use this approach also:
var attributeIcons = document.getElementsByClassName("attribute-icon").innerHTML.length;
console.log(attributeIcons);
Each approach gives me the same error:
Uncaught TypeError: Cannot read property 'length' of undefined

document.getElementsByClassName("attribute-icon") or dojo.query(".attribute-icon") returns array and you need to iterate over the array like this,
var attributeIcons = document.getElementsByClassName("attribute-icon");
Array.prototype.forEach.call(attributeIcons, function(el) {
console.log(el.innerHTML.length);
});
Demo

Both dojo.query() and document.getElementsByClassName() return an array-like object. This means that you can't call .innerHTML on an array of nodes (you get undefined), and subsequently you can't call .length.
Check out these two references:
https://dojotoolkit.org/reference-guide/1.7/dojo/query.html,
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
Try running the following to see your array.
var attributeIcons = dojo.query(".attribute-icon");
console.log(attributeIcons)
// or
var attributeIcons = document.getElementsByClassName("attribute-icon");
console.log(attributeIcons)
You can pick out one of the array items and then run .innerHTML.length on it, just not on the entire array.
var attributeIcons = dojo.query(".attribute-icon");
console.log(attributeIcons[0].innerHTML.length)
// or
var attributeIcons = document.getElementsByClassName("attribute-icon");
console.log(attributeIcons[0].innerHTML.length)
Hope that helps!

NightwatchJS: how to loop on elements selected using document.querySelectorAll?

I am trying to use document querySelectorAll to select an array of options. I found out that we cant directly use document.querySelectorAll as it gives me error
"ReferenceError: document is not defined"
and instead use it with browser.execute as mentioned in this answer but still getting undefined. The console statement logs undefined, it should have given me an array of elements instead. If I run this css selector in developer tools, it gives me the array I expect but not here. Any idea if I am doing something wrong?
browser.execute(function (data) {
console.log(document.querySelectorAll('div#question_' + quesNo + ' .answerBlock .answer-value'));
return true;
},[],null);

It may be due to the way you pass arguments to the browser.execute. Try the following:
browser.execute((data) =>
{
console.log(document.querySelectorAll('div#question_' + arguments[0] + ' .answerBlock .answer-value'));
return true;
}, [quesNo]);

Google Chrome not letting me use setAttribute for ID's

I've got some JS code here. Basically, I am trying to change the ID of an element to some value from a previous variable.
Here's what I got so far;
function() {
var colorarray = [ "RANDOMCOLOR_0", "RANDOMCOLOR_1", "RANDOMCOLOR_2" ];
var RANcolorarray = colorarray[Math.rsound(Math.random() * (colorarray.length - 1))];
document.getElementsByClassName('RANDOMCOLOR').setAttribute('id', RANcolorarray);
}
This code throws an error in Chrome for line 4: Uncaught TypeError: undefined is not a function which is weird because JsLint finds no errors.
I also tried using the other way to setting id's;
document.getElementsByClassName('RANDOMCOLOR').id = RANcolorarray;
However, although this method does not throw an error on chrome or jslint - it does not work at all after inspecting the element.. :/
Any ideas?

document.getElementsByClassName('RANDOMCOLOR') returns a list of DOM nodes (even if there's only one match) so you can't just call .setAttribute() on the list as the list doesn't have that method.
You can either get the first item out of the list and call .setAttribute() on that one or use a for loop to iterate through the list and call it on all of them. Of course, since you're setting the id, you should not be setting multiple elements to the same id, so I'll assume you just want one element:
document.getElementsByClassName('RANDOMCOLOR')[0].id = RANcolorarray;
Or, a little more safe:
var elems = document.getElementsByClassName('RANDOMCOLOR');
if (elems && elems.length) {
elems[0].id = RANcolorarray;
}

How to grab using getAttribute or SetAttribute

init: function(element, options) {
this.$generic = element.find('.love');
this.type = this.$generic.data('type');
this.url = this.$generic.attr('href');
this.$count = this.$generic.setAttribute('data-love-count');
console.log(this.$count + ' 6');
//this.count = +this.$count.text();
},
<a data-love-count="${loveCount}" href="/love/${session.userId}">
<i class="icn-heart"></i>
${loved}
</a>
The console.log keeps on giving errors; Uncaught TypeError: undefined is not a function. I am not sure why. I tried to use getAttribute or setAttribute but I get same errors.
Also I couldn't figure how to add the loves as in commented line. Everytime user clicks, love will increase.

this.$count = this.$generic.setAttribute('data-love-count');
You're using a html attribute setter there, to get the data. replace that line with:
this.$count = this.$generic.attr('data-love-count');
And you should be fine.

setAttribute and getAttribute are native functions but your $generic variable is a jQuery object.
jQuery uses .attr instead: https://api.jquery.com/attr/
If you wanted your code to work you could do:
this.$count = +this.$generic[0].getAttribute('data-love-count');
(Note that it is get not set, and the + converts it to a number type)
get 0 will access the first native element that the jQuery selector found, which you can then call native methods on.
To increment:
this.$count += 6;

javascript window.getSelection() circular reference error [duplicate]

See this demo (dependent on selectionchange event which works in Chrome only at this moment): http://jsfiddle.net/fyG3H/
Select some lorem ipsum text and then focus the text input. In the console log you will see that there is a DOMSelection object.
It has an anchorNode value of HTMLBodyElement while it should have one of Text.
I didn't know why this was happening until I tried stringfying the selection object: http://jsfiddle.net/fyG3H/1/
This gives the following error:
Uncaught TypeError: Converting circular structure to JSON
Do you know how I can prevent this circular reference caused by window.getSelection() ?
EDIT
New demo which works in other browsers too but still gives the wrong anchorNode: http://jsfiddle.net/fyG3H/5/
And with JSON.stringify: http://jsfiddle.net/fyG3H/6/
Firefox seem to return an empty {} instead of throwing an error.

You need to invoke toString() on getSelection(). I've updated your fiddle to behave as you'd expect.
var selection;
$('p').bind('mouseup', function() {
selection = window.getSelection().toString();
});
$('input').bind('focus', function() {
this.value = selection;
console.log(selection);
});
See demo
EDIT:
The reason that you're not getting the correct anchor node is that the DOMSelection object is passed by reference and when you focus on the input, the selection gets cleared, thus returning the selection defaults corresponding to no selection. One way you can get around this is to clone the DOMSelection properties to an object and reference that. You won't have the prototypal DOMSelection methods any more, but depending on what you want to do this may be sufficient.
var selection, clone;
$('p').bind('mouseup', function() {
selection = window.getSelection();
clone = {};
for (var p in selection) {
if (selection.hasOwnProperty(p)) {
clone[p] = selection[p];
}
}
});
$('input').bind('focus', function() {
console.dir(clone);
});
See demo