CODEWITHSUNDEEP
javascriptfunction
user5755661
user5755661

Reputation:

variable in string in parameter

I'm working on a table constructor for one of my larger projects but the variables in the content I'm trying to send to the constructor function evaluate before they are sent. Here is a cut down version of the function that should show my problem:

x = 0;

tableConstructor(["<p>" + x + "</p>", "<div>" + x + "</div>"]);

function tableConstructor (tableContent) {
    for (x = 0; x < 2; x++) {
        window["row" + x] = tableContent[x];

        console.log(window["row" + x]);
    }
}

The output is:

<p>0</p>
<div>0</div>

But what I want is:

<p>0</p>
<div>1</div>

Can anyone help me?

Upvotes: 0

Views: 59

Answers (3)

Rayon
Rayon

Reputation: 36609

Use ++x while passing argument or x++ like this "<p>" + (x++) + "<p/>"

Post-increment returns the copy of the original value.

Using increment operators:

var y = 0;

function tableConstructor(tableContent) {
  for (var x = 0; x < 2; x++) {
    window["row" + x] = tableContent[x];
    console.log(window["row" + x]);
  }
}
tableConstructor(["<p>" + y + "<p/>", "<div>" + (++y) + "<div/>"]);
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

Using DOM Api:

var y = 0;
function tableConstructor(tableContent) {
  for (var x = 0; x < tableContent.length; x++) {
    var div = document.createElement('div');
    div.innerHTML = tableContent[x];
    var elem = div.firstChild;
    elem.innerHTML = x;
    var wanted = elem.outerHTML;
    window["row" + x] = wanted;
    console.log(window["row" + x]);
  }
}
tableConstructor(["<p>" + y + "<p/>", "<div>" + y + "<div/>"]);
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

Using Regex(replacing digit):

var y = 0;

function tableConstructor(tableContent) {
  for (var x = 0; x < 2; x++) {
    window["row" + x] = tableContent[x].replace(/\d/, x);
    console.log(window["row" + x]);
  }
}
tableConstructor(["<p>" + y + "<p/>", "<div>" + (++y) + "<div/>"]);
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

Upvotes: 3

Santiago Hern&#225;ndez
Santiago Hern&#225;ndez

Reputation: 5636

What if you use some kind of template, like this:

function tableConstructor (tableContent) {
    for (var x = 0; x < tableContent.length; x++) {
        window["row" + x] = tableContent[x].replace("{x}",x);
        console.log(window["row" + x]);
    }
}

tableConstructor(["<p>{x}</p>", "<div>{x}</div>", "<i>{x}</i>"]);

This way you can do something like this:

tableConstructor(["<p>hey variable x is {x}</p>", "<div>now is {x}</div>", "<i>and it changed to this {x}</i>"]);

Upvotes: 0

Jeroen
Jeroen

Reputation: 63719

The problem with your own example is that the strings that go into your array are created at that very moment when x is still 0. Changing x afterwards doesn't help much.

Here's one very overengineered example to do things, where there's a seperate x in the loop and inside a "builder":

function createEntryBuilder() {
  // This is a *different* `x` from the one in the for loop.
  var x = 0;
  
  return function(tagName) {
    var tag = document.createElement(tagName);
    tag.innerHTML = x;
    x = x + 1;
    return tag;
  }
}

var builder = createEntryBuilder();

tableConstructor(["p", "div"]);

function tableConstructor (tableContent) {
    for (var x = 0; x < 2; x++) {
        var element = builder(tableContent[x]);
        window["row" + x] = element;
        console.log(window["row" + x]);
        document.body.appendChild(element);
    }
}
p { background: pink; }
div { background: khaki; }

If you want to use the loop's number you could change it up to this:

function createEntryBuilder() {
  return function(tagName, x) {
    var tag = document.createElement(tagName);
    tag.innerHTML = x;
    x = x + 1;
    return tag;
  }
}

var builder = createEntryBuilder();

tableConstructor(["p", "div"]);

function tableConstructor (tableContent) {
    for (var x = 0; x < 2; x++) {
        var element = builder(tableContent[x], x);
        window["row" + x] = element;
        console.log(window["row" + x]);
        document.body.appendChild(element);
    }
}
p { background: pink; }
div { background: khaki; }

Upvotes: 0

Related Questions