Find if numbers in an array are between two numbers and the output number of values ​​that are between

One approach is as follows:

// a changed (hopefully meaningful) name for the function,
// lower: Number, the lower-boundary,
// upper: Number, the upper-boundary,
// haystack: Array, the array of values:
function numbersBetween(lower, upper, haystack) {

  // if every value of the Array is, or can be coerced to,
  // a Number then we continue to work with that Array:
  if (haystack.every(value => Number(value))) {

    // Here we use Array.prototype.filter() to filter the
    // values of the Array according the function:
    return haystack.filter(

      // here we use an Arrow function, since we don't need
      // to use a 'this'; here we retain the current value ('n')
      // in the Array if that Number is greater than the
      // lower-boundary and lower than the upper-boundary:
      n => n > lower && n < upper
    );
  }

  // otherwise, if not every value is, or can be coerced,
  // to a Number we simply return an empty Array:
  return [];
}

// this caches the element with the id of 'output':
let list = document.getElementById('output'),

  // we create an <li> element:
  li = document.createElement('li'),

  // we create a document fragment:
  fragment = document.createDocumentFragment(),

  // and an empty uninitialised variable:
  clone;

// we call the numbersBetween function, passing in the relevant
// boundaries and the Array:
numbersBetween(7, 20, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 15])

// because the function returns an Array (either an empty Array or
// an Array with values), we can chain the function using
// Array.prototype.forEach():
.forEach(

  // here we use another Arrow function expression:
  num => {

    // clone the created <li> element and assign it
    // the 'clone' variable:
    clone = li.cloneNode();

    // set the clone textContent to be equal to
    // the current Array-element of the Array over
    // which we're iterating:
    clone.textContent = num;

    // and append that cloned-element to the
    // document.fragment:
    fragment.appendChild(clone);
  });

// this could be used in the last iteration of the
// Array.prototype.forEach() method, but because it
// generates no errors (an empty document fragment
// can be appended to an element without consequence),
// we perform this step here, appending the document
// fragment to the cached 'list' element which appends
// the nodes contained within the document fragment to
// the specified parent-node (list):
list.appendChild(fragment);

      

        
        
        
      

    

function numbersBetween(lower, upper, haystack) {
  if (haystack.every(value => Number(value))) {

    return haystack.filter(
      n => n > lower && n < upper
    );
  }
  return [];
}

let list = document.getElementById('output'),
  li = document.createElement('li'),
  fragment = document.createDocumentFragment(),
  clone;

numbersBetween(7, 20, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 15]).forEach(
  num => {
    clone = li.cloneNode();
    clone.textContent = num;
    fragment.appendChild(clone);
  });
list.appendChild(fragment);
      

        
        
        
      

    

#output::before {
  content: 'The following numbers were found:';
  display: list-item;
  list-style-type: none;
}

#output:empty::before {
  content: '';
}
      

        
        
        
      

    

<ul id="output"></ul>
      

        
        
        
      

    

JS Fiddle demo .