JavaScript变量名称冲突

Question

 var name = document.querySelectorAll('.info input[type=text]'); var name1 = document.querySelectorAll('.info input[type=text]'); console.log(name); console.log(name1); 

  <div class='info'> <div> <div><label id="dd">Name</label><input type='text'></div> <div><label>Father Name</label><input type='text'></div> </div> </div> 

javascript is producing different results for same code, only variable name is different. this is the output produced on my device

Answer 1

There is a property called name on the window object that you are printing out:

 var name2 = document.querySelectorAll('.info input[type=text]'); var name1 = document.querySelectorAll('.info input[type=text]'); console.log(name === window.name); console.log(name2); console.log(name1); 

  <div class='info'> <div> <div><label id="dd">Name</label><input type='text'></div> <div><label>Father Name</label><input type='text'></div> </div> </div> 

Answer 2

The problem has to do with window.name : https://developer.mozilla.org/en-US/docs/Web/API/Window/name

As you're in the top scope, you are modifying window.name instead of creating a new var. window.name is being converted to a string, that's why it logs something different. You need to wrap that code in a function or use a different variable name.

Answer 3

let [ name1, name2 ] = document.querySelectorAll('.info input[type=text]');

<div class='info'>
   <div>
     <div><label id="dd">Name</label><input type='text'></div>
     <div><label>Father Name</label><input type='text'></div>       
   /div>
</div>

Try using a variable instead of name since that might conflict with window.name , this will only conflict if you are using this variable in your root scope. Use a modular approach instead. To avoid errors like these.