0

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
Kalamarico
  • 5,466
  • 22
  • 53
  • 70
Vigoss fridge
  • 36
  • 4
  • 3
    There is no such function `getElementByClassName`. The function is called `getElementsByClassName`. – Dekel Sep 15 '17 at 00:22
  • 1
    Possible duplicate of [Javascript: How to get only one element by class name?](https://stackoverflow.com/questions/21436550/javascript-how-to-get-only-one-element-by-class-name) – MaxZoom Sep 15 '17 at 00:25
  • 1
    Hey Vigoss fridge, your problem would be a little easier to solve if you included the html and css you are using that will be affected by the javascript code you wrote. It definitely helps to see how code is relating to each other. Sometimes the answer for a problem in one development language is tied into how you are referring to it from another development language. – Shenole Latimer Sep 15 '17 at 01:20
  • You can get more helpful logging by writing `console.log(button)` and dumping out the entire array. I suggest also adding similar logging to `createTemplate` to ensure code is running in the order you believe it is. – skirtle Sep 15 '17 at 05:09

1 Answers1

0

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.

Radio
  • 2,810
  • 1
  • 21
  • 43
  • I mean, i have no problem in generating the template, I am seing the template in my HTML view, that means the template is generated. But, after i use the function create_template(); i try to get the elements generated by the template using document.getEllementsbyClassname("proness");but i get nothing, like undefined. Like no such html exists. – Vigoss fridge Sep 15 '17 at 06:55
  • My answer returns the html of the test case shown in the question. I am not sure what else to add. – Radio Sep 15 '17 at 17:37
  • Fixed the problem, what i did was, i added a settimeout function for 2 secs, and it solved it, because when i checked the console, the buttons array returned was empty, but setting the timout to 2 secs, it worked fine. – Vigoss fridge Sep 16 '17 at 09:21