Question

我正在写一个＆＃34; Gamebook Engine＆＃34;它提供了设置用户名的可能性。名称取自输入，其id =＆＃34; setUserNameInput＆＃34;并由函数setUserName（）保存。它被显示/加载到包含class =＆＃34; displayUserName＆＃34;的元素中。并由函数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部分正好在第一行，但如果你建议一些整体改进，我会乐意接受它们。

＆＃13;

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;
  }
}

＆＃13;

<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.

＆＃13;

Answer 1

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

e.g。

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;

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

Answer 2

var userNameOutput = document.getElementsByClassName（'displayUserName'）[0];

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

通过JavaScript

2 个答案: