Cannot start function in "document.write();"

Question

I'm new to JavaScript. I've already used Java and C# (and a bit of c++)

So far..

I'm using JavaScript to load pictures from a directory into an Array. After this I want to place this pictures on my page.

This works already.

The next step was to add a fullscreen function, to load the picture in fullscreen resolution.

var myfiles; 
var pfad = "./bilder/"    //directory of the images
var index = 0;

myfiles = new Array(); //String array with the names of the pictures
myfiles[0] = "01.png"; 
myfiles[1] = "01.png"; //usw. 
myfiles[2] = "03.png";
myfiles[3] = "02.png";


function fullScreen(bild) {
    document.write('<img src="'+ pfad + bild + '" border="0" width="100%">'); 
    alert (bild);
}

function start() {
    for(var i=0; i < myfiles.length; i++) { 
        pics[i].src = pfad + myfiles[i];
        string = myfiles[i];

        document.write('<img  onclick="fullScreen(string);" src="'+ pfad + myfiles[i] + '"     border="0" height="150px" >'); 
    } 
}

This code only loads the last picture of my array.. The function fullScreen() seems to take only the last value of string.

The HTML part

<script type="text/javascript">
    start();
</script>

Calling `document.write()` after the page has loaded is asking for trouble. See [Why is document.write considered a “bad practice”?](http://stackoverflow.com/q/802854/464709). — Frédéric Hamidi, May 27 '14 at 14:54
@FrédéricHamidi He didn't do it after dom ready / window load. as long he is using it BEFORE dom ready , it would be fine. — Royi Namir, May 27 '14 at 14:57
@Royi, what do you mean? `fullScreen()` is called on click, after the document has loaded. — Frédéric Hamidi, May 27 '14 at 14:59
@RoyiNamir `start()` will be executed decently, but the click handler it writes to the document, also uses `document.write()`... — Teemu, May 27 '14 at 14:59
@Teemu Didn't notice this. if so , ignore my comment. certainly not to use. — Royi Namir, May 27 '14 at 15:00

Scimonster · Accepted Answer · 2014-05-27T15:18:44.007

2

It is only evaluating string when it is clicked, when the loop has already finished.

You'll need to pass it directly:

    for(var i=0; i < myfiles.length; i++) { 

    pics[i].src = pfad + myfiles[i];
    string = myfiles[i];

    document.write('<img  onclick="fullScreen(\''+string+'\');" src="'+ pfad + myfiles[i] + '"     border="0" height="150px" >'); 

    }

edited May 27 '14 at 15:18

answered May 27 '14 at 14:59

Scimonster

30,695
8
67
84

@James no it won't. It'll then be evaluated. – Scimonster May 27 '14 at 15:04
@Teemu true, but that's a different issue. – Scimonster May 27 '14 at 15:05
1

@Scimonster actually stringify will cause it to fail because it will wrap the string in double quotes resulting in `onclick="fullScreen('"01.png"');"` – James May 27 '14 at 15:11
@James Then how would you say to fix it? Maybe escaping? – Scimonster May 27 '14 at 15:15
Need to escape single quotes around the filename, my first comment was wrong too (going to delete it). `onclick="fullscreen(\'' + string + '\');"` works – James May 27 '14 at 15:17
Another question: What does the + mean? Does it man that fullscreen(); should use string directly? – user3680233 May 27 '14 at 15:27
@user3680233 + is the JS concatenation operator. – Scimonster May 27 '14 at 18:31

score 0 · Answer 2 · answered May 27 '14 at 15:14

SOLUTION

JS

var myfiles = []; 
var pfad = "http://placehold.it/350x250/&text=";
var index = 0;

myfiles[0] = "Image 0"; 
myfiles[1] = "Image 1";
myfiles[2] = "Image 2";
myfiles[3] = "Image 3";

function fullscreen(){
  if(this.className == 'fullscreen') this.className = '';
  else this.className = 'fullscreen';
}

function createImage(src){ 
  var img = document.createElement('img');
  img.src = pfad + src;
  img.addEventListener('click', fullscreen);
  document.body.appendChild(img);
  return img;
}

function start(){
  for(var i=0; i < myfiles.length; i++) { 
    var img = createImage(myfiles[i]);
  } 
}
start();

CSS

html, body, .fullscreen {
  height: 100%;
}

Thank you. I didn't know the eventhandler. I'll give it a try ! — user3680233, May 27 '14 at 16:09

Cannot start function in "document.write();"

2 Answers2