QuerySelector设置文本值

Question

我有一个循环，应该将 <input type="text"/> 的值设置为 "none" 并更新占位符。 当我记录节点时，它正常工作，但是 value 和 placeholder 没有更新？ 出了什么问题？

数据是一个 JSON 对象。

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
}

- M1X

---

您的数据不是JSON对象。请不要编辑您的问题以修复导致您发布的问题的拼写错误或问题。相反，如果问题是由简单的错误或拼写错误引起的，请关闭问题。如果您有其他问题，请打开一个新问题。 - user663031

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - user663031

Answer 1

不应该解析一个对象，而是直接使用它：

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

- Zakaria Acharki

---

你的意思是什么？为什么你想要在浏览器中更新DOM？ - Zakaria Acharki

“text value”应该被更新，因为你的代码是正确的，你应该检查“data”中的数据。 - Zakaria Acharki

var data = JSON.parse({"password":"password","username":"xhinii"}); - M1X

你不应该解析这个对象，因为它是JavaScript对象，直接使用即可。请查看我的更新。 - Zakaria Acharki

嘿，抱歉我的代码没问题，问题不在于我解析对象的方式。我有两个同名的输入框，第一个更新了，而不是我想要的那个。我已经修复了。 - M1X

Answer 2

对于我的情况，直接更新输入文本会更容易，可以参考以下代码：

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

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

- temple