Использование функции для создания переменной

Question

Я ищу способ использовать функцию для создания переменной, так как я определил переменные, которые я использую, чтобы создать переменную внутри функции независимо в зависимости от того, что делает пользователь.

Вот что у меня есть, но он не работает:

var popupContent = '' 
var message = '' 
var postLink = '' 
function createMessage() { 
    popupContent = [ 
     "<p>" + message + "</p>", 
     "<form action='" + postLink + "' method='post' accept-charset='utf-8'>", 
      "<ul class='cd-buttons no_margin'>", 
       "<li><a class='submit'>Yes</a></li>", 
       "<li><a class='popup-close'>No</a></li>", 
      "</ul>", 
     "</form>", 
     "<a class='cd-popup-close popup-close img-replace'>Close</a>" 
    ].join(''); 
} 

//Accept Employement Request 
$('.popup1').on('click', function() { 
    employeeName = $(this).siblings('.js-employee-name').text(); 
    var message = "Are you sure you want to hire <b>" + employeeName + "</b>?" 
    var postLink = "/hire-employee" 

    createMessage(); 

    $(".cd-popup-container").append(popupContent); 
}); 

JSFIDDLE

Answer 1

Вы должны определить его как global variable, для того, чтобы иметь возможность установить значение в одной функции и использовать в Еще один.

Примечание: Вам не нужно использовать объединение для конкатенации строк. Просто используйте плюс в конце каждого.

var popupContent = '' 
function createMessage() { 
    popupContent = "<p>" + message + "</p>" + 
     "<form action='" + postLink + "' method='post' accept-charset='utf-8'>" + 
      "<ul class='cd-buttons no_margin'>" + 
       "<li><a class='submit'>Yes</a></li>" + 
       "<li><a class='popup-close'>No</a></li>" + 
      "</ul>" + 
     "</form>" + 
     "<a class='cd-popup-close popup-close img-replace'>Close</a>"; 
} 

//Accept Employement Request 
$('.popup1').on('click', function() { 
    employeeName = $(this).siblings('.js-employee-name').text(); 
    var message = "Are you sure you want to hire <b>" + employeeName + "</b>?" 
    var postLink = "/hire-employee" 

    createMessage(); 

    $(".cd-popup-container").append(popupContent); 
}); 

Другим решением, будет использовать return popupContent; и passMessage = createMessage(); возвращать данные вызываемым.

Answer 2

Вы можете вернуть содержимое из следующих функций, а затем просто вызвать функцию в .append() метода:

function createMessage(message, postLink) { 
    return [ 
     "<p>" + message + "</p>", 
     "<form action='" + postLink + "' method='post' accept-charset='utf-8'>", 
      "<ul class='cd-buttons no_margin'>", 
       "<li><a class='submit'>Yes</a></li>", 
       "<li><a class='popup-close'>No</a></li>", 
      "</ul>", 
     "</form>", 
     "<a class='cd-popup-close popup-close img-replace'>Close</a>" 
    ].join(''); 
} 

//Accept Employement Request 
$('.popup1').on('click', function() { 
    employeeName = $(this).siblings('.js-employee-name').text(); 
    var message = "Are you sure you want to hire <b>" + employeeName + "</b>?" 
    var postLink = "/hire-employee" 
    $(".cd-popup-container").append(createMessage(message, postLink)); 
}); 

ПРИМЕЧАНИЕ Вы хотите передать необходимые данные message и postLink в качестве параметров функция. Вам не нужно объявлять или инициализировать эти переменные в качестве глобальных переменных. Вы не хотите загромождать глобальную область. Они являются локальными для обратного вызова, и данные, которые они хранят, будут переданы в createMessage(). Пожалуйста, обратите внимание, что переменные message и postLink параметров createMessage() являются локальными для createMessage().

DEMO

Основываясь на вашем демо, мне интересно, если это не было бы более целесообразно использовать .html() вместо .append()!

Answer 3

Если вы хотите, чтобы ваш код работает - вам нужно определить три Global varibles

1. popupContent
2. сообщение
3. postLink

Но глобальные переменные плохи ... Так проходит вар-х к вашему createMessage() - хорошая идея. И сделайте так, чтобы он возвращал HTML.

function createMessage(msg, lnk) { 
 
    return [ 
 
     "<p>" + msg + "</p>", 
 
     "<form action='" + lnk + "' method='post' accept-charset='utf-8'>", 
 
     "<ul class='cd-buttons no_margin'>", 
 
     "<li><a class='submit'>Yes</a></li>", 
 
     "<li><a class='popup-close'>No</a></li>", 
 
     "</ul>", 
 
     "</form>", 
 
     "<a class='cd-popup-close popup-close img-replace'>Close</a>"].join(''); 
 
} 
 

 
//Accept Employement Request 
 
$('.popup1').on('click', function() { 
 
    var employeeName = $(this).siblings('.js-employee-name').text(), 
 
     message = "Are you sure you want to hire <b>" + employeeName + "</b>?", 
 
     postLink = "/hire-employee"; 
 

 
    $(".cd-popup-container").append(createMessage(message, postLink)); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="js-employee-name">John Doe</div> 
 
<button class="popup1">Click Me!</button> 
 
<div class="cd-popup-container"></div>