Как получить значение из обработчика в другую часть скрипта
 

Здравствуйте!

Пишу для своего профильного форума конструктор, который будет генерировать сниппеты.
Конструктор собирает данные у пользователя, упрощая ему постановку вопроса и значительно экономя время.
Через position:sticky выводится макет с предпросмотром получаемых данных - макет чем то похож на карточку товара (изображение, размеры и др. нужные данные).
С предпросмотром у меня проблем нет - через обработчики событий он у меня работает как надо.

У меня проблема с генерацией сниппета. Я не знаю как в него получать данные из обработчиков.
Внизу HTML-кода есть input id="snipCode" - это поле вывода сгенерированного сниппета.
Я код максимально укоротил, чтобы огромнейшую портянку не вставлять, а макет даю чтобы донести суть своего вопроса.

<div class="constructor">
	<div>
    <h3>Название:</h3>
    <input type="text" class="nameSnip" id="nameSnip" placeholder="Введите название проекта"><button class="btn-danger" id="nameDelete" title="Удалить название">X</button>
  </div>
	<div class="typeKr">
		<h3>Тип крыши:</h3>
 		<div class="btn-group" data-toggle="buttons">
		  <label class="btn"><input type="radio" name="typeKr" value="1" checked>Односкатная</label>
		  <label class="btn"><input type="radio" name="typeKr" value="2">Двускатная</label>
		  <label class="btn"><input type="radio" name="typeKr" value="3">Шатровая</label>
		</div>
	</div>
	<div class="uteplitel">
		<h3>Утепление:</h3>
 		<div class="btn-group" data-toggle="buttons">
		  <label class="btn"><input type="radio" name="uteplitel" value="1" checked>Холодная крыша</label>
		  <label class="btn"><input type="radio" name="uteplitel" value="2">Тёплая крыша</label>
		</div>
	</div>
	<div>
	       ...
	</div>

	<!-- Снипет -->
	<div class="snip">
  	<span>Код для вставки:</span>
		<input id="snipCode" type="text" class="" placeholder="Код для вставки на форум" value="">
  </div>
</div>

В общем идёт сбор данных через радио-кнопки, инпуты и селекты.

В скрипте у меня получилось написать обработчики, которые дают результат в предпросмотр.
А вот как получить данные из обработчиков в новые переменные я не могу найти решения.

Вот часть скрипта, где нужно результат из $('.name').keyup(function() получить в переменную nameSnip
чтобы при изменении данных эти изменения происходили не только в макете предпросмотра, но и в коде сниппета

$(function() {
    var name = $('.nameSnip');  //Название
    
    $('.nameSnip').keyup(function() {
        $("#prosmotpName").text($(this).val());
    });


    $('#snipCode').click( function(){    //Выделение кода сниппета при клике в поле
        this.select()
    });
    //Код cниппета
    var nameSnip;
    var snipCode = '[snip ' + nameSnip + typeKr + sizeA + sizeB + ' snip]';
    $("#snipCode").val(snipCode);//Вывод сниппета
});

MC-XOBAHCK, непонятно в чем возникла сложность.
Почитай тут, может решишь вопрос:
https://learn.javascript.ru/closures#вложенные-функции

$(function() {
    var name = $('.nameSnip');  //Название
    var nameSnip;
    var snipCode='';
    
    $('.name').keyup(function() {
*!*
        nameSnip=$(this).val();
        $("#prosmotpName").text(nameSnip);
*/!*
    });


    $('#snipCode').click( function(){    //Выделение кода сниппета при клике в поле
        this.select()
    });
    //Код cниппета
    $("#snipCode").val(snipCode='[snip ' + nameSnip + typeKr + sizeA + sizeB + ' snip]');//Вывод сниппета
});

Спасибо, но так не получается.
В макет предпросмотра уходят правильные данные, а вот в код сниппета nameSnip отдаёт undefined

MC-XOBAHCK, может тогда так сделать?

$("#snipCode").val(snipCode='[snip ' + $('.name').val() + typeKr + sizeA + sizeB + ' snip]')

В таком варианте пусто вместо значения. Пишу название - ни каких изменений - в макет выводит, в код сниппета нет.
Прописываю console.log ($('.name').val()); - выводит пустоту. На ввод названия (заполнение поле от куда берутся эти данные) никак не реагирует.

MC-XOBAHCK, а где у вас в html элемент с классом «name»?

Upd. https://jsfiddle.net/nh6u7uus/

Извиняюсь, класс nameSnip. Это я через переменную к этому классу назначил.
Но я у себя правильно назначил класс, просто применил предложенную логику. А классы расставил правильно.
Сейчас в топике исправлю.

var name = $('#nameSnip');  //Название
    var nameSnip='';
    
    name.keyup(function() {
    		nameSnip=$(this).val();
        $("#prosmotpName").text(nameSnip);
        $("#snipCode").val(nameSnip);
    });
    
    $("#snipCode").val(nameSnip);

Я такой скрипт понимаю как писать и что он делает. Он перепишет полностью value на значение nameSnip.
Дело в том что у меня несколько обработчиков (keyup, click, change). По сути они однотипные и поэтому я для вопроса оставил только keyup (Ввод названия).
А в конечном результате мне нужно в коде сниппета получить не только значение nameSnip, а и другие переменные (typeKr, sizeA, sizeB) , которые берутся из событий похожих на name.keyup(function()

//Код cниппета
    var nameSnip;
    var snipCode = '[snip ' + nameSnip + typeKr + sizeA + sizeB + ' snip]';
    $("#snipCode").val(snipCode);//Вывод сниппета

Я typeKr, sizeA, sizeB намеренно убрал из кода, чтобы не тянуть портянку. Там у меня ещё много переменных.
Мне бы на примере nameSnip понять как правильно писать скрипт, чтобы получать данные в код сниппета и чтобы при изменении данных они изменялись и в коде сниппета.

MC-XOBAHCK, "snipCode" в моем коде замени на то, что нужно и все.

Спасибо за желание помочь и извините что отнял ваше время.
В карму не могу поставить плюс, пишет "Вы должны добавить отзыв кому-то ещё, прежде чем сможете снова добавить его Nexus".

Может кто подскажет как получить значение из обработчика в другую часть скрипта - буду признателен за науку.

MC-XOBAHCK, сделайте макет на jsfiddle)

Я понял. Сейчас там зарегистрируюсь и освою функционал (я никогда не пользовался). Наверное макет будет только завтра.
В принципе важнее разобраться как правильно поступать в подобных ситуациях, чем получить моментально готовое решение.

:-?


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

MC-XOBAHCK, там не обязательно регистрироваться.

var fst_var=1;
(function(){//Это ваша jq ready function «$(func)»;
	var sec_var=2;
	(function(){//Это ваш .nameShip event listener
		var thd_var=3;
		alert('Second function');
		alert(fst_var);//1
		alert(sec_var);//2
		alert(thd_var);//3
	})();
	
	alert('First function');
	alert(fst_var);//1
	alert(sec_var);//2
	alert(typeof thd_var);//undefined
})();

alert('Outside');
alert(fst_var);//1
alert(typeof sec_var);//undefined
alert(typeof thd_var);//undefined

Из "вложенной" области видимости (ОВ) можно взаимодействовать с переменными из "родительской" ОВ, из родительской же ОВ взаимодействовать с переменными из дочерних ОВ нельзя независимо от того была ли дочерняя функция уже воспроизведена или нет.
Для того, чтобы реализовать вами задуманное нужно просто объявить необходимые переменные в родительской области видимости, а их заполнение производить во вложенных функциях/ОВ.
Надеюсь я смог внести хоть какую-то ясность.