QuerySelector set text value

Question

I have this loop which should set the <input type="text"/> value to none and update the placeholder. When I log the node it works fine but the value and placeholder are not updated? What is wrong?

data is a JSON object.

var data = {"password":"password","username":"xhinii"};

JS :

var data = {"password":"password","username":"xhinii"};

for(var prop in data) {
    console.log(document.querySelector('input[name = "' + prop + '"]')); //works fine. logs the node.
    document.querySelector('input[name = "' + prop + '"]').value = ''; //doesn't work
    document.querySelector('input[name = "' + prop + '"]').setAttribute('placeholder', data[prop]);//doesn't work
}

Answer 1

You shouldn't parse an object just use it :

var data= {"password":"password","username":"xhinii"};

for(var prop in data) {
    document.querySelector('input[name = "' + prop + '"]').value = prop; 
    document.querySelector('input[name = "' + prop + '"]').setAttribute('placeholder', data[prop])
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name='password' />
<input name='username' />