CODEWITHSUNDEEP
javascriptjqueryscope
Paulo Janeiro
Paulo Janeiro

Reputation: 3211

strange variable scope in jQuery

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?

Upvotes: 1

Views: 81

Answers (2)

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48600

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

Upvotes: 1

haim770
haim770

Reputation: 49095

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

Upvotes: 4

Related Questions