Как найти абзац в котором хранится максимальное число?

Question

[Unknown]

Привет!
Думаю над этой задачкой. Попробовал думать и так и сяк и решения пока не получил.
Даны абзацы с числами. По нажатию на кнопку найдите абзац, в котором хранится максимальное число, и сделайте его красного цвета.

<p class="cls">11</p>
	<p class="cls">12</p>
	<p class="cls">13</p>
	<p class="cls">14</p>
<button id="btn">click me</button>

var btn = document.getElementById('btn');
var cls = document.getElementsByClassName('cls');

btn.addEventListener('click', func, false);

function func() { 
	var arr = [];
	for (var i = 0; i < cls.length; i++) {
		var arr = cls[i].innerHTML.split();
	};
}

после строчки с var arr пробовал разные способы решить задачу, но никак. Где-то у меня пробел в знаниях.
Как решить задачу?

Answer 1

[0xD34F]

[...document.getElementsByClassName('cls')].reduce((max, n) => {
  const val = +n.innerText;
  return val > max[1] ? [ n, val ] : max;
}, [ null, -Infinity ])[0].style.color = 'red';

Comments

[Unknown]

воу, круто! Какие-то неведомые мне штуки вы применили [...document.getElementsByClassName('cls')];. Спасибо, работает, буду разбираться в вашем коде :)

Answer 2

[Aleksey Solovyev]

Math.max([value1[, value2[, ...]]])
https://developer.mozilla.org/en-US/docs/Web/JavaS...

Comments

[Unknown]

я видел эту функцию и насколько понял в нее нужно положить массив вот так
Math.max(null, arr)
но прежде чем это сделать, нужно объеденить все полученные из абзацев значения в массив и затем подставить в эту функцию. Но я не знаю как объеденить несколько массивов в один, а после Math.max разъединить эти массивы... примерно такое

[Aleksey Solovyev]

Обычный перебор.
arr.push(el1, el2)
.но очевидно, что у 0xD34F менее ресурсозатратно.