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
}

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
}

• javascript

• Your data is NOT a JSON object. Please do not edit your question to fix a typo or issue which is causing the problem that you were posting about. Instead, if the problem was caused by a simple mistake or a typo, close the question. If you have remaining/different questions, open a new question. – user663031 Commented Feb 27, 2016 at 17:32
• 1 There is no such thing as a JSON object. JSON is a string-based representation used for exchanging information. What you have here is a plain old everyday JavaScript object. – user663031 Commented Feb 27, 2016 at 17:34

2 Answers 2

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' />

For my case to upadte the input text directly , It is easier, as your reference:

var element = document.getElementById('element_id');
element.value = 'random_value';

FYR:https://teamtreehouse.com/community/change-a-value-of-an-input