Cant select html elements created as a template with javascript - javascript

I created a table with java script, of rows and cols, basically a template for seats, but when I try to select the html elements, using document.getELementbyclassname, I get undefined. I am using every in j query $(document).ready(function), still I get undefined.
function createTemplate(rows,cols){
var rows = rows;
var col = cols;
for(var i = 0; i < rows; i++){
$("#container").append("<div class = 'row rower'></div>");
}
for(var y = 0; y < col; y++){
$(".rower").append("<div class = 'col-xs-1 cols'> </div>");
}
for(var z = 0; z < 1; z++){
$(".cols").append("<button class = 'btn btn-danger proness'></button>");
}
var buttons = document.getElementsByClassName("proness");
for(var l = 0; l < buttons.length; l++){
buttons[l].innerHTML = l;
}
var row = document.getElementsByClassName("rower");
for(var x = 0; x < row.length;x++)
{
row[x].style.padding = "1px";
}
};
Now, after i use
var button = document.getElementByClassName("btn");
console.log(button[3]); // UNdefined


Since you're using jquery already, you can use jquery to address the buttons.
Fiddle: https://jsfiddle.net/j6ju2cxs/
var buttons = $(".btn");
console.log($(buttons[3]).html());
If the number of cells that result from the rows and columns input into your function is less than 3, looking for buttons[3] will return undefined.

Related

Get Coordinates of a Table Cell in JavaScript

I am working on a maze generating algorithm visualisation in JavaScript, I made a 5x5 grid but now I require that whenever i click a table cell(), I get its coordinates i.e in which row it is and in which column. How would I go about implementing this?
Here's what im doing right now:
cell.onclick = function() {
console.log(this)
}
Here's how Im generating the cells and rows:
for(let i = 0; i < rows; i++) {
let row = grid.insertRow();
for (let j = 0; j < columns; j++) {
let cell = row.insertCell()
}}
Edit: I played around with the code and implemented MauriceNino's solution.
Here's the code:
for(let i = 0; i < rows; i++) {
let row = grid.insertRow();
for (let j = 0; j < columns; j++) {
let cell = row.insertCell()
cell.row = i
cell.column = j
cell.onclick = function(evt) {
console.log(cell.row + 1)
console.log(cell.column + 1)
}
}
}

insert rows using sheets on google spreadsheets

I am in the process of adapting the code below to insert a full row after function get emails is run. the extra row function works so i thought i would add line to the end of the getEmails. But it adds around 30 extra rows, i only need one added.
sheet.insertRows(2)
below is the getEmail code.
function getEmails() {
var label = GmailApp.getUserLabelByName("pollux");
var threads = label.getThreads();
var row = 3;
for (var i = 0; i < threads.length; i++) {
var messages=threads[i].getMessages();
for (var m=0; m < messages.length; m++) {
sheet.getRange(row,1).setValue(messages[m].getPlainBody());
row++;
sheet.insertRows(2);
some helpful suggestions would be great.
Cheers Mark

Remove this line sheet.insertRows(2);
and place outside this for loop
for (var i = 0; i < threads.length; i++) {

Changed code to
function getEmails() {
var label = GmailApp.getUserLabelByName("pollux");
var threads = label.getThreads();
var row = 3;
sheet.insertRows(2);
for (var i = 0; i < threads.length; i++) {
var messages=threads[i].getMessages();
for (var m=0; m < messages.length; m++) {
sheet.getRange(row,1).setValue(messages[m].getPlainBody());
row++;
now adds line and moves row down as 1 as i need.

Return an array for each column from grid

I have this function that is returning all elements of my grid but on column:
var cols = function(){
var c = $('.row');
for (var i = 0; i < c.length; i++) {
for (var j = 0; j < c.length; j++){
var x = c[j].children[i];
console.log(x);
//if(x != 0 ){return c;}
}
}
}
cols();
That means this function will take each element from my grid and will loop from top to bottom and after that will take the second column and so on.
I want to return an array for each column, I also have some classes on first row called header and other ethos will be to count between header classes n elements and return an array but I don't know how to do that :|
fiddle:

Just push all the objects from the inner for loop into an array which is created in the outer for loop:
var cols = function(){
var c = $('.row');
for (var i = 0; i < c.length; i++) {
var tmp_array = [];
for (var j = 0; j < c.length; j++){
var x = c[j].children[i];
tmp_array.push(x);
//x.css({'background': 'rgba(255, 255, 255, 0.3)'});
//if(x != 0 ){return c;}
}
console.log(tmp_array);
}
}
Updated fiddle: https://jsfiddle.net/c310st3o/4/

How to get id from an innerHTML in javascript?

I have written the following function.
There are controls inside Table which is inside a div.
I need to print id of all the controls
function getID() {
debugger;
var ids = [];
var children = document.getElementById("divAlarmSection").children;
for (var i = 0, len = children.length; i < len; i++) {
ids.push(children[i].id);
var table = document.getElementById(children[i].id);
var rows = table.rows;
for (i = 0, n = rows.length; i < n; ++i) {
var cells = rows[i].getElementsByTagName('td');
for (var x = 0; x < cells.length; x++) {
if (cells[x].length != 0) {
alert(cells[x].innerHTML);
}
}
}
}

use .getElementsByTagName("*") on cells[x] and access 'ID' property of the result. So your last 'for' loop becomes:
var elements = cells[x].getElementsByTagName("*")
for(var len=0;len<elements.length;len++)
console.log(elements[len].id);
Also, if you know the inner structure of each 's and its consistent, you can look for that element in .getElementsByTagName()

having problems with for loop in javascript

I have a table with numbers but they are stored as string so I am trying to use the function parseFloat to convert it into a table of ints. However, no matter how I do the for loops it gives me a blank table. I can parse the row and it will give me a single int. I can parse a single int as well but cant seem to parse a row or the table. here is what I have so far. This is just trying to convert one row. I tried two for loops for the entire table but that didn't work either. thanks.
var c =[];
var entries = $.parseJSON('<?php print(json_encode($try, true)); ?>');
for (var j = 0; j < 12; j++)
{
for (var i = 0; i < 7; i++)
{
c [j][i] = parseFloat(entries[j][i]);
}
}
alert(c);
here is entries json encodes [["-248","-163","-455","-1413","-1294","-1296","-1089"],["-172","-219","-1186","-1368","-1480","-1079","-845"],["-98","-198","-703","-996","-1100","-585","-616"],["-116","-241","-498","-642","-704","-354","-430"],["-137","-117","-264","-525","-533","-269","-476"],["-12","87","-257","-463","-551","-302","-535"],["170","61","-250","-472","-659","-220","-605"],["159","96","-234","-513","-617","-196","-710"],["185","117","-272","-521","-610","-258","-798"],["208","95","-234","-534","-696","-280","-854"],["192","151","-188","-641","-739","-279","-957"],["249","223","-235","-684","-763","-339","-978"]]

You have to initialize the second dimension of your array to also be an array. As it stands now, c[j] is just a single value so you can't do c[j][i] on it. There is also an error in your first for loop where you need to compare the value of j, not i. See this fixed code:
var c = [];
var entries = $.parseJSON('<?php print(json_encode($try, true)); ?>');
for (var j = 0; j < 12; j++)
{
c[j] = [];
for (var i = 0; i < 7; i++)
{
c [j][i] = parseFloat(entries[j][i]);
}
}
alert(c);

In your first loop for (var j = 0; i < 12; j++), you are using i for iteration but it is undefined and it should be j instead of i
var c =[];
var entries = $.parseJSON('<?php print(json_encode($try, true)); ?>');
for (var j = 0; j < entries.length ; j++)
{
c[j] = [];
for (var i = 0; i < entries[i].length ; i++)
{
c [j][i] = parseFloat(entries[j][i]);
}
}

Categories

Resources