JS 中未设置字符串

Question

我正在开发一个 javascript 项目，但在显示附加字符串时遇到问题。现在，我正在尝试将 Crawler1 和 Crawler2 更改为用户输入的用户名。这些用户名存储在本地存储中：

这是我用来将 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");

<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

值不会改变吗？

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");

[编辑] 说明

查看您的标记，您想要访问

<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 返回

HTMLCollection

为

HTMLFormElements

您可以使用名称 id 访问集合，这将返回一个

HTMLFormElement

。但是在

['element-id']

上使用

HTMLFormElement

不会有任何作用。

您可以使用@simnutoli所示的

querySelector

或如下所示的

getElementById

。

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