Javascript for loop displaying more results than expected

You are misunderstanding how the for loop works.

for ([initialization]; [condition]; [final-expression])

final-expression: An expression to be evaluated at the end of each loop iteration. This occurs before the next evaluation of condition. Generally used to update or increment the counter variable.

So your counter gets incremented at the end of the loop and the observed behaviour is correct. The loop gets executed for 20, 22, 24, 26, 28, 30, 32, and 34.

When start loop add +2 to x like below:

 x = 20;
 for (x = 20+2; x<35; x+=2) {
        document.write("How many times will this loop execute?" + "<br/>");
    };

fiddle

Script:

x = 20;
count = 1;
for (x = 20; x < 35; x += 2){
  document.write("Execution: "+ (count++)+ "<br/>");
};

Output

The loop executes total 8 times.

Execution: 1
Execution: 2
Execution: 3
Execution: 4
Execution: 5
Execution: 6
Execution: 7
Execution: 8

jsfiddle link to checkout.

Yes, is executing 8 times, because is from 20 to 35 in 2 x 2

x = 20;
for (x = 20; x < 35; x += 2) {
  document.write("Execute for " + x + " " + "<br/>");
};

/*
OUTPUT:

Execute for 20 
Execute for 22 
Execute for 24 
Execute for 26 
Execute for 28 
Execute for 30 
Execute for 32 
Execute for 34 
*/

If you want 7 times, you can change to 34

 x = 20;
 for (x = 20; x < 34; x += 2) {
   document.write("Execute for " + x + " " + "<br/>");
 };

It will run eight times, x iterating through every even number between 20 and 34 inclusive. You can write it like this if it helps:

var x = 20;
while (x <= 34) {
    // do something
    x += 2;
}

However, it is important to note that after the loop has run (whether you're using the for or while version), x will equal 36, since it is incremented to that before it finally fails the test; inside the loop, x will never equal 36. In terms of best practice, you should only really use a counter variable like x within the loop; this can be enforced by using the ES6 let keyword (which is block-scoped) like so (the example just prints out a list of the x values as DOM elements):

function appendSpanCounter(i, end) {
    let el = document.createElement("span"),
        content = i.toString(10);

    if (i < end) content += ", ";

    (typeof el.textContent === "string") // ternary operator
        ? el.textContent = content
        : el.innerText = content;

    (document.body || document.querySelector("body")).appendChild(el);
}

for (let x = 20; x <= 34; x += 2) {
    appendSpanCounter(x, 34);
}
// x is now undefined here