strange variable scope in jQuery

Question

I know scope in javascript in sometimes tough but this time I suspect the issue may be jQuery execution order. In the following code I try to define a simple HTML element (simulates a button) in javascript and pass different text to it when mounting it in HTML using jQuery:

 var name; var buttonsecondary = '<div class="buttonsecondary clicked"><p>'+name+'</p></div>';

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="content-item" id="things4"> <a href="aFabrica.html"> <div class="itemHome"> <div class="bg" id="buttonsecondaryfabrica"></div> <script> $(document).ready(function() { var name = "A Fábrica"; $("#buttonsecondaryfabrica").after(buttonsecondary) }) </script> </div> </a> </div> <div class="content-item"> <a href="lojas.html"> <div class="itemHome"> <div class="bg" id="buttonsecondaryloja"></div> <script> $(document).ready(function() { var name = "Loja"; $("#buttonsecondaryloja").after(buttonsecondary) }) </script> </div> </a> </div>

The problem is that I get the same text on both buttons: "Store" although in the first alert getting "Street" and in the second "Store"... Does anyone know how to explain it?

Answer 1

The problem is that the buttonsecondary variable already contains the final HTML of the button because it's merely a concatenated string.

You need to generate the desired HTML each time:

function generateButton(name)
{
    return '<div class="buttonsecondary clicked"><p>' + name + '</p></div>';
}

Then:

var name = "A Fábrica";
$("#buttonsecondaryfabrica").after(generateButton(name));

And

var name = "Loja";
$("#buttonsecondaryloja").after(generateButton(name));

Answer 2

In your original code, you are creating a string with variables that are changed later on. When you change the variables, the string does not get updated because the variables are not bound. You need to create a new string if you want to pass in a new value for the name .

Change this:

var buttonsecondary = '<div class="buttonsecondary clicked"><p>'+name+'</p></div>';

To this:

function createSecondaryButton(name) {
    return '<div class="buttonsecondary clicked"><p>' + name + '</p></div>';
}

---

Or, since you are using jQuery:

function createSecondaryButton(name) {
    return $('<div>').addClass('buttonsecondary clicked')
        .append($('<p>').text(name));
}

Then simply call the function:

$("#buttonsecondaryfabrica").after(createSecondaryButton('A Fábrica'));
$("#buttonsecondaryloja").after(createSecondaryButton('Loja'));