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

admin管理员组

文章数量:1429543

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