-1

I am trying to assign document.getElementById('name') to 'name' but it is not getting assigned why ?

<body>
  <h1>Hello World</h1>
  <input type="text" id="name">
  <script type="text/javascript">
    var name;
    console.log('before change name = ',  name);// [object HTMLInputElement]
    name = 'change value of name';
    console.log('after change name = ', name);//change value of name. name is changeable here
    name = 5;
    console.log('again change name = ', name);// 5. name is changeable here 
    var worker = new Worker('/js/worker.js');
    name = document.getElementById('name');//name is not changeable here why ?
    console.log('assign input name value name = ', name);//[object HTMLInputElement]
    name.onkeyup = function(){
      worker.postMessage({msg:'send to worker'});
    };
    worker.onmessage = function(e){
      console.log(e.data, 'from worker');
    };
  </script>
</body>

I just want to get access of document.getElementById('name') into name but This line name = document.getElementById('name') has not effect on name why ?

intekhab
  • 1,566
  • 1
  • 13
  • 19
  • Edited my answer to fit your clarified intentions. – connexo Sep 07 '15 at 07:28
  • Not working yet. This line `name = document.getElementById('name');` has no effect on `name`. If I do change `name` to `nam` or anything rather than `name` then its working fine – intekhab Sep 07 '15 at 08:30
  • Even the comment in your source code says that after assigning the line you question `name` contains `"[object HTMLInputElement]"`. So what exactly is your question? http://jsbin.com/hidocobixa/edit?html,js,console,output – connexo Sep 11 '15 at 05:59
  • It should hold the reference of document.getElementById('name');. But it is not – intekhab Sep 11 '15 at 06:01
  • You are wrong. It does. Check the JSBin I linked. What exactly makes you think it does not hold a reference? – connexo Sep 11 '15 at 06:02
  • Its really a strange behaviour. when i running this code on browser I am getting this "before change name = [object HTMLInputElement] (index):8 after change name = change value of name (index):10 again change name = 5 (index):13 Reference of input = [object HTMLInputElement]"................ But when I am running it in jsfiddle then the result is ok – intekhab Sep 11 '15 at 06:35
  • @Connexo please check it on browser – intekhab Sep 11 '15 at 06:43
  • What do you mean by "check it on browser"? – connexo Sep 11 '15 at 07:17
  • @connexo make a file of the code and type the url of that file in browser and then run that file and check the console output – intekhab Sep 11 '15 at 08:32

3 Answers3

0

You're assigning the DOM element with the id="name" to name. Probably what you want is the DOM element's current value.

name = document.getElementById('name').value;

Edit:

Since what you need is to attach an event handler to the element, you need to use addEventListener() method:

name = document.getElementById('name');
name.addEventListener("keyup", function() {
    worker.postMessage({msg:"'send to worker'});
});

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener?redirectlocale=en-US&redirectslug=DOM%2FEventTarget.addEventListener

connexo
  • 53,704
  • 14
  • 91
  • 128
0

Well this all depends on what you are tring to assign. Your question is not very clear.

If you are trying to set the value of 'name' (the element) to the value of 'name' (the javascript variable), you would use:

document.getElementById("name").value = name;

If you are trying to set the value of 'name' (the variable) to the value of 'name' (the element), you would use:

name = document.getElementById("name").value; //(As shown in the previous answer)

If you are trying to display the value of 'name' (the variable) in the innerHTML of a (p, li, td, etc.) you would use:

document.getElementById("name").innerHTML = name;
Damian Silva
  • 336
  • 3
  • 19
  • I am just getting access of document.getElementById('name') to name varialbe so that i can add event on it later name.onkeyup = function(){ worker.postMessage({msg:'send to worker'}); }; – intekhab Sep 07 '15 at 04:06
0

It seems the reason we are not able to use 'name' as a global variable is the fact that 'name' is the property of the window object of the browser. It is a built-in property in JavaScript. Visit: https://developer.mozilla.org/en-US/docs/Web/API/Window/name

It was answered here: What is the name keyword in JavaScript?

val-iban
  • 43
  • 5