Use Function to Create a Variable

Question

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

Can you be a bit more clear, which variable are you trying to initialize? — MannfromReno
– MannfromReno, Commented Aug 24, 2015 at 18:09
My problem is that when I call $(".cd-popup-container").append(popupContent); popupContent is still equal to "" — Pabi
– Pabi, Commented Aug 24, 2015 at 18:15
That doesn't appear to be possible, given your code. i suspect something else is going on. — user400654
– user400654, Commented Aug 24, 2015 at 18:19

PeterKA · Accepted Answer · 2015-08-24 18:41:21Z

4

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()!

edited Aug 24, 2015 at 18:41

answered Aug 24, 2015 at 18:15

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MinusFour Over a year ago

This is much much cleaner.

Pabi Over a year ago

This for some reason also returns nil, as if the function can not run correctly.

PeterKA Over a year ago

If you can create a demo, we would be glad to figure that out. Or please check the console for any errors. @Pabi, you have to pass data into the function as indicated above.

Pavel Shvetsov · Accepted Answer · 2015-08-24 18:30:28Z

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

popupContent
message
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>

rrk · Accepted Answer · 2015-08-24 18:20:29Z

1

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.

edited Aug 24, 2015 at 18:20

answered Aug 24, 2015 at 18:09

rrk

15.9k4 gold badges32 silver badges49 bronze badges

2 Comments

DontVoteMeDown Over a year ago

I think you got it right, but please fix the other strange codes, like the join.. and why not return the content instead of creating a global variable?

Pabi Over a year ago

Also had to make message and postLink a global variable. Problem is that when I use popupContent in the click function, I get => ""

Collectives™ on Stack Overflow

Use Function to Create a Variable

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related