Максим

<button type="button"></button>

var searchBtn = document.querySelector('.main-header__button'),
		searchInput = searchBtn.querySelector('.main-header__input'),
		menu = document.querySelector('.main-header__menu');

searchBtn.onclick = function(event) {
			searchInput.classList.add('main-header__input_active')
			searchInput.focus()
			this.classList.add('main-header__button_active')
			menu.classList.add('hidden')
}

searchInput.onblur = function(event) {
  this.classList.remove('main-header__input_active')
  this.parentNode.classList.remove('main-header__button_active')
  menu.classList.remove('hidden')
}

еще вариант

Область видимости переменной зависит только от того, где она объявлена, и не зависит от цепочки вызовов. Так что если хотите зависимость по цепочке, то объявляйте одну функцию в другой. И почитайте про замыкания в JavaScript.

json в несколько тысяч строк то как поступают в этом случае ?

Обычно делают пагинацию, иначе гуй тормозить будет.

Да и в моём случае можно ли как то это сделать проще ..не так как я туплю там ?

Удобнее использовать фреймворк (Vue, React), или какой-нибудь шаблонизатор (mustache, underscore и.т.д.).
UPD: вот пример на undersocre https://jsfiddle.net/Vlad_IT/c5mkwxp8/ я там поле с сайтами сделал массивом, чтобы удобнее было в цикле проходить.

С сервера приходит JSON той структуры, которую вы ожидаете. Если это ваш сервер, то вы сами и формируете этот JSON, иначе структура описана в документации.

Из строки получается так:

var str = '{"x":123, "y":234, "z": [ 1, 2, 3 ] }';
var obj = JSON.parse(str);
obj.z[2]; // 3

Максим Ленский, вполне реально и с добавлением блоков сделать, и дивками, и чтобы тянулось.

Вообще можно так считать:

p = -10;//сколько процентов вычесть или прибавить
x = x*((100 + p)/100);

1) Вычисление процентных долей - это вопрос к методу вычисления.
2) Разделитель добавляется с помощью метода join при выводе массива:
text.innerHTML = arr.join(', ');
Дисконт лучше считать вне цикла, и завести под него отдельный массив:

var dis = arr.map(function (item)
{
  return Math.round(item - item * (5 / 100.0));
});

https://codepen.io/anon/pen/rgLBpd

var arr = [];
var result = [];
for(var i=0;i<mass.length;i++){
  if(mass[i] >= 200 && mass[i] <= 300){
     arr.push(mass[i] + "$");
     result.push(mass[i] * 0.49 + "$") ; //49 %
  }
}
text.innerHTML = arr.join(" ");
sk.innerHTML = elt.join(" ");

функцию map лучше не вызывать в цикле - это создание нового массива (то есть цикл в цикле получается)
join - "склейка" массива в скобках указываешь строку, которая будет между элементами (в результате строка)

https://ru.wikipedia.org/wiki/Процент

x = x * 0.9 //оставить 90%, то есть по сути отнять 10%
x = x - 0.1 * x //от х отнять 10%

По-всякому можно. Главное, понимать, что такое проценты по сути.

https://codepen.io/Liqrizz/pen/EzKryL
если хочешь помогу интересных анимации допилить

const otec = document.querySelector('#otec');
const sin = document.querySelector('#sin');
otec.removeChild(sin);
otec.parentNode.insertBefore(sin, otec);