We Keep Coding

Input element values are undefined

I have a JavaScript function that is not working as I expected. The function should loop through the input boxes and display an alert with the input's value. For some reason, the inputs are all returning an undefined. I am sure the ids of the input elements are correct. I can perform other actions on the input (change color, set .innerHTML), but I can't seem to collect the values. Can someone point out what I may be doing wrong?
function submitHours(){
var table = document.getElementById('StudentList');
var tbody = table.getElementsByTagName('tbody')[0];
var rows = tbody.getElementsByTagName("tr");
for (var r = 1; r < rows.length+1; r++) {
for(x=1; x<=25; x++){
document.getElementById(r+'day'+x).style.backgroundColor = 'red';
alert(document.getElementById(r+'day'+x).value);
}
}
}

It looks like you're selecting an element that contains the input you're targeting, but not the input itself. This is why you can set the .innerHTML, but not get the .value.
To get the value, do this:
function submitHours(){
var rows = document.querySelector('#StudentList > tbody:first-child > tr');
for (var r = 1; r < rows.length+1; r++) {
for(var x=1; x<=25; x++){
var input = document.querySelector('#' + r+'day'+x + " input");
input.style.backgroundColor = 'red';
alert(input.value);
}
}
}
There's probably a more efficient way to do this, but I can't tell without seeing your markup.

You need to use innerText instead of value:
for(x=1; x<=25; x++){
document.getElementById(r+'day'+x).style.backgroundColor = 'red';
alert(document.getElementById(r+'day'+x).innerText);
}

How to select text in 2nd line of Textbox element by using FabricJS?

I'm wondering if there is a way to select part of a text in Textbox element of FabricJS?
Currently, I'm using
text.selectionStart = 0;
text.selectionEnd = 4;
but it selects text in the first line (makes sense why).
How to let fabric know that I need to select those from the second line?
Tnx
http://jsfiddle.net/redlive/4n4cLyvo/

You can use the insertCharStyleObject method available in fabric.
Code snippet :
var selectionStart = 0;
var selectionEnd = 4;
var lineIndex = 1;
for (var i = selectionStart; i < selectionEnd; i++) {
text.insertCharStyleObject(lineIndex, i, {
textBackgroundColor: '#0F0'
})
}
Updated fiddle - http://jsfiddle.net/4n4cLyvo/2/

Creating Rainbow Text in Google Docs

var selectedElements = selection.getSelectedElements();
for (var i = 0; i < selectedElements.length; ++i) {
var selectedElement = selectedElements[i];
// Only modify elements that can be edited as text; skip images and other
// non-text elements.
var text = selectedElement.getElement().editAsText();
// Change the background color of the selected part of the element, or the
// full element if it's completely selected.
if (selectedElement.isPartial()) {
text.setColor(selectedElement.getStartOffset(),
selectedElement.getEndOffsetInclusive(), '#69359c');
}
}
}
The above text takes a selection inside of a Google Doc and changes it to the hex code #69359c (a dark purple). I have searched many websites, many gits, and asked many friends for help with my project.
My end project is this:
Create a menu for Google Docs with my selector (DONE)
Be able to highlight a certain amount of text and change it to an array of colors (ROY G. BIV / the rainbow).
Have the format be only for Google Documents.
If anyone can help me it would be highly appreciated.

I just found this question and am happy to provide some working code from my Rainbow Font Google Docs add-on (Magic Rainbow Unicorns).
The first problem is that you need to set the foreground color on the text, and the second is that the code above only allows for partial paragraph selections.
For whole selections use this code:
var elementText = element.editAsText();
if (elementText) {
var paragraph = elementText.getText();
for (var j = 0; j < paragraph.length; j++) {
elementText.setForegroundColor(j, j, getNextRainbowColour(...));
}
}
For partial selections, I used this:
var elementText = element.asText();
var startIndex = element.getStartOffset();
var endIndex = elements.getEndOffsetInclusive();
for (var j = startIndex; j < endIndex+1; j++) {
elementText.setForegroundColor(j, j, getNextRainbowColour(...));
}

You are pretty close to the answer already. Try iterating over the elements within your 'text' variable, so you can change the background on each one.
You could use something like this to iterate over each letter:
var letters = elementText.getText();
for(var j = 0 ; j< letters.length-1; j++)
{
elementText.setBackgroundColor(j, j+1, getRandomColor())
}
Here is a sample of a function to use different colors:
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ )
{
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
For your last question, since the Text class is not part of Javascript, but from app-script library, this will not work outside Google environment.

JQuery not replacing html

here is the deal, i have the following jquery code that should add the array values to specific #id, buf it does not replace the code, only add more, and i need a little help to make it replace the html on othe link click.
Code:
function changeClass(curClass){
switch(curClass){
case "Schoolgirl":
case "Fighter":
var charSkillsNames = ["text1","text2","text4","text5"];
//loop show array values
listSkillsNames(charSkillsNames);
break;
}
}
function listSkillsNames(arr){
var length = arr.length,
element = null;
$("#skills").html(function(){
for (var i = 0; i < length; i++) {
element = arr[i];
$(this).append("<li>"+element+"</li>");
}
});
}
this works well but i need it to replace the html inside the "#skills" id when i click on the link that makes it work
PS: problem is really here

The issue is that you don't empty the HTML of #skills element. Use $("#skills").html("") to empty it.
function listSkillsNames(arr){
var length = arr.length,
element = null;
var $skills = $("#skills");
$skills.html(""); // empty the HTML
for (var i = 0; i < length; i++) {
element = arr[i];
$skills.append("<li>"+element+"</li>"); // append new items
}
}

The problem is because you are keep appending new items to the element always without removing the existing items.
Just empty the skill element, also there is no need to use the .html(function(){}) here
function listSkillsNames(arr) {
var length = arr.length,
element = null;
var $skill = $("#skills").empty();
for (var i = 0; i < length; i++) {
element = arr[i];
$skill.append("<li>" + element + "</li>");
}
}

How to count the number of line boxes in a DIV or P

<div><span>aaaaaa</span> ... (many other span here) ... <span>zzzzzz</span></div>
In that case, the boxes span are placed on few line-boxes inside the div.
(The span elements can use different font-size.)
1) How can we know the number of the line-boxes ?
2) Can we know on which line-boxe an element span is placed ?
3) Can we know on which line-boxe the caret is placed (contenteditable) ?
Thank you

I'll suppose the DOM in your example is an effective example of the actual complexity of your DOM, and that a "line-boxe" is just a line of text.
1-2) For every <span> inside the <div>, you can count the number of lines they span with something like this:
var spans = div.getElementsByTagName("span"), spandata = [];
for (var i = 0; i < spans.length; i++) {
var rects = spans[i].getClientRects();
if (i > 0)
if (rects[0].bottom > obj.rects[obj.rects - 1].bottom)
var inirow = obj.lastRow + 1;
else var inirow = obj.lastRow;
var obj = {
element: spans[i],
rects: rects,
iniRow: inirow,
lastRow: inirow + rects.length - 1
};
spandata.push(obj);
}
Now spandata is a list of all the data you want about the <span> elements. I'm also supposing that each one of them may span through more than one line.
Keep in mind that getClientRects has some issues in IE<8.
3) In modern browsers, the getSelection method can help you:
var sel = window.getSelection();
if (sel.type === "Caret")
var span = sel.anchorNode.parentNode;
About the line position, I must say it's not an easy task. You can't easily get the page position of the caret. The simplest thing you can do is to place a dummy inline element in the place of the caret:
var text = sel.anchorNode.nodeValue;
sel.anchorNode.nodeValue = text.substring(0, sel.anchorOffset);
var dummy = document.createElement("i");
span.appendChild(dummy);
var pos = dummy.getBoundingClientRect();
sel.anchorNode.nodeValue = text;
span.removeChild(dummy);
pos contains the info of the position of the caret. Now you have to compare them with the rect infos about the span:
var rects = span.getClientRects();
for (var i = 0; i < rects.length; i++)
if (rects[i]].bottom === pos.bottom) break;
if (i < rects.length) {
for (var i = 0; i < spandata.length; i++) {
if (spandata[i].element === span) {
var line = spandata[i].iniRow + i;
break;
}
}
}
In the end, if line != null, it contains the line of the caret.
Man, that was complicated...

Let's say your div is in the el variable:
el.children.length; // Number of direct children
// You have one of the children in the "child" variable, to know its index:
[].indexOf.call( el.children, child ); // Index of child in el.children
I'm not mentioning the cross-browser issues there, but Array.prototype.indexOf is only available starting IE9 (so it works in all modern browsers).