[edit]说明

Question

我正在处理一个javascript项目，但无法显示附加的字符串。现在，我正在尝试将Crawler1和Crawler2更改为用户输入的用户名。这些用户名存储在本地存储中：

<div id="wrap">
    <div id="left_col">
      <p id="p1">Crawler 1</p>  
    </div>

    <div id="right_col">
      <p id="p2">Crawler 2</p>
    </div>
</div>

这是我用来将p1和p2值更改为用户名的JS脚本。我很困惑为什么什么都没有追加，因为当我使用window.alert框时， localStorage.getItem("name")和localStorage.getItem("name2")打印期望值。

document.forms["game"]["p1"].innerHTML = localStorage.getItem("name");
document.forms["game"]["p2"].innerHTML = localStorage.getItem("name2");

有人知道为什么p1和p2的值不会改变吗？

Answer 1

您尝试使用...

document.querySelector('#left_col p').innerHTML = localStorage.getItem("name");
document.querySelector('#right_col p').innerHTML = localStorage.getItem("name");

...？

或者，如果您确实需要在表单中确定查询范围

const form = document.querySelector('form[name=game]');
form.querySelector('#left_col p').innerHTML = localStorage.getItem("name");
form.querySelector('#right_col p').innerHTML = localStorage.getItem("name");

[edit]说明

查看标记，您想访问<p>内的<div id="">。 document.querySelector()允许您使用DOMElement获得CSS selector。

css选择器#left_col p与元素<p>中的所有id="left_col"匹配。

有关CSS选择器的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

Answer 2

Forms returns an HTMLCollection of HTMLFormElements

您可以使用名称的ID访问该集合，这将返回HTMLFormElement。但是在['element-id']上使用HTMLFormElement不会做任何事情。

您可以使用@ {simnutoli所示的querySelector或如下所示的getElementById。

localStorage.setItem('a', 'b');
document.getElementById("p2").innerHTML = localStorage.getItem('a');

JS中未设置字符串

2 个答案:

[edit]说明