Javascript document.write issue with loop

Question

I'm trying to let the code create a data file for my marzipano project, it uses this data.js and I don't want to create every link for each project so I tried to loop it but it doesnt print it into my html page. I want to print it as a text so I can copy and paste the result in my js file, is there a way to fix my code or a better way to do it?

P.S: I'm a total noob with javascript

Thank you in advance

function auto(number){
 i = 0;
 while (i < number) {
  //Fist Scene
  if(i === 0){
   document.write('
   <p>    
    {
      "id": "0",
      "name": "0",
      "levels": [
     {
       "tileSize": 256,
       "size": 256,
       "fallbackOnly": true
     },
     {
       "tileSize": 512,
       "size": 512
     },
     {
       "tileSize": 512,
       "size": 1024
     },
     {
       "tileSize": 512,
       "size": 2048
     }
      ],
      "faceSize": 2000,
      "initialViewParameters": {
     "yaw": -3.0907815953112916,
     "pitch": 0.06648956035942888,
     "fov": 1.5707963267948966
      },
      "linkHotspots": [
     {
       "yaw": -3.128953846954726,
       "pitch": 0.47317799909128944,
       "rotation": 0,
       "target": "1"    
     }
      ],
      "infoHotspots": []
    },</p>
    ')
  }
  
  //Last Scene
  else if (i === number){
   document.write('
   <p>
   {
     "id": "'i'",
     "name": "'i'",
     "levels": [
    {
      "tileSize": 256,
      "size": 256,
      "fallbackOnly": true
    },
    {
      "tileSize": 512,
      "size": 512
    },
    {
      "tileSize": 512,
      "size": 1024
    },
    {
      "tileSize": 512,
      "size": 2048
    }
     ],
     "faceSize": 2000,
     "initialViewParameters": {
    "yaw": -3.1332154632455715,
    "pitch": 0.062442602034723294,
    "fov": 1.5707963267948966
     },
     "linkHotspots": [
    {
      "yaw": 0.008275683165861025,
      "pitch": 0.3876084470351344,
      "rotation": 0,
      "target": "'i-1'"
    }
     ],
     "infoHotspots": []
   }</p>'
   )
  }
  
  //Actual loop
  else if (i < number){
   document.write('
   {
     "id": "i",
     "name": "i",
     "levels": [
    {
      "tileSize": 256,
      "size": 256,
      "fallbackOnly": true
    },
    {
      "tileSize": 512,
      "size": 512
    },
    {
      "tileSize": 512,
      "size": 1024
    },
    {
      "tileSize": 512,
      "size": 2048
    }
     ],
     "faceSize": 2000,
     "initialViewParameters": {
    "yaw": -3.0859786632885857,
    "pitch": 0.058860826755053,
    "fov": 1.5707963267948966
     },
     "linkHotspots": [
    {
      "yaw": 0.007751782217697567,
      "pitch": 0.39202518148107757,
      "rotation": 0,
      "target": "'i-1'"
    },
    {
      "yaw": -3.1285088198075375,
      "pitch": 0.48530966110218543,
      "rotation": 0,
      "target": "'i+1'"
    }
     ],
     "infoHotspots": []
   },<br>
   ')
  }
 
  }
   
  
 }
}

auto(13);

<html>
 <head>
 </head>
 <body>
  <script src="auto.js"></script> 
  
 </body>
</html>

One error I see immediately is that JavaScript doesn't allow for multiple line strings unless you use backticks — Austin Ezell, Nov 21 '16 at 21:34
Also, make sure you increment `i` inside you `while` or you will get an infinite loop. — Damian, Nov 21 '16 at 21:46
So I tried this: https://gist.github.com/thriskel/3209b4d969131451ee5e5184775a0ad9 but it gave an error "Uncaught SyntaxError: missing ) after argument list" after " document.write(` " — Thriskel, Nov 22 '16 at 13:10

Jyothi Babu Araja · Answer 1 · 2016-11-22T14:30:34.490

0

First of all have to say something:

Don't use document.write() in loops. It'll rewrite your document itself.
Use backticks(`) to wrap string when it is multi-line string.
It's better to use pre tag to show formatted data like JSON or any code snippets.
While using while loop take care of incrementer and decrementer in your while block to prevent infinite looping.

I think the below solution works for you.

function auto(number){
    var e = document.getElementById("data");
 i = 0;
    var html = "";
 while (i <= number) {
  //Fist Scene
  if(i === 0){
   html += `
   <pre>    
    {
      "id": "` + i + `",
      "name": "0",
      "levels": [
     {
       "tileSize": 256,
       "size": 256,
       "fallbackOnly": true
     },
     {
       "tileSize": 512,
       "size": 512
     },
     {
       "tileSize": 512,
       "size": 1024
     },
     {
       "tileSize": 512,
       "size": 2048
     }
      ],
      "faceSize": 2000,
      "initialViewParameters": {
     "yaw": -3.0907815953112916,
     "pitch": 0.06648956035942888,
     "fov": 1.5707963267948966
      },
      "linkHotspots": [
     {
       "yaw": -3.128953846954726,
       "pitch": 0.47317799909128944,
       "rotation": 0,
       "target": "1"    
     }
      ],
      "infoHotspots": []
    },</pre>
    `;
  }
  
  //Last Scene
  else if (i === number){
   html += `
   <pre>
   {
     "id": "` + i + `",
     "name": "` + i + `",
     "levels": [
    {
      "tileSize": 256,
      "size": 256,
      "fallbackOnly": true
    },
    {
      "tileSize": 512,
      "size": 512
    },
    {
      "tileSize": 512,
      "size": 1024
    },
    {
      "tileSize": 512,
      "size": 2048
    }
     ],
     "faceSize": 2000,
     "initialViewParameters": {
    "yaw": -3.1332154632455715,
    "pitch": 0.062442602034723294,
    "fov": 1.5707963267948966
     },
     "linkHotspots": [
    {
      "yaw": 0.008275683165861025,
      "pitch": 0.3876084470351344,
      "rotation": 0,
      "target": "` + (i-1) + `"
    }
     ],
     "infoHotspots": []
   }</pre>
   `;
  }
  
  //Actual loop
  else if (i < number){
   html += `
   <pre>{
     "id": "` + i + `",
     "name": "` + i + `",
     "levels": [
    {
      "tileSize": 256,
      "size": 256,
      "fallbackOnly": true
    },
    {
      "tileSize": 512,
      "size": 512
    },
    {
      "tileSize": 512,
      "size": 1024
    },
    {
      "tileSize": 512,
      "size": 2048
    }
     ],
     "faceSize": 2000,
     "initialViewParameters": {
    "yaw": -3.0859786632885857,
    "pitch": 0.058860826755053,
    "fov": 1.5707963267948966
     },
     "linkHotspots": [
    {
      "yaw": 0.007751782217697567,
      "pitch": 0.39202518148107757,
      "rotation": 0,
      "target": "` + (i-1) + `"
    },
    {
      "yaw": -3.1285088198075375,
      "pitch": 0.48530966110218543,
      "rotation":0,
      "target": "` + (i+1) + `"
    }
     ],
     "infoHotspots": []
   }</pre>
   `;
  }
 i++;
  }
  e.innerHTML = html;
}

auto(13);

<html>
 <head>
 </head>
 <body>
  <script src="auto.js"></script> 
  <div id="data"><div>
 </body>
</html>

edited Nov 22 '16 at 14:30

answered Nov 21 '16 at 21:47

Jyothi Babu Araja

9,598
3
29
38

thank you very much but how do I get the code to increase the number in "id", "name" and "target? – Thriskel Nov 21 '16 at 22:40
Where do you want to give `id`s? – Jyothi Babu Araja Nov 21 '16 at 22:49
where I commented the code above, as //heeere, I also tried to use the code but it didn't loop. the browser debugger gave this error "Uncaught TypeError: Cannot set property 'innerHTML' of null" – Thriskel Nov 22 '16 at 12:56
Thanks but why does the explorer debugger says "Uncaught TypeError: Cannot set property 'innerHTML' of null" pointing to the line 147 : "e.innerHTML = html;"? – Thriskel Nov 22 '16 at 13:13
keep your script below the `` tag – Jyothi Babu Araja Nov 22 '16 at 13:17
I'm sorry for disturbing you so much but the loop stops before getting to the number I enter like I execute the function like "auto(14);" and it stops at 13 so it doesnt use the fist else if – Thriskel Nov 22 '16 at 13:37
Not an issue, I'm here to help. Let me correct it. You want `ids` from 0-13 or 1-14 ? – Jyothi Babu Araja Nov 22 '16 at 13:39
I want the code: else if(i === number){execute} so if it is the last number it executes example: auto(5); – Thriskel Nov 22 '16 at 14:09
Now check the updated one. Just keep `while(i <= number)` – Jyothi Babu Araja Nov 22 '16 at 14:25
"First of all have to say something" — You've marked up the list that follows that as a quote. Who are you quoting? If nobody, then please remove the quote markup. – Quentin Nov 22 '16 at 14:28
@Quentin, Okay Thank you. – Jyothi Babu Araja Nov 22 '16 at 14:30
Tried that but that just repeats the else if( i <= number) for 4 and 5, if I use (i == number) doesnt call the else if. (P.S: what is Quentin taking about?) – Thriskel Nov 22 '16 at 15:18
so if using i <= number it reaches the last number why it doesnt work with i == number? – Thriskel Nov 24 '16 at 14:48
It's a simple looping concept with applied condition. Manually check the loop. You will get it. – Jyothi Babu Araja Nov 24 '16 at 16:50
I managed to make it work by using else if( i == (number - 1)){do} but I still don't get why is it stopping before getting to the last number, is the else if (i < number) messing with the else if (i == number)? – Thriskel Nov 25 '16 at 15:33
see this for how loop works http://stackoverflow.com/a/25345805/4355342 – Jyothi Babu Araja Nov 26 '16 at 05:29

Javascript document.write issue with loop

1 Answers1