通过 JavaScript 向多个类显示输出

Question

我正在编写一个“游戏本引擎”，它提供了设置用户名的可能性。名称取自 id="setUserNameInput" 的输​​入，并由函数 setUserName() 保存。它显示/加载到包含 class="displayUserName" 的元素中，并由函数 displayUserName() 加载。它只适用于一个页面的一个类，但是一旦我添加更多，我就必须定义要定位哪一个，因为它不会自动将它们全部定位。我曾尝试使用 document.getElementById、document.getElementsByName 以及 document.querySelectorAll 和 document.querySelector，但都不起作用。 （顺便说一下，我使用 Bulma 作为我的 CSS 框架）

这是我到目前为止的代码（尽管它会显示错误，因为它无法访问 sn-p 内的 localStorage）： 此页面http://scampsblog.com/docs/example-de.html 包含一个（工作，哈哈）示例。由于它是一个文档（页面位于我的测试服务器上，因此是域），您可能需要查看 http://scampsblog.com/docs/character-enginedotjs-de.html，它解释/显示了各个元素（文档是德语，但如果您需要，我可以提供翻译一）。

我正在努力解决的 JS 部分就在第一行，但如果您提出一些整体改进建议，我将很乐意接受。

var userNameOutput = document.getElementsByClassName('displayUserName')[0];

function setUserName() {
  var usernameinput = document.getElementById('setUserNameInput').value;
  localStorage.setItem('userName', usernameinput);

  if (!localStorage.getItem('userName')) {
    setUserName();
  } else {
    var storedUserName = localStorage.getItem('userName');
    userNameOutput.innerHTML = storedUserName;
  }
}


function displayUserName() {
  if (!localStorage.getItem('userName')) {
    setUserName();
  } else {
    var storedUserName = localStorage.getItem('userName');
    userNameOutput.innerHTML = storedUserName;
  }
}

window.onload = function displayUserName() {
  if (!localStorage.getItem('userName')) {
    setUserName();
  } else {
    var storedUserName = localStorage.getItem('userName');
    userNameOutput.innerHTML = storedUserName;
  }
}

<input type="text" class="input" placeholder="Your name goes here" id="setUserNameInput">


<input type="button" class="button" value="Set your username" onclick="setUserName()" />



<input type="button" class="button" value="Display on click" onclick="displayUserName()" />
<br> So you shall be called <span class="displayUserName"></span>! But dont worry, <span class="displayUserName"></span>, it will be all fine.

Answer 1

您可以迭代它（使用for...of）而不是获取集合中的第一个项目（使用for...of）并设置每个具有displayUserName类的元素的innerHTML。

例如

var userNameOutputs = document.querySelectorAll('.displayUserName');

for (let ele of userNameOutputs) {
  ele.innerHTML = userName;
}

完整代码，对结构进行了一些优化：

function setUserName() {
  var usernameinput = document.getElementById('setUserNameInput').value;
  localStorage.setItem('userName', usernameinput);
  displayUserName(true); // pass true to avoid recursion
}

function displayUserName(skipSet) {
  var userName = localStorage.getItem('userName');
  
  if (!userName && !skipSet) {
    setUserName();
  } else {
    var userNameOutputs = document.querySelectorAll('.displayUserName');
    
    for (let ele of userNameOutputs) {
      ele.innerHTML = userName;
    }
  }
}

window.onload = displayUserName;

<input type="text" class="input" placeholder="Your name goes here" id="setUserNameInput">

<input type="button" class="button" value="Set your username" onclick="setUserName()" />

<input type="button" class="button" value="Display on click" onclick="displayUserName()" />
<br> So you shall be called <span class="displayUserName"></span>! But dont worry, <span class="displayUserName"></span>, it will be all fine.

工作小提琴：https://jsfiddle.net/hosney/3pxfybrc/1/

Answer 2

var userNameOutput = document.getElementsByClassName('displayUserName')[0];

[0] 选择类名的元素数组的第一个元素。