CODEWITHSUNDEEP
javascriptjqueryvariables
Pabi
Pabi

Reputation: 994

Use Function to Create a Variable

I am looking for a way to use a function to create a variable since I defined the variables I am using to create the variable inside the function independently depending on what the user does.

Here is what I have but it is not working:

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

Upvotes: 1

Views: 128

Answers (3)

PeterKA
PeterKA

Reputation: 24638

You could return the content from the function as follows and then just invoke the function within the .append() method:

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) );
});

NOTE You want to pass the required data message and postLink as parameters to the function. You do not need to declare or initialize these variables as global variables. You don't want to clutter the global scope. They are local to the callback and the data they hold would be passed to createMessage(). Please note that the variable message and postLink parameters of createMessage() are local to createMessage().

DEMO

Based on your demo, I wonder if it would not be more appropriate to use .html() instead of .append()!

Upvotes: 4

Pavel Shvetsov
Pavel Shvetsov

Reputation: 101

If you want your code working - you need to define three Global varibles

  1. popupContent
  2. message
  3. postLink

But Global var's are bad... So passing var's to your createMessage() is a good idea. And make it returning HTML too.

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>

Upvotes: 2

rrk
rrk

Reputation: 15846

You need to define it as a global variable, in order to be able to set value in one function and use in another one.

Note : You don't need to use join for string concatenation. Simply use plus at the end of each.

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);
});

Another solution, would be to use return popupContent; and passMessage = createMessage(); to return data to the callee.

Upvotes: 1

Related Questions