How to make HTMLCollection to display as a string - javascript

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);

Related

multiple document.getElementById for var

Hello i want to use "var" on multiple Id´s.
// Get modal element
var modal = document.getElementById('modal1');
// Get open modal button
var modalBtn = document.getElementById('Info1');
// Get close button
var closeBtn = document.getElementById('closeBtn1');
This is the code that works, but i want to do is that it is "modal1, modal2 ... and Info1, Info2...
Can you help me with that?
Hey Celtor you can find basic knowledge about JavaScript Variables
in here.
then to do so you can use for loop with array as so:
// Create list of modals with 15 undefined elements
var modals = Array(15);
for (i = 0; i < x.length; i++) {
// Assign the elemets to the list in their index
modals[i] = document.getElementById('modal'+i);
}
Hope this helps!
You will have to use a function like this:
var getElementsByIds = function(ids){
var elements = [];
for(var i = 0; i < ids.length; i++){
elements[ids[i]] = document.getElementById(ids[i]);
}
return elements;
}
This will return an array in which each key is an element you specified, and the key is the element's ID.

Attempting to return option text rather than value as part of loop

I am working on some code that loops through a selection of dropdowns to ensure the correct values are selected. As part of this, I need to return the name of the select and the text of the selected option, as below:
var elements = document.getElementsByTagName("select");
for(i=0; i < elements.length ; i++){
total_fields += Number(elements[i].value);
document.getElementById("answers_email").value+=elements[i].name +"-"+elements[i].selectedIndex.text;
}
The name is returned but the text is 'undefined'. I have also tried using elements[i].text but it yields the same result.
Any help will be greatly appreciated.
Use this code to get your selected text
var index = elements[i].selectedIndex;
var text = elements[i].options[index].text;
after that, add it to your 'answers_email' element:
document.getElementById("answers_email").value +=
elements[i].name+"-"+text;
You have to access the selected option object inside the options array with the selectedIndex, and then get its text.
var elements = document.getElementsByTagName("select");
for(i=0; i < elements.length ; i++){
var current_select = elements[i];
var selected_text = current_select.options[current_select.selectedIndex].text;
}

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().

Jquery ID selector doesnt work with a variable

I've read a billion questions like this, but never found an answer yet.
Anyway, when I type
var variableContainingID = "header";
var div = $("#"+variableContainingID);
It returns 'undefined'
But when I type
var variableContainingID = "header";
var div = $('[id^="'+variableContainingID+'"]');
It works fine.
Any ideas why?
UPDATE
var json = '{"divs":['
var children = $(".parent_container > div");
var idArray = [];
var numArray = [];
for (var x=0; x<children.length; x++) {
var eleid = $(children[x]).attr("id");
idArray.push('"'+eleid+'"');
numArray.push(x+1);
}
var idString = idArray.join(",");
var numString = numArray.join(",");
json += idString;
json += '],"number":['+numString+']}';
var obj = JSON.parse(json);
for (x in obj["divs"]) {
var div = $('[id^="'+obj["divs"][x]+'"]');
}
Do you think the double quotes could be throwing it off?
As you wrote in your question:
var div = $("#"+variableContainingID);
var div = $('[id^="'+variableContainingID+'"]');
These two lines are not identical. The first one, will select an element with id of header. The second one,
selects elements that have the specified id with a value beginning exactly with a given string (header).
So if you have an element like this:
<div id="headerHere"></div>
The first one ($("#"+variableContainingID)) can't select it, but the second one ($('[id^="'+variableContainingID+'"]')) can select that element.
This is because you used ^= in your selector. See jQuery API: Attribute Starts With Selector (name^="value").
It's worth to see all attribute selectors in jQuery.
Attribute Selectors in jQuery

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.

Categories