-1

i tried to append all my CSS code into my javaScript and then load it trough js file,i do this,where is the problem?here is the first lines of my js file:

var innerstyle = '#container{width:800px;background:silver;margin:20px auto;padding:10px;color:gray;border-radius:5px}input{padding:3px}input[name="jsvar"]{width:250px;font-family:courier}#display{border:2px gray solid;border-radius:5px;color:white;margin:10px 0}#display #dtitle{background:gray;border-radius:2px 0;padding:10px 5px}#display #dmsg{min-height:20px}#clear{float:right;cursor:pointer;text-decoration:none;color:white;background:red;padding:2px 10px;border-radius:5px}#clear:hover{background:gold}.rtitle{padding:8px;background:pink;text-align:center}.rtitle input{border:1px solid red;float:right}.rtext{max-height:200px;overflow:auto;margin-bottom:5px}.rtext td{min-width:100px}.secfilter{margin-left:5px}';
var styletag = document.createElement('style');
var inst = document.createTextNode(innerstyle);
styletag.appendChild(inst);
var headref = document.getElementsByName('head');
headref.appendChild(styletag);

and here is the chrome console message:

Uncaught TypeError: undefined is not a function
Line 6;
Francesco
  • 69
  • 3
  • 10
  • `getElementsByName` `[...]Returns a nodelist collection with a given name[...]` and not a node. And I'm pretty sure you are looking for `getElementsByTagName` and not `getElementsByName` – t.niese Dec 06 '14 at 14:59
  • I'm not sure if you can inject CSS like that. Try looking at the solution in http://stackoverflow.com/questions/1720320/how-to-dynamically-create-css-class-in-javascript-and-apply or http://davidwalsh.name/add-rules-stylesheets – ckuijjer Dec 06 '14 at 15:00
  • The `.getElementsByName()` function is for retrieving form fields by their "name" attribute. You want `.getElementsByTagName()` here. – Pointy Dec 06 '14 at 15:03
  • Just use `document.head`. –  Dec 06 '14 at 17:49
  • @torazaburo you should mention that IE will support `document.head` only with version 9 and later. – t.niese Dec 07 '14 at 01:05

2 Answers2

1
var innerstyle = '#container{width:800px;background:silver;margin:20px auto;padding:10px;color:gray;border-radius:5px}input{padding:3px}input[name="jsvar"]{width:250px;font-family:courier}#display{border:2px gray solid;border-radius:5px;color:white;margin:10px 0}#display #dtitle{background:gray;border-radius:2px 0;padding:10px 5px}#display #dmsg{min-height:20px}#clear{float:right;cursor:pointer;text-decoration:none;color:white;background:red;padding:2px 10px;border-radius:5px}#clear:hover{background:gold}.rtitle{padding:8px;background:pink;text-align:center}.rtitle input{border:1px solid red;float:right}.rtext{max-height:200px;overflow:auto;margin-bottom:5px}.rtext td{min-width:100px}.secfilter{margin-left:5px}';
var styletag = document.createElement('style');
var inst = document.createTextNode(innerstyle);
styletag.appendChild(inst);
//var headref = document.getElementsByName('head'); // Wrong!
var headref = document.getElementsByTagName('head')[0];
headref.appendChild(styletag);

HTML DOM getElementsByName returns a collection of all elements in the document with the specified name (the value of the name attribute) ("name" attribute deprecated in HTML5 and replaced by "id" attribute for many elements. You should use getElementById thanks @t.niese) like

<input name="somename" />

document.getElementsByName("somename");

instead you could use the ID of the tag like

<input name="somename" id="theId" />

and query the element with:

document.getElementById('theId')

getElementById returns the element that has the ID attribute with the specified value

HTML DOM getElementsByTagName(tag) find all elements with the tag name "tag" and return an array, if you find by the tag name 'head' the first position in the array, would be the head element.

lbrugnara
  • 94
  • 3
  • Just adding a comment `Wrong!` and the _somehow_ correct solution below is not a really useful answer. – t.niese Dec 06 '14 at 15:05
  • And please don't link to w3schools. While the fixed many of their problems over the time, they are still full of flaws and inaccuracies. – t.niese Dec 06 '14 at 15:06
  • 2
    You write that `getElementsByName` is deprecated, probably because of `[...]In HTML5, the "name" attribute is deprecated [...] use the document.getElementById() method where it is appropriate`. And thats exactly the problem of w3schools. Neither `name` nor `getElementsByName` is deprecated, otherwise you can't name form elements. `name` only got invalid for most of the elements except form elements like `input`, ... – t.niese Dec 06 '14 at 15:14
0

This function document.getElementsByName('head'); returns array. Try maybe something like this

document.getElementsByName('head')[0]

Its would give you first finded element with name head

georgelviv
  • 195
  • 1
  • 10