时间戳

首页 > 解决方案 > JS中没有设置的字符串

javascript - JS中没有设置的字符串

问题描述

我正在开发一个 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");

有谁知道为什么p1andp2值不会改变？

标签： javascripthtml

解决方案

你试过用...

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

[编辑] 解释

查看您的标记，您想访问 a <p>inside a <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

推荐阅读