Question

我有多个具有相同类名的span元素，我想选择所有这些元素并在每个元素中显示文本。问题是a看不到任何东西，我确定问题是如何选择元素。

JavaScript

let everyHeaderUsername = document.getElementsByClassName("user-header-username");
  for (let i = 0; i < everyHeaderUsername.length; ++i) {
    everyHeaderUsername[i].textContent = `Hi ${user.displayName}`;
}

HTML

<div class="user-sign-in">Hi, <span class="user-header-username"></span>
</div>

Answer 1

您的代码很好。您无需定义要将文本设置为的变量：

   <div class= "alert show alertmsg" role="alert" >
  <Timercount ref="child"/>
  </div>

 <form @submit.prevent="submitHospitalAssistanceForm(); accesTimercount()" v-show=" 
     !isSuccessMessage">
  <h3>Hospital Assistance</h3>
  <div class="row gtr-uniform">
    <div class="col-6 col-12-xsmall">
    <div class="inputIcons">
      <input
        type="text"
        name="FirstName"
        value
        placeholder=" First Name"
        v-model="FirstName" autocomplete="off"
        required
      />
      <i class="fas fa-user" aria-hidden="true"></i>
      </div>
       <span class="errorNotification" v-if="message.PFirstName">
         {{message.FirstName}}
         </span>

var user={displayName:'bob'};

let everyHeaderUsername = document.getElementsByClassName("user-header-username");
  for (let i = 0; i < everyHeaderUsername.length; ++i) {
    everyHeaderUsername[i].textContent = `${user.displayName}`;
}

Answer 2

您可以使用innerText代替textContent。结果是：

everyHeaderUsername[i].innerText = Hi ${user.displayName};

Answer 3

如果您没有键 displayName 的对象用户，那就是您的问题。检查一下：

let everyHeaderUsername = document.getElementsByClassName("user-header-username");
var user = {
    displayName : 'Nick'
}
  for (let i = 0; i < everyHeaderUsername.length; ++i) {
    everyHeaderUsername[i].textContent = `Hi ${user.displayName}`;
}

Answer 4

现代ES6 JS：使用document.querySelectorAll返回元素数组和数组映射。

const elements = document.querySelectorAll('user-header-username');
elements.map(el => el.textContent = `Hello, ${user}!`);

选择具有相同类名的多个span元素

4 个答案: