javascript - 通过 JavaScript 将输出显示到多个类

Question

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

这是我到目前为止的代码(尽管它会显示错误，因为它无法访问代码片段内的 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 )并设置每个元素的 innerHTML ，而不是获取集合中的第一项(使用 [0] )具有类 displayUserName。

例如

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.

工作 fiddle :https://jsfiddle.net/hosney/3pxfybrc/1/