Строки не устанавливаются в JS

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>

Это сценарий JS, который я использую для изменения значений p1 и p2 на имена пользователей. Я очень смущен, почему ничего не добавляется, потому что когда я использую 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

Forms возвращает HTMLCollection из HTMLFormElements

Вы можете получить доступ к коллекции с идентификатором имен, и это вернет HTMLFormElement.Но использование ['element-id'] на HTMLFormElement ничего не даст.

Вместо этого вы можете использовать querySelector, как показало @simnutoli, или getElementById, как показано ниже.

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

Answer 2

Вы пытались использовать ...

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