Javascript variable name conflict

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

name and name1 variables are referencing the same dom elements. You could simply give both of your input's a unique id and use that get their reference. — bradcush
– bradcush, Commented Aug 25, 2018 at 15:57
You can add reference by adding separate id's for each input box. Now you are referencing same elements for 'name' and 'name1' — Anji
– Anji, Commented Aug 25, 2018 at 15:59

jh314 · Accepted Answer · 2018-08-25 16:03:24Z

4

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>

answered Aug 25, 2018 at 16:03

jh314

27.9k16 gold badges66 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Axnyff · Accepted Answer · 2018-08-25 16:18:51Z

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.

edited Aug 25, 2018 at 16:18

answered Aug 25, 2018 at 16:03

Axnyff

10.1k4 gold badges36 silver badges40 bronze badges

Comments

Adeel Imran · Accepted Answer · 2018-08-25 16:19:23Z

1

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.

answered Aug 25, 2018 at 16:19

Adeel Imran

14k8 gold badges66 silver badges80 bronze badges

Collectives™ on Stack Overflow

Javascript variable name conflict

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related