I am trying to figure out what all its trying to get from the code below:

var svg   = document.querySelector('svg'),
path  = document.querySelector('path');
var code = document.querySelector('#code');

And the code that its referencing above is:

<textarea id="code">var curve = new CurveAnimator(
 [206,47], [182,280],
 [90,234], [273,101]
);

var o = document.getElementById('img');
o.style.position = 'absolute';

curve.animate(2, function(point,angle){
  o.style.left = point.x+"px";
  o.style.top  = point.y+"px";
  o.style.transform =
    o.style.webkitTransform =
    o.style.MozTransform =
    "rotate("+angle+"deg)";
});
</textarea>

<section>
<svg viewBox="0 0 450 370" width="400px" height="370px" xmlns="" class="content">
    <path d="M50,300 C50,100 350,100 350,300 " />
</svg>
</section>

The goal is to take those HTML code and place it within the javascript itself so its not looking for it in the tags in the HTML code. However, i am unable to find out what its getting from those querySelector in order to do that myself.

Any help would be great!

When i do alert(document.getElementById('code')); i get this:

Code string:

var code = "var curve = new CurveAnimator([206,47], [182,280],[90,234], [273,101]);var o = document.getElementById('img');
o.style.position = 'absolute';curve.animate(2, function(point,angle){o.style.left = point.x+""px"";o.style.top  = point.y+""px"";o.style.transform = o.style.webkitTransform =o.style.MozTransform =""rotate("" + angle + ""deg)"";});"

I am trying to figure out what all its trying to get from the code below:

var svg   = document.querySelector('svg'),
path  = document.querySelector('path');
var code = document.querySelector('#code');

And the code that its referencing above is:

<textarea id="code">var curve = new CurveAnimator(
 [206,47], [182,280],
 [90,234], [273,101]
);

var o = document.getElementById('img');
o.style.position = 'absolute';

curve.animate(2, function(point,angle){
  o.style.left = point.x+"px";
  o.style.top  = point.y+"px";
  o.style.transform =
    o.style.webkitTransform =
    o.style.MozTransform =
    "rotate("+angle+"deg)";
});
</textarea>

<section>
<svg viewBox="0 0 450 370" width="400px" height="370px" xmlns="http://www.w3/2000/svg" class="content">
    <path d="M50,300 C50,100 350,100 350,300 " />
</svg>
</section>

The goal is to take those HTML code and place it within the javascript itself so its not looking for it in the tags in the HTML code. However, i am unable to find out what its getting from those querySelector in order to do that myself.

Any help would be great!

When i do alert(document.getElementById('code')); i get this:

Code string:

var code = "var curve = new CurveAnimator([206,47], [182,280],[90,234], [273,101]);var o = document.getElementById('img');
o.style.position = 'absolute';curve.animate(2, function(point,angle){o.style.left = point.x+""px"";o.style.top  = point.y+""px"";o.style.transform = o.style.webkitTransform =o.style.MozTransform =""rotate("" + angle + ""deg)"";});"

• javascript
• css-selectors
• selectors-api

• 1 Protip: Use console.log instead of alert when dealing with DOM Elements. – gen_Eric Commented May 16, 2012 at 20:15
• 1 youre getting the right thing, if you want the content of #code, then you need to do alert(document.getElementById('code').innerHTML) all youre doing at the moment is finding the node called code – raddrick Commented May 16, 2012 at 20:16
• 1 @StealthRT. html() is jQuery, you need .innerHTML – gdoron Commented May 16, 2012 at 20:22
• 1 As far as I can see, if you are prepared to use jQuery, there's no need ever(?) to use document.querySelector() (though someone may know of some unusual circumstance). In general, jQuery will do everything document.querySelector() does plus a whole lot more. – Beetroot-Beetroot Commented May 16, 2012 at 20:34
• 1 @Beetroot-Beetroot i wouldn't necessarily just use jQuery for the fun of it...I suppose it depends on your level of knowledge/how much extra coding you want to do to do it in plain old js, but it adds an overhead to the site that might be overkill for your needs...IMO – raddrick Commented May 16, 2012 at 20:35

3 Answers 3

document.querySelector('svg')  === document.getElementsByTagName('svg').item(0)
document.querySelector('path') === document.getElementsByTagName('path').item(0)
document.querySelector('#code') === document.getElementById('code')

querySelector returns the first matched element, or null if it didn't find any.

document.querySelector

Returns the first element within the document (using depth-first pre-order traversal of the document's nodes) that matches the specified group of selectors.

You should take a tutorial about CSS selectors.

You're getting the right thing, if you want the content of #code, then you need to do

alert(document.getElementById('code').innerHTML)

all you're doing at the moment is finding the node called code

to get that code onto the page you need to do this,

var node = document.createElement("script");
node.innerHTML = document.getElementById('code').innerHTML;
document.getElementsByTagName("head").appendChild(node);

this will extract the code from your textarea, create a script tag in the header, and add the content from your div..then the page will the code ready to use, and all you will have to do is invoke it.

alternatively, you could have this content in a external js file and on document load add it to the page in a similar way...

var node = document.createElement("script");
node.setAttribute("href","js/curveanimate.js") 
document.getElementsByTagName("head").appendChild(node)

You just need to add '.value' to the end to see that property

alert(document.getElementById('code').value)

Here's an example with your code.

EDIT:

Is this more along the lines of what you're looking for?