javascript - Uncaught TypeError: scrollIntoView is not a function - Stack Overflow

I can't figure out why, but scrollIntoView() function doesn't work. The browser displays an error: Uncaught TypeError: element.scrollIntoView is not a function at .... The element element is defined and displayed in console. I haven't been able to find any answer in the Internet. Below is simplified code:

[...]
<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Surname</th>
        </tr>
    </thead>
    <tbody>
        <?php 
        if (is_array($array)) {
            foreach ($array as $element) { ?>
                <tr data-someid="<?= $element->some_id ?>">
                    <th><?= $element->id ?></th>
                    <td><?= $element->name ?></td>
                    <td><?= $element->surname ?></td>
                </tr>
            <?php } 
        } ?>
    </tbody>
</table>
[...]
<script>
    var element= document.querySelectorAll('[data-someid="' + someId + '"]');
    console.log(element); // displays the element well
    element.scrollIntoView();
</script>
[...]

Do somebody have any ideas why it doesn't work?

I can't figure out why, but scrollIntoView() function doesn't work. The browser displays an error: Uncaught TypeError: element.scrollIntoView is not a function at .... The element element is defined and displayed in console. I haven't been able to find any answer in the Internet. Below is simplified code:

[...]
<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Surname</th>
        </tr>
    </thead>
    <tbody>
        <?php 
        if (is_array($array)) {
            foreach ($array as $element) { ?>
                <tr data-someid="<?= $element->some_id ?>">
                    <th><?= $element->id ?></th>
                    <td><?= $element->name ?></td>
                    <td><?= $element->surname ?></td>
                </tr>
            <?php } 
        } ?>
    </tbody>
</table>
[...]
<script>
    var element= document.querySelectorAll('[data-someid="' + someId + '"]');
    console.log(element); // displays the element well
    element.scrollIntoView();
</script>
[...]

Do somebody have any ideas why it doesn't work?

• javascript
• php
• html
• typeerror
• js-scrollintoview

Share Improve this question Follow edited Feb 2, 2019 at 14:24 Andrew Shaban asked Feb 2, 2019 at 14:13 Andrew ShabanAndrew Shaban 13722 silver badges1616 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

document.querySelectorAll() returns a list of DOM elements. Right now you're trying to access a method .scrollIntoView on the returned NodeList which of course doesn't exist.

You probably meant to use document.querySelector() which returns a single element.