Javascript block of quotes

Question

    var circle;
    var love = 30;

      document.getElementById("output"). innerHTML=("

     The Circle is __ Units with an Area of __
                    <svg version='1.1'
      width='360' height='300'
      xmlns='http://www.w3.org/2000/svg'>

          <circle  cx='50%' cy='50%' r='" + love  + " %'  stroke='black' 
          stroke-width='2' fill='red'/>
        </svg>");

I know there is a syntax error in here, and I am sure it has to do with the multitude of quotes in the block. Should I make it into smaller strings and combine them. Kind of like .= with PHP? (The whole point of the block is to set the SVG radius{r} to variable love.) - Thanks Josh

Edit 2 # (Thanks to the Communities Support, Here is some nice neat Working Code)

            var love = 30;
            var va1 = "The Circle is __ Units with an Area of __ ";
                    var va2 =" <svg version='1.1' width='360' height='300' xmlns='http://www.w3.org/2000/svg'>" ;
                    var va3 = " <circle  cx='50%' cy='50%' r='" ;
                    var va4 =  "%'  stroke='black'  stroke-width='2' fill='red'/> </svg>";
                  document.getElementById("output"). innerHTML=(va1+ va2 + va3 + love +va4);

Multiline strings aren't supported in JS. See http://stackoverflow.com/questions/805107/creating-multiline-strings-in-javascript — danronmoon, Apr 06 '13 at 02:17
Man you guys are really not liking my question, almost makes me sad :( — WackyMole, Apr 06 '13 at 02:49
As a final note* I had no idea that JS did not like Multiline- Teaching myself HTML, JS, CSS PHP and MYSQLI all at once, gets a little confusing. Thanks though — WackyMole, Apr 06 '13 at 02:55

999k · Accepted Answer · 2013-04-06T02:46:11.370

3

Use escape symbol \ for multi line strings

Like this

 var circle;
 var love = 30;

  document.getElementById("output"). innerHTML=(" \
        The Circle is __ Units with an Area of __ \
                <svg version='1.1' \
                width='360' height='300' \
                xmlns='http://www.w3.org/2000/svg'> \
                <circle  cx='50%' cy='50%' r='" + love  + "%'  stroke='black'  \
               stroke-width='2' fill='red'/> \
               </svg>");

edited Apr 06 '13 at 02:46

answered Apr 06 '13 at 02:19

999k

6,257
2
29
32

Thank you for the suggestion, I am still battling with the Quotes(function is only running part way through) though, so any other suggestion would be appreciated. – WackyMole Apr 06 '13 at 02:29
Which function? what exactly is your problem now. Without knowing i cant help you. i think now the syntax error is gone – 999k Apr 06 '13 at 02:36

score 0 · Answer 2 · answered Apr 06 '13 at 04:43

I would honestly avoid the concatenation, the end-of-line markers, and just build these elements out. The code, in my opinion, would be far less brittle, as well as easier on the eyes. This is what I did below, including a small helper function to map members of an object literal to the attributes of my elements:

View it online: http://jsfiddle.net/jonathansampson/er9ys/

// References and values we'll be needing
var out = document.querySelector("body"), 
    nsp = "http://www.w3.org/2000/svg", 
    lov = 30;

// Build our message, svg element, and circle
var msg = document.createTextNode("Circle is _ Units, w/ an Area of _");
var svg = makeEl(nsp, "svg", { version: 1.1, height: 300, width: 360 });
var ccl = makeEl(nsp, "circle", { cx: "50%", cy: "50%", r: lov + "%" });

// Add children to appropriate parents
svg.appendChild(ccl);
out.appendChild(msg);
out.appendChild(svg);

// Small utility for adding attrs
function makeEl ( namespace, tag, attrs ) {
    var el = document.createElementNS(namespace, tag), prop;
    for ( prop in attrs ) 
        el.setAttribute( prop, attrs[prop] );
    return el;
}

Javascript block of quotes

2 Answers2