We Keep Coding

Why am I not getting the content of this element when I call it by its ID?

I want to limit how long a string is when updated by JS. To do so, I want to use a loop that checks the length of the current string and only accepts new inputs if the string is shorter than the maximum length.
For some reason when I ask for the length of the html element, it returns the... nature of the element?
This specifically: [object HTMLParagraphElement]
This is how I'm getting the html element:
const digits = document.getElementById("digits");
This is how I'm trying to limit the size, I marked which line I'm currently using to add numbers (it works on its own, I just want to limit how long the string can be):
addEventListenerList(numeral, "click", () => {
if (digits.toString().length > 10){ //(*)
return null;
} else {
digits.innerText += event.target.value; //This is the line that adds numbers.
}
});
So yeah, it's not working because line (*) is finding the current length to be 29 (the length of [object HTMLParagraphElement]). I have no idea how to get the length of the content, and not this... what is this exactly?
I don't know if it's useful, but just in case, numeral is a node list that I iterate through using this:
function addEventListenerList(list, event, fn){
for (let i = 0, len = list.length; i < len; i++) {
list[i].addEventListener(event, fn);
}
}

The most direct way to solve this is to use digits.textContent.length > 10 instead of digits.toString(). However, as others have noted, digits.value.length and/or digits.innerHTML.length may be relevant in some cases.
innerHTML is less desirable here because nested html objects or formatting tags like or will count as part of the calculated length. It also uses more memory than .textContent. See innerText vs innerHtml vs label vs text vs textContent vs outerText for a longer discussion on the differences.

You assigned the element to variable not its contents, to get the length of the contents depends on what element type it is.
If it is a input then you can get the value:
digits.value.length
If it is another type you can use the innerHTML property:
digits.innerHTML.length

How to limit Javascript's window.find to a particular DIV?

Is it possible to use Javascript in Safari/Firefox/Chrome to search a particular div container for a given text string. I know you can use window.find(str) to search the entire page but is it possible to limit the search area to the div only?
Thanks!

Once you look up your div (which you might do via document.getElementById or any of the other DOM functions, various specs here), you can use either textContent or innerText to find the text of that div. Then you can use indexOf to find the string in that.
Alternately, at a lower level, you can use a recursive function to search through all text nodes in the window, which sounds a lot more complicated than it is. Basically, starting from your target div (which is an Element), you can loop through its childNodes and search their nodeValue string (if they're Texts) or recurse into them (if they're Elements).
The trick is that a naive version would fail to find "foo" in this markup:
<p><span>fo</span>o</p>
...since neither of the two Text nodes there has a nodeValue with "foo" in it (one of them has "fo", the other "o").

Depending on what you are trying to do, there is an interesting way of doing this that does work (does require some work).
First, searching starts at the location where the user last clicked. So to get to the correct context, you can force a click on the div. This will place the internal pointer at the beginning of the div.
Then, you can use window.find as usual to find the element. It will highlight and move toward the next item found. You could create your own dialog and handle the true or false returned by find, as well as check the position. So for example, you could save the current scroll position, and if the next returned result is outside of the div, you restore the scroll. Also, if it returns false, then you can say there were no results found.
You could also show the default search box. In that case, you would be able to specify the starting position, but not the ending position because you lose control.
Some example code to help you get started. I could also try putting up a jsfiddle if there is enough interest.
Syntax:
window.find(aStringToFind, bCaseSensitive, bBackwards, bWrapAround, bWholeWord, bSearchInFrames, bShowDialog);
For example, to start searching inside of myDiv, try
document.getElementById("myDiv").click(); //Place cursor at the beginning
window.find("t", 0, 0, 0, 0, 0, 0); //Go to the next location, no wrap around
You could set a blur (lose focus) event handler to let you know when you leave the div so you can stop the search.
To save the current scroll position, use document.body.scrollTop. You can then set it back if it trys to jump outside of the div.
Hope this helps!
~techdude

As per the other answer you won't be able to use the window.find functionality for this. The good news is, you won't have to program this entirely yourself, as there nowadays is a library called rangy which helps a lot with this. So, as the code itself is a bit too much to copy paste into this answer I will just refer to a code example of the rangy library that can be found here. Looking in the code you will find
searchScopeRange.selectNodeContents(document.body);
which you can replace with
searchScopeRange.selectNodeContents(document.getElementById("content"));
To search only specifically in the content div.

If you are still looking for someting I think I found a pretty nice solution;
Here it is : https://www.aspforums.net/Threads/211834/How-to-search-text-on-web-page-similar-to-CTRL-F-using-jQuery/
And I'm working on removing jQuery (wip) : codepen.io/eloiletagant/pen/MBgOPB
Hope it's not too late :)

You can make use of Window.find() to search for all occurrences in a page and Node.contains() to filter out unsuitable search results.
Here is an example of how to find and highlight all occurrences of a string in a particular element:
var searchText = "something"
var container = document.getElementById("specificContainer");
// selection object
var sel = window.getSelection()
sel.collapse(document.body, 0)
// array to store ranges found
var ranges = []
// find all occurrences in a page
while (window.find(searchText)) {
// filter out search results outside of a specific element
if (container.contains(sel.anchorNode)){
ranges.push(sel.getRangeAt(sel.rangeCount - 1))
}
}
// remove selection
sel.collapseToEnd()
// Handle ranges outside of the while loop above.
// Otherwise Safari freezes for some reason (Chrome doesn't).
if (ranges.length == 0){
alert("No results for '" + searchText + "'")
} else {
for (var i = 0; i < ranges.length; i++){
var range = ranges[i]
if (range.startContainer == range.endContainer){
// Range includes just one node
highlight(i, range)
} else {
// More complex case: range includes multiple nodes
// Get all the text nodes in the range
var textNodes = getTextNodesInRange(
range.commonAncestorContainer,
range.startContainer,
range.endContainer)
var startOffset = range.startOffset
var endOffset = range.endOffset
for (var j = 0; j < textNodes.length; j++){
var node = textNodes[j]
range.setStart(node, j==0? startOffset : 0)
range.setEnd(node, j==textNodes.length-1?
endOffset : node.nodeValue.length)
highlight(i, range)
}
}
}
}
function highlight(index, range){
var newNode = document.createElement("span")
// TODO: define CSS class "highlight"
// or use <code>newNode.style.backgroundColor = "yellow"</code> instead
newNode.className = "highlight"
range.surroundContents(newNode)
// scroll to the first match found
if (index == 0){
newNode.scrollIntoView()
}
}
function getTextNodesInRange(rootNode, firstNode, lastNode){
var nodes = []
var startNode = null, endNode = lastNode
var walker = document.createTreeWalker(
rootNode,
// search for text nodes
NodeFilter.SHOW_TEXT,
// Logic to determine whether to accept, reject or skip node.
// In this case, only accept nodes that are between
// <code>firstNode</code> and <code>lastNode</code>
{
acceptNode: function(node) {
if (!startNode) {
if (firstNode == node){
startNode = node
return NodeFilter.FILTER_ACCEPT
}
return NodeFilter.FILTER_REJECT
}
if (endNode) {
if (lastNode == node){
endNode = null
}
return NodeFilter.FILTER_ACCEPT
}
return NodeFilter.FILTER_REJECT
}
},
false
)
while(walker.nextNode()){
nodes.push(walker.currentNode);
}
return nodes;
}
For the Range object, see https://developer.mozilla.org/en-US/docs/Web/API/Range.
For the TreeWalker object, see https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker

var elements = [];
$(document).find("*").filter(function () {
if($(this).text().contains(yourText))
elements.push($(this));
});
console.log(elements);
I didn't try it, but according the jQuery documentation it should work.

Here is how I am doing with jquery:
var result = $('#elementid').text().indexOf('yourtext') > -1
it will return true or false

Maybe you are trying to not use jquery...but if not, you can use this $('div:contains(whatyouarelookingfor)') the only gotcha is that it could return parent elements that also contain the child div that matches.

Javascript getElementsByTagName("div") what am I labeling?

I'm attempting to set the IDs of a group of divs "galleryboxes" (that are inside a another div, "galleryimages") to be increasing increments, ie. picture1, picture2, etc.
I've seen questions similar to this and tried to get my head around them, but it's difficult. Right now my questions are, what do I get from the second line here? What is 'galleryboxes'? Am I able to cycle through it like an array and label ids like I'm attempting to?
var galleryimages = document.getElementById("galleryimages");
var galleryboxes = galleryimages.getElementsByTagName("div");
var k = 1;
for (var i = 0; i < galleryboxes.length; i++) {
galleryboxes[i].setAttribute=("id", "picture" + k);
k++;
}
The code seems to work, but I don't think I'm actually labeling the divs I want to be labeling; I check what the contents are of "picture1" and it comes up as null (It should be full of a picture and some text).

What do I get from the second line here?
The line in question is this:
var galleryboxes = galleryimages.getElementsByTagName("div");
What this does is provide a live nodeList complete with all the elements with the tag name <div> that are child to the element which the variable galleryimages represents. Note that this is not an actual array, and there are distinguishing characteristics between an array and a nodeList. Most notably, a nodeList does not inherit from the Array constructor, and thus does not contain essential methods like push, pop, and sort common to all arrays.
Am I able to cycle through it like an array and label ids like I'm attempting to?
Yes. This is made easy for us because fortunately nodeLists have a length property. You've already showed how you can loop through them, but the line on which you set the attribute is ill-formed:
galleryboxes[i].setAttribute=("id", "picture" + k);
The equal sign should not be there. This invokes a syntax error. If you take the equal out, the code works fine.

galleryboxes give you a node list which you can iterate through like an array but you have an error here
galleryboxes[i].setAttribute=("id", "picture" + k);
should be
galleryboxes[i].setAttribute("id", "picture" + k);
notice the lack of =
It can also be done using the id property.
galleryboxes[i].id = "picture" + k;

galleryboxes is an array that contains all the divs from within the element "galleryimages"
<html>
<head>
...
<head>
<body>
<div id="galleryimages">
<div class="img_container"></div>
<p>This text will not be in the array...</p>
<div class="img_container"></div>
<div class="img_container"></div>
</div>
</body>
</html>
If your code looked something like above, the variable galleryboxes would only contain the divs.
As for when you check the contents of "picture1" it is probably null, I think you have defined an background image for #picture1 in css, am I right?
Anyways what you should do is too use something like firebug to see the generated DOM. That way you can debug much easier.

You will need to set the attribute directly (galleryboxes[i].id) if you want to access it programatically afterwards (at least if you want it to work consistently). So:
var galleryimages = document.getElementById("galleryimages");
var galleryboxes = galleryimages.getElementsByTagName("div");
for (var i = 0; i < galleryboxes.length; i++) {
galleryboxes[i].id = "picture" + (i + 1);
}
See this jsfiddle for an example.

I know, you are looking for javascript answers here but you can also try this jQuery code, if you want too:
$("#galleryimages > div").each(function(i) {
$(this).prop("id", "picture" + (i + 1));
});​
See just 3 lines of code :)

javascript .children not working in Camino Browser

This is an odd one, for whatever reason, getting the children of an element doens't work in Camino browser. Works in all other browsers. Anyone know how to fix this? Google is no help :(
var site_result_content = document.getElementById(content_id);
site_child_nodes = site_result_content.children;
alert('started');
for(i=0;i<site_child_nodes.length;i++) {
alert('cycle1');
document.getElementById(site_child_nodes[i].id).className = 'tab_content';
ShowHide(site_child_nodes[i].id,'hidden');
}
In this case, the started alert is called, but the cycle1 isn't.

Use childNodes instead. children started out as a proprietary property that in IE, whereas childNodes is in the W3C DOM spec and is supported by every major browser released in the last decade. The difference is that children contains only elements whereas childNodes contains of all types, in particular text nodes and comment nodes.
I've optimized your code below. You should declare all your variables with var, including those used in loops such as i. Also, document.getElementById(site_child_nodes[i].id) is unnecessary: it will fail if the element has no ID and is exactly the same as site_child_nodes[i] otherwise.
var site_result_content = document.getElementById(content_id);
var site_child_nodes = site_result_content.childNodes;
alert('started');
for (var i = 0, len = site_child_nodes.length; i < len; ++i) {
if (site_child_nodes[i].nodeType == 1) {
alert('cycle1');
site_child_nodes[i].className = 'tab_content';
ShowHide(site_child_nodes[i].id, 'hidden');
}
}

I'd hazard a guess that it's not been implemented yet (it was only implemented in Firefox 3.5). You can use childNodes instead, which returns a list of nodes (rather than just elements). Then check nodeType to make sure it's an element.
var site_result_content = document.getElementById(content_id);
site_child_nodes = site_result_content.childNodes;
alert('started');
for(i=0;i<site_child_nodes.length;i++) {
// Check this is actually an element node
if (site_child_nodes[i].nodeType != 1)
continue;
alert('cycle1');
document.getElementById(site_child_nodes[i].id).className = 'tab_content';
ShowHide(site_child_nodes[i].id,'hidden');
}

Removing items from data bound array

How do I remove an items from a data bound array? My code follows.
for(var i = 0; i < listBox.selectedIndices.length; i++) {
var toRemove = listFiles.selectedIndices[i];
dataArray.splice(toRemove, 1);
}
Thanks in advance!
Edit Here is my swf. The Add Photos works except when you remove items.
http://www.3rdshooter.com/Content/Flash/PhotoUploader.html
Add 3 photos different.
Remove 2nd photo.
Add a different photo.
SWF adds the 2nd photo to the end.
Any ideas on why it would be doing this?
Edit 2 Here is my code
private function OnSelectFileRefList(e:Event):void
{
Alert.show('addstart:' + arrayQueue.length);
for each (var f:FileReference in fileRefList.fileList)
{
var lid:ListItemData = new ListItemData();
lid.fileRef = f;
arrayQueue[arrayQueue.length]=lid;
}
Alert.show('addcomplete:' + arrayQueue.length);
listFiles.executeBindings();
Alert.show(ListItemData(arrayQueue[arrayQueue.length-1]).fileRef.name);
PushStatus('Added ' + fileRefList.fileList.length.toString() + ' photo(s) to queue!');
fileRefList.fileList.length = 0;
buttonUpload.enabled = (arrayQueue.length > 0);
}
private function OnButtonRemoveClicked(e:Event):void
{
for(var i:Number = 0; i < listFiles.selectedIndices.length; i++) {
var toRemove:Number = listFiles.selectedIndices[i];
//Alert.show(toRemove.toString());
arrayQueue.splice(toRemove, 1);
}
listFiles.executeBindings();
Alert.show('removecomplete:' + arrayQueue.length);
PushStatus('Removed photos from queue.');
buttonRemove.enabled = (listFiles.selectedItems.length > 0);
buttonUpload.enabled = (arrayQueue.length > 0);
}

It would definitely be helpful to know two things:
Which version of ActionScript are you targeting?
Judging from the behavior of your application, the error isn't occurring when the user removes an item from the list of files to upload. Looks more like an issue with your logic when a user adds a new item to the list. Any chance you could post that code as well?
UPDATE:
Instead of: arrayQueue[arrayQueue.length]=lid
Try: arrayQueue.push(lid)
That will add a new item to the end of the array and push the item in to that spot.
UPDATE 2:
Ok, did a little more digging. Turns out that the fileList doesn't get cleared every time the dialog is opened (if you're not creating a new instance of the FileReferenceList each time the user selects new files). You need to call splice() on the fileList after you add each file to your Array.
Try something like this in your AddFile() method...
for(var j:int=0; j < fileRefList.fileList.length; j++)
{
arrayQueue.push(fileRefList.fileList[j]);
fileRefList.fileList.splice(j, 1);
}
That will keep the fileList up to date rather than holding on to previous selections.

I see one issue. The selected indices are no longer valid once you have spliced out the first element from the array. But that should only be a problem when removing multiple items at once.
I think we need to see more code about how you are handling the upload before we can figure out what is going on. It looks to me like you are holding a reference to the removed FileReference or something. The described problem is occurring when you upload a new file, not when you remove the selected one.

Do you mean to use listBox and listFiles to refer to the same thing?
I'm stepping out on a limb here, because I don't have a ton of experience with JavaScript, but I'd do this the same way that I'd do it in C, C++, or Java: By copying the remaining array elements down into their new locations.
Assuming that listFiles.selectedIndices is sorted (and its contents are valid indices for dataArray), the code would be something like the following:
(WARNING: untested code follows.)
// Don't bother copying any elements below the first selected element.
var writeIndex = listFiles.selectedIndices[0];
var readIndex = listFiles.selectedIndices[0] + 1;
var selectionIndex = 1;
while(writeIndex < (dataArray.length - listFiles.selectedIndices.length)) {
if (selectionIndex < listFiles.selectedIndices.length) {
// If the read pointer is currently at a selected element,
// then bump it up until it's past selected range.
while(selectionIndex < listFiles.selectedIndices.length &&
readIndex == listFiles.selectedIndices[selectionIndex]) {
selectionIndex++;
readIndex++;
}
}
dataArray[writeIndex++] = dataArray[readIndex++];
}
// Remove the tail of the dataArray
if (writeIndex < dataArray.length) {
dataArray.splice(writeIndex, dataArray.length - writeIndex);
}
EDIT 2009/04/04: Your Remove algorithm still suffers from the flaw that as you remove items in listFiles.selectedIndices, you break the correspondence between the indices in arrayQueue and those in listFiles.selectedIndices.
To see this, try adding 3 files, then doing "Select All" and then hit Remove. It will start by removing the 1st file in the list (index 0). Now what had been the 2nd and 3rd files in the list are at indices 0 and 1. The next value taken from listFiles.selectedIndices is 1 -- but now, what had been the 3rd file is at index 1. So the former File #3 gets spliced out of the array, leaving the former 2nd file un-removed and at index 0. (Using more files, you'll see that this implementation only removes every other file in the array.)
This is why my JavaScript code (above) uses a readIndex and a writeIndex to copy the entries in the array, skipping the readIndex over the indices that are to be deleted. This algorithm avoids the problem of losing correspondence between the array indices. (It does need to be coded carefully to guard against various edge conditions.) I tried some JavaScript code similar to what I wrote above; it worked for me.
I suspect that the problem in your original test case (removing the 2nd file, then adding another) is analogous. Since you've only shown part of your code, I can't tell whether the array indices and the data in listFiles.selectedIndices, arrayQueue, and fileRefList.fileList are always going to match up appropriately. (But I suspect that the problem is that they don't.)
BTW, even if you fix the problem with using splice() by adjusting the array index values appropriately, it's still an O(N2) algorithm in the general case. The array copy algorithm is O(N).

I'd really need to see the whole class to provide a difinitive answer, but I would write a method to handle removing multiple objects from the dataProvider and perhaps assigning a new array as the dataProvider for the list instead of toying with binding and using the same list for the duration. Like I said, this is probably inefficient, and would require a look at the context of the question, but that is what I would do 9unless you have a big need for binding in this circumstance)
/**
* Returns a new Array with the selected objects removed
*/
private function removeSelected(selectedItems:Array):Array
{
var returnArray:Array = []
for each(var object:Object in this.arrayQueue)
{
if( selectedItems.indexOf(object)==-1 )
returnArray.push( object )
}
return returnArray;
}

You might be interested in this blog entry about the fact that robust iterators are missing in the Java language.
The programming language, you mentioned Javascript, is not the issue, it's the concept of robust iterators that I wanted to point out (the paper actually is about C++ as the programming language).
The [research document]() about providing robust iterators for the ET++ C++ framework may still e helpful in solving your problem. I am sure the document can provide you with the necessary ideas how to approach your problem.