String building with Javascript document.write

Question

I am trying to write a div element from javascript. I want the line written as follows, using document.write():

<div class="Square15px" onmouseover="changeColor('boxid')"></div>

I call the function that writes the div element with:

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

I have tried the document.write() method, building the string several different ways such as:

function colorPicker(box) {
    var box = document.getElementById(box);
    var boxid = box.id;
    var AquaStr1 = '<div class="AquaSquare15px" onmouseover="changeColor("';
    var AquaStr2 = '")></div>';

    var AquaString = AquaStr1.concat(boxid, AquaStr2);
    document.writeln(AquaString);
}

I have also tried splitting up the string many different ways using + as concat operator. The string builds incorrectly at the end of boxid. I get the same result no matter how I write the code block:

<div class="AquaSquare15px" onmouseover="changeColor(" box1?)=""/>

I just can't seem to see my error here, I have reviewed all of the help I can find. With the exception of the space between the quote and box1, everything is correct up until the mysterious question mark. I reviewed the results from IE9 developer tool (F12). I am not an experienced programmer, so I suspect I am in error somehow.

Don't use `document.write`: http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — Halcyon, Apr 25 '13 at 19:08

Linus Caldwell · Answer 1 · 2013-04-25T19:38:24.393

I guess the problem might be the quotation marks. Should be:

var AquaStr1 = '<div class="AquaSquare15px" onmouseover="changeColor(\'';
var AquaStr2 = '\')"></div>';

Besides, you should not overwrite your function parameter with a new declaration:

function colorPicker(box) {
    var box = document.getElementById(box);

Instead use another name like

function colorPicker(boxid) {
    var box = document.getElementById(boxid);

With that said, it makes not much sense to get the element by id and after that reading it's id:

var box = document.getElementById(box);
var boxid = box.id;

You got the ID already as the function parameter.

Suggested result:

function colorPicker(boxid) {
    var AquaStr1 = '<div class="AquaSquare15px" onmouseover="changeColor(\'';
    var AquaStr2 = '\')"></div>';

    var AquaString = AquaStr1.concat(boxid, AquaStr2);
    document.writeln(AquaString);
}

As others already suggested, you should not use document.write. E.g. using jQuery instead would look something like that:

$('body').append(AquaString);

Here is a demo.

score 0 · Answer 2 · answered Apr 25 '13 at 19:21

You are using quotation marks in the attribute value without HTML encoding them. Also, you are missing the end quotation mark of the attribute value, so the end tag and some other code will end up inside an attribute.

You can escape the quotation marks:

var AquaStr1 = '<div class="AquaSquare15px" onmouseover="changeColor(&quot;';
var AquaStr2 = '&quot;)"></div>';

or you can use apostrophes instead, but then you need to escape them in the string:

var AquaStr1 = '<div class="AquaSquare15px" onmouseover="changeColor(\'';
var AquaStr2 = '\')"></div>';

Sascha Krause · Accepted Answer · 2013-04-25T19:32:55.403

0

As pointed out in the comments section: you shouldn't use document.write. But nevertheless, your string concatenation went wrong. Try this instead:

function colorPicker(box) {
    var boxid = document.getElementById(box).id;
    var aquaStr = '<div class="AquaSquare15px" onmouseover="changeColor(\''+boxid+'\')"></div>';

    document.writeln(aquaStr);
}

edited Apr 25 '13 at 19:32

answered Apr 25 '13 at 19:22

Sascha Krause

197
8

1

That will end up as `onmouseover='changeColor("+boxid+")'` in the code, not using the variable `boxid`. – Guffa Apr 25 '13 at 19:28

String building with Javascript document.write

3 Answers3

Linked