Nativescript getElementsByClassName() Error

nativescript-dom
getelementsbyclassname innerhtml
getelementsbyclassname style
nativescript getviewbyid
getelementsbyclassname javascript
getelementsbyclassname multiple classes

I always get error when I try to getvalue from class after scrolling the screen

for example: on my phone, the screen will show 8 listitem, if I have more than 8 items, I need to scroll. And when I try to tap after scrolling, it is showing error.

here is my code

<GridLayout rows="*">
        <ListView row="0" items="{{ ListID }}" itemTap="onItemTap" class="list-group">
            <ListView.itemTemplate>
                <StackLayout class="list-group-item">
                    <Label text="{{ ID || 'Downloading...' }}" textWrap="true" class="OutletID" />
                    <Label text="{{ Name || 'Downloading...' }}" textWrap="true" class="OutletName" />
                </StackLayout>
            </ListView.itemTemplate>
        </ListView> 
    </GridLayout>

and js

function onItemTap(args) {
    const index = args.index;
    const page = args.object;
    var test = page.getElementsByClassName('OutletID')[index].text;
    console.log(test);
}
exports.onItemTap = onItemTap;

I haven't used nativescript before so take this with a grain of salt, but...

When you're using a component based library like NativeScript generally you don't want to fetch references to items in that component through some third party library. Using the dom to fetch those references is essentially that. You're assuming those elements are still even in the dom. Why would they render an element to the dom, then hide it? My guess is what they're doing under the hood is removing the element from the dom when it scrolls up and off the page which is why your lookup is failing. You get an index > 7, the page will only show 8, so when you ask the page for all of them, you get a list back of size 8 and then you try to get the 9th element (with index 8).

So I think the solution to your problem is to stop trying to "go around" the component model and instead work with the methods and values provided to you by the NativeScript framework.

In your onItemTap() you should be able to get a reference to the item that was tapped directly. So I think you could should look something like this.

function onItemTap(args) {
    console.log(args.item.text);
}

itemTap Emitted when an item in the is tapped. To access the tapped item, use event.item.

I couldn't find any definition for the class "itemTap" so I'm blind about what methods or attributes it has but here's where I found a reference to it. If you're trying to scrape a value off the dom itself (like the text attribute) you may need to do something like args.item.rawElement.text but that's specific to the API.

https://nativescript-vue.org/en/docs/elements/components/list-view/#events

getElementsByClassName, getElementsByTagName and , contains one of these functions I get an error similar to this: System.err: com.t DOM from "nativescript-dom" //const DOM = require("nativescript-dom"); However getElementsByTagName() always returns an empty array  Questions: I have html code: &lt;ul class="nav" id="topNav"&gt; &

getElementsByClassName is not a built-in method, it should be available only if you have installed the nativescript-dom plugin.

ListView operates quite differently than other components, it recycles the template as you scroll down / up for better performance so using getElementsByClassName here would not be a wise idea.

function onItemTap(args) {
    const index = args.index; // The index that was tapped
    const view  = args.view; // The item instance that was tapped
    const data = view.bindingContext // will return enter data item
}

Source: https://docs.nativescript.org/ui/ns-ui-widgets/list-view

NativeScript/NativeScript, getElementsByClassName("foo"); // returns [Button] }. querySelector() and querySelectorAll() (at least match on tag name, class name, and id). document.getElementsByClassName("quirky") That line is not using the function you created. Instead it is trying to use the built-in method that the web browser has.

i edited my js like this :

function onItemTap(args) {
    const index = args.index;
    const val = vm.ListID[index].Name;
    console.log(val);
}
exports.onItemTap = onItemTap;

note : vm is pagebindingContext and Name ('OutletID') is my array ListID({ ID : ID, Name : Name})

nativescript-dom, A NativeScript module for DOM Emulation. development · classList · getElementById · getElementsByTagName · getElementsByClassName  The request is probably not responding with text/xml or application/xml Content-Type headers. Therefore the response is not being treated as XML. A few solutions: Make sure your server responds with the correct headers.

Document.getElementsByClassName(), You may also call getElementsByClassName() on any element; it will return only elements which are descendants of the specified root element  Error Handling Handling errors in NativeScript core modules. A big difference between web and NativeScript applications is the way the Errors have been handled.

Dom, To use the module you just require() it: require("nativescript-dom"); getElementsByClassName(className) getElementsByClassName(​className). view. Getting Elements by ID, Tag Name, or Class to Code with JavaScript By Chris Minnick, Eva Holland In JavaScript, the getElementBy methods provide easy access to any element or groups of elements in a document without relying on parent/child relationships of nodes.

Nativescript angular 2 navigate topmost - angular - html, Call enableProdMode() to enabl e the production mode. JS: ANGULAR moduleName: ListPage in [nu ll] JS: ORIGINAL EXCEPTION: Error: Failed to load Page from entry. getElementsByClassName('cdk-overlay-container'); for (let i = 0;  var elements = document.getElementsByClassName ( names ); // or: var elements = rootElement .getElementsByClassName ( names ); elements is a live HTMLCollection of found elements. names is a string representing the class name (s) to match; multiple class names are separated by whitespace.

Comments
  • thank you for your advice. now i know what i have to do.