Javascript throws error

[fumeeptc]

Hello!
I have problem using 2 javascript codes . At Least i think so!
So i will explain:

I have javascript code that scrools down chat scrool bar

var scrollContainer = document.getElementById("style-3");

// Define the Mutation Observer
var observer = new MutationObserver(function(mutations) {

    // Compute sum of the heights of added Nodes
    var newNodesHeight = mutations.reduce(function(sum, mutation) {
        return sum + [].slice.call(mutation.addedNodes)
            .map(function (node) { return node.scrollHeight || 0; })
            .reduce(function(sum, height) {return sum + height});
      }, 0);

    // Scroll to bottom if it was already scrolled to bottom
    if (scrollContainer.clientHeight + scrollContainer.scrollTop + newNodesHeight + 10 >= scrollContainer.scrollHeight) {
        scrollContainer.scrollTop = scrollContainer.scrollHeight;
      }

});

// Observe the DOM Element
observer.observe(scrollContainer, {childList: true});

I thought its working!But then i needed to get chat message id and put it into a modal.
Here is javascript for modal:

$(document).ready(function() {

  $('a[data-toggle=modal], button[data-toggle=modal]').click(function () {

    var data_id = '';

    if (typeof $(this).data('id') !== 'undefined') {

      data_id = $(this).data('id');
    }

    $('#bookId').val(data_id);
  })
});

Modal pops out id is going to modal but error in console:

account.php:338 Uncaught TypeError: Reduce of empty array with no initial value
at Array.reduce (native)
at http://www.domain.com/account.php:338:14
at Array.reduce (native)
at MutationObserver. (http://www.domai.com/account.php:335:36)

Whats wrong?

Thanks

[liontas76]

@fumeeptc

var scrollContainer = document.getElementById(“style-3”);

// Define the Mutation Observer
var observer = new MutationObserver(function(mutations) {

// Compute sum of the heights of added Nodes
var newNodesHeight = mutations.reduce(function(sum, mutation) {
    return sum + [].slice.call(mutation.addedNodes)
        .map(function (node) { return node.scrollHeight || 0; })
        .reduce(function(sum, height) {return sum + height});
  }, 0);

// Scroll to bottom if it was already scrolled to bottom
if (scrollContainer.clientHeight + scrollContainer.scrollTop + newNodesHeight + 10 >= scrollContainer.scrollHeight) {
    scrollContainer.scrollTop = scrollContainer.scrollHeight;
  }

});

Set this:

.reduce(function(sum, height) {return sum + height;},0);

[fumeeptc]

Thanks allot man can you little explain it to me?

[liontas76]

The reduce() method get some parameters.The general type of this method is
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
So in your code you missed the initial value parameter.I set 0.

[fumeeptc]

Thanks allot!Saved my day