We Keep Coding

Access clone containers produced by FOR LOOP

I have a container and i have cloned it to create 3 more containers. The main reason i used the Clone property was because i didnt want to rewrite the code again and again to make the same containers. Now i want to update different data for the cloned containers. I have managed to pass the heading name for the original container as you can see in the code. Now how do I access my cloned containers and change the data in them. I have put the code which i tried below (failed). When i put data[1],data[0] etc, nothing gets updated.
Current JavaScript
$(document).ready(function() {
var e = $('.column'); //column is the class which contains the container
for (var i = 0; i < 3; i++) {
e.clone().insertAfter(e);
}
document.getElementById("heading").innerHTML = ("TRAILER 22");
Failed Javascript , this does not update anything on the webpage.
$(document).ready(function() {
var e = $('.column');
for (var i = 0; i < 3; i++) {
e.clone().insertAfter(e);
}
var data = document.querySelectorAll(".column");
data[1].document.getElementById("heading").innerHTML = ("TRUCK 22");
});

You try to do a document call on a element, that is not possible. If you want to change the first column (i switched the code to jQuery, what makes it a lot easier):
$(document).ready(function() {
var e = $('.column');
for (var i = 0; i < 3; i++) {
e.clone().insertAfter(e);
}
var data = $(document).find(".column:first-of-type");
data.html("TRUCK 22");
});

How to make HTMLCollection to display as a string

I have created an unordered list in a div element. It all appears where it should but it shows incorrect values. The value shown is: "[object HTMLHeadingElement]" for what should have been car models. Any suggestions for how I can make the car models display instead? Thank you!
var name = document.getElementsByTagName("h4");
var myList = document.createElement("ul");
for (i = 0; i < name.length; i++) {
var listItem = document.createElement("a");
var div = document.getElementsByTagName("div");
var listValue = document.createTextNode(name[i]);
listItem.appendChild(listValue);
myList.appendChild(listItem);
lastdiv.appendChild(myList);
}

You need to read the text content of the h4. For that use name[i].textContent, as name[i] is a DOM Node.
var listValue = document.createTextNode(name[i].textContent);

Trying to add get each listen item to log a unique number

I have created a list using a for loop and want to add an event listener to each of them, so that when each item is clicked, it's logged in the console the item number (e.g. if list item 1 is clicked, console log returns the variable currentNumber as 0).
However, with my current code, all I'm getting in the console log is "4". Can someone please help me with this? Thank you.
for (i = 0; i < tipsCatalog.length; i++) {
var newCategory = document.createElement('li');
newCategory.id = "sMonTipHeadline-" + [i];
newCategory.className = "sMonTipHeadline";
newCategory.innerHTML = tipsCatalog[i].tipHeadline;
catalogContainer.appendChild(newCategory);
}
var currentNumber = [];
for (i = 0; i < tipsCatalog.length; i++) {
currentNumber[i] = i;
tipsCatalogList[i].addEventListener('click', function() {console.log(currentNumber[i])});
}

I would try to add the number inside an element's attribute and then take it from there when you need it.
tipsCatalogList[i].addEventListener('click', function() {console.log($(this).attr('yournumber'))});

obtaining all items of listView in winjs

I have a listview div on screen and I have added itemDataSource to it successfully
var lettersList = new WinJS.Binding.List(jsonArrayForClearance);
var list_ = document.getElementById("prodListView").winControl;
list_.itemDataSource = lettersList.dataSource;
list_.itemTemplate = document.getElementById("tileTemplate");
list_.forceLayout();
Now in each item I have added a custom input type for user to specify(using template). I want to iterate through all the items of list and obtain the value of that input type in an array.
how can I do it?
EDIT: My question is to access custom input type declared in list items. As such we use following code to access any input type named "inpT"
document.getElementById('inpT');
but how to access the same from list item? can I use Following code(as suggested by user2608614)
var listView = document.getElementById("prodListView").winControl;
var list = listView.itemDataSource.list;
for (var i = 0; i < list.length; i++) {
var item = list.getAt(i);
item.getElementById('inpT');
}

You can iterate through the list elements like this:
var listView = document.getElementById("prodListView").winControl;
listView.itemDataSource.getCount()
.done(function(count) {
for (var i = 0; i < count ; i++) {
listView.itemDataSource.itemFromIndex(i)
.done(function (item) {
//***item will contain your property
});
}
});
Is not the best solution as it make it difficult to chain the promises, I'm also looking for a better one. But it works.

Since you're using a Binding.List you can just iterate through that much like an array.
var listView = document.getElementById("prodListView").winControl;
var list = listView.itemDataSource.list;
for (var i = 0; i < list.length; i++) {
var item = list.getAt(i);
// do something with this item
}
The only thing to remember is that it doesn't support [] and instead you have to use .getAt() and .setAt().

How to get element/component name using JavaScript?

I have a webpage that contains ASP.NET panels and JavaScript that gets all of the components in the page:
var items = Sys.Application.getComponents();
I need to get the name/ID of each of the elements in the items variable. I have tried the following code: (but it doesn't work)
for (var item in items)
{
alert(item.name);
}
What attribute of 'item' contains the name/ID? How can I modify the above code to do this?

Use the get_name() and get_id() functions instead.
var items = Sys.Application.getComponents() ;
for( var i = 0 ; i < items.length; i++ ) {
var item = items[i];
var id = item.get_id();
var name = item.get_name();
}
http://ajax.asp.net/docs/ClientReference/Sys/ApplicationClass/SysApplicationGetComponentsMethod.aspx

None. item is the key/property so you want items[item].name.
However, if items is an array, using for..in to iterate over it is completely inappropriate. In this case use for(var i = 0; i < items.length; i++) and var item = items[i] inside the loop body.