javascript - Why is the variable not updating within a for loop? JS - Stack Overflow

admin管理员组

文章数量:1022989

The for loop seems to run fine but fails to update the element variable. My intention was:

<h6>Q1</h6>
<h6>Q2</h6>
<h6>Q3</h6>

Instead, the actual result was:

<h6>Q1</h6>
<h6>Q1</h6>
<h6>Q1</h6>

  function results () {

     var listResults = '';
     var i=0;
     const element = `
      <h6>Q${i+1}</h6>
     `;

     for(x=0; x < 3; x++) {
        listResults += element;
        i++;
     }
     return listResults;
    }
    console.log(results())

The for loop seems to run fine but fails to update the element variable. My intention was:

<h6>Q1</h6>
<h6>Q2</h6>
<h6>Q3</h6>

Instead, the actual result was:

<h6>Q1</h6>
<h6>Q1</h6>
<h6>Q1</h6>

  function results () {

     var listResults = '';
     var i=0;
     const element = `
      <h6>Q${i+1}</h6>
     `;

     for(x=0; x < 3; x++) {
        listResults += element;
        i++;
     }
     return listResults;
    }
    console.log(results())

• javascript
• template-literals

Share Improve this question Follow edited Nov 3, 2017 at 17:51 Dale 1,9511111 silver badges1818 bronze badges asked Nov 3, 2017 at 17:14 user3558349user3558349 1511 silver badge44 bronze badges 3

• 4 Because at the moment the template literal is evaluated i has to the value 0. If you want to get different result you have to define the template literal inside the loop. – Felix Kling Commented Nov 3, 2017 at 17:16
• You probably want to move const element = … inside the for loop. – helb Commented Nov 3, 2017 at 17:17
• 1 stackoverflow./questions/30003353/… – epascarello Commented Nov 3, 2017 at 17:18

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 2

A few issues. Mainly, when element is evaluated i is 0 so element always returns <h6>Q1</h6>.

You can append the template literal directly to the output like this:

function results () {

 var listResults = '';

 for(x=0; x < 3; x++) {
  listResults += `<h6>Q${x+1}</h6>\n`;
 }
 return listResults;
}
console.log(results())

The template is evaluated as soon as the expression is parsed. Something like this could work:

let listResults = [];
const element = i => `<h6>Q${i+1}</h6>`;

for(x=0; x < 3; x++) {
    listResults += element(x);
}

you have this problem only because you are declaring i variable every time you revoke function , and actually every time you are setting it to 0 and continuing . so, the "i" variable must be declared out of(and before declaring) function (not in it) and every time you invoke function, it's value will be added by one.

var i=0;
function results () {

     var listResults = '';
     const element = `
      <h6>Q${i+1}</h6>
     `;

     for(x=0; x < 3; x++) {
        listResults += element;
        i++;
     }
     return listResults;
    }
console.log(results())

Some ES6:

const results = _ => Array.from({length:3}, i => `<h6>Q${i+1}</h6>`).join("\n");

try this using eval:

var element = "<h6>Q${i}</h6>";

var results = [1, 2, 3].map(function (i) {
  return eval('`'+element+'`');
});
console.log(results);

The main issue is that element is assigned once, when i is equal to 0. It never gets updated beyond that (despite i incrementing with each loop).

Furthermore, using a more modern method like .map yields a much more readable version of your oute:

const results = () => [1, 2, 3]
    .map(i => `
        <h6>Q${i}</h6>
    `)
    .join('');

console.log(results());

You can use For OF instead of For LOOP :

for (let variable of iterable) {
// code block to be executed 
}

It lets you loop over iterable data structures such as Arrays, Strings, Maps, NodeLists, and more

The for loop seems to run fine but fails to update the element variable. My intention was:

<h6>Q1</h6>
<h6>Q2</h6>
<h6>Q3</h6>

Instead, the actual result was:

<h6>Q1</h6>
<h6>Q1</h6>
<h6>Q1</h6>

  function results () {

     var listResults = '';
     var i=0;
     const element = `
      <h6>Q${i+1}</h6>
     `;

     for(x=0; x < 3; x++) {
        listResults += element;
        i++;
     }
     return listResults;
    }
    console.log(results())

The for loop seems to run fine but fails to update the element variable. My intention was:

<h6>Q1</h6>
<h6>Q2</h6>
<h6>Q3</h6>

Instead, the actual result was:

<h6>Q1</h6>
<h6>Q1</h6>
<h6>Q1</h6>

  function results () {

     var listResults = '';
     var i=0;
     const element = `
      <h6>Q${i+1}</h6>
     `;

     for(x=0; x < 3; x++) {
        listResults += element;
        i++;
     }
     return listResults;
    }
    console.log(results())

• javascript
• template-literals

Share Improve this question Follow edited Nov 3, 2017 at 17:51 Dale 1,9511111 silver badges1818 bronze badges asked Nov 3, 2017 at 17:14 user3558349user3558349 1511 silver badge44 bronze badges 3

• 4 Because at the moment the template literal is evaluated i has to the value 0. If you want to get different result you have to define the template literal inside the loop. – Felix Kling Commented Nov 3, 2017 at 17:16
• You probably want to move const element = … inside the for loop. – helb Commented Nov 3, 2017 at 17:17
• 1 stackoverflow./questions/30003353/… – epascarello Commented Nov 3, 2017 at 17:18

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 2

A few issues. Mainly, when element is evaluated i is 0 so element always returns <h6>Q1</h6>.

You can append the template literal directly to the output like this:

function results () {

 var listResults = '';

 for(x=0; x < 3; x++) {
  listResults += `<h6>Q${x+1}</h6>\n`;
 }
 return listResults;
}
console.log(results())

The template is evaluated as soon as the expression is parsed. Something like this could work:

let listResults = [];
const element = i => `<h6>Q${i+1}</h6>`;

for(x=0; x < 3; x++) {
    listResults += element(x);
}

you have this problem only because you are declaring i variable every time you revoke function , and actually every time you are setting it to 0 and continuing . so, the "i" variable must be declared out of(and before declaring) function (not in it) and every time you invoke function, it's value will be added by one.

var i=0;
function results () {

     var listResults = '';
     const element = `
      <h6>Q${i+1}</h6>
     `;

     for(x=0; x < 3; x++) {
        listResults += element;
        i++;
     }
     return listResults;
    }
console.log(results())

Some ES6:

const results = _ => Array.from({length:3}, i => `<h6>Q${i+1}</h6>`).join("\n");

try this using eval:

var element = "<h6>Q${i}</h6>";

var results = [1, 2, 3].map(function (i) {
  return eval('`'+element+'`');
});
console.log(results);

The main issue is that element is assigned once, when i is equal to 0. It never gets updated beyond that (despite i incrementing with each loop).

Furthermore, using a more modern method like .map yields a much more readable version of your oute:

const results = () => [1, 2, 3]
    .map(i => `
        <h6>Q${i}</h6>
    `)
    .join('');

console.log(results());

You can use For OF instead of For LOOP :

for (let variable of iterable) {
// code block to be executed 
}

It lets you loop over iterable data structures such as Arrays, Strings, Maps, NodeLists, and more

本文标签： javascriptWhy is the variable not updating within a for loop JSStack Overflow