Question

编辑：我将var更改为class，但是这里可能有一些错误。

在这里，我想拥有一个段落，用户可以在其中更改下一个段落的名称。我使用的代码仅更改一个名称，而其余名称保持不变。

  <script type="text/javascript">
    function changey(){
      var userInput = document.getElementById('userInput').value;
      var list = document.getElementByClassName('kiddo');

      for (let item of list) {
         item.innerHTML = userInput;
      }
    }
</script>

<input id="userInput" type="text" value="Name of kid" />
<input onclick="changey()" type="button" value="Change Name" /><br>

Welcome to the site <b class="kiddo">dude</b> This is how you create a document that changes the name of the <b class="kiddo">dude</b>. If you want to say <b class="kiddo">dude</b> more times, you can!

没有错误消息，代码仅更改一个名称，而不是全部三个。

Answer 1

在HTML中使用class="kiddo"代替id。

然后可以使用var kiddos = document.getElementsByClassName('kiddo')，它将返回存储在kiddos中的该类名称的所有元素的数组。

然后，您只需要遍历这些值并更改所需的内容。

下面的循环示例：

for (var i = 0; i < kiddos.length; i++) {
     kiddos[i].innerHTML = userInput;
}

Answer 2

id在页面上应该是唯一的。 Javascript假定只有一个具有给定id的元素。相反，您应该使用class。然后，您可以使用getElementsByClassName()来返回可以迭代和更改的元素的整个数组。有关示例，请参见Select ALL getElementsByClassName on a page without specifying [0] etc。

Answer 3

您好，您不应使用id，而应使用class。

Welcome to the site <b class="kiddo">dude</b> This is how you create a document that changes the name of the <b class="kiddo">dude</b>. If you want to say <b class="kiddo">dude</b> more times, you can!

在Js部分之后：

<script type="text/javascript">
    function changey(){
      var userInput = document.getElementById('userInput').value;
      var list = document.getElementByClassName('kiddo');

      for (let item of list) {
         item.innerHTML = userInput;
      }
    }
</script>

Answer 4

尝试： document.querySelectorAll('.kiddo') 与 <b class="kiddo">dude</b>

Answer 5

您应使用ID为inst的类。如果您使用id，则id [kiddo]必须是唯一的

Answer 6

简而言之，document.querySelectorAll('.kiddo')或 document.getElementsByClassName('kiddo')将为您提供要循环的元素列表。不过请注意querySelectorAll-它使用CSS选择器（注意点），并且从技术上讲不会返回数组（不过您仍然可以遍历它）。

有关完整的工作示例，请参见下面的代码（const和arrow函数与var和function相似，因此我也将使用旧的JavaScript编写一个版本）：

const formEl = document.querySelector('.js-name-change-form')
const getNameEls = () => document.querySelectorAll('.js-name')

const useNameFromForm = (formEl) => {
  const formData = new FormData(formEl)
  const nameValue = formData.get('name')
  const nameEls = getNameEls()
  
  // Set the text of each name element
  // NOTE: use .textContent instead of .innerHTML - it doesn't get parsed, so it's faster and less work
  nameEls.forEach(el => el.textContent = nameValue)
}

// Handle form submit
formEl.addEventListener('submit', (e) => {
  useNameFromForm(e.target)  
  e.preventDefault() // Prevent the default HTTP request
})

// Run at the start, too
useNameFromForm(formEl)

.name {
  font-weight: bold;
}

<!-- Using a <form> + <button> (submit) here instead -->
<form class="js-name-change-form">
  <input name="name" value="dude" placeholder="Name of kid" />
  <button>Change Name</button>
<form>

<!-- NOTE: Updated to use js- for js hooks -->
<!-- NOTE: Changed kiddo/js-name to spans + name class to remove design details from the HTML -->
<p>
Welcome to the site, <span class="js-name name"></span>! This is how you create a document that changes the name of the <span class="js-name name"></span>. If you want to say <span class="js-name name"></span> more times, you can!
</p>

var formEl = document.querySelector('.js-name-change-form');

var getNameEls = function getNameEls() {
  return document.querySelectorAll('.js-name');
};

var useNameFromForm = function useNameFromForm(formEl) {
  var formData = new FormData(formEl);
  var nameValue = formData.get('name');
  var nameEls = getNameEls(); // Set the text of each name element

  // NOTE: use .textContent instead of .innerHTML - it doesn't get parsed, so it's faster and less work
  nameEls.forEach(function (el) {
    return el.textContent = nameValue;
  });
};

// Handle form submit
formEl.addEventListener('submit', function (e) {
  useNameFromForm(e.target);
  e.preventDefault(); // Prevent the default HTTP request
});

// Run at the start, too
useNameFromForm(formEl);

<button class="js-get-quote-btn">Get Quote</button>
<div class="js-selected-quote"><!-- Initially Empty --></div>

<!-- Template to clone -->
<template class="js-quote-template">
    <div class="js-quote-root quote">
        <h2 class="js-quote"></h2>
        <h3 class="js-author"></h3>
    </div>
</template>

Answer 7

除了您只捕获了带有class =“ kiddo”的第一个标签外，您几乎已完成所有操作。查看您的问题，因为您需要更新带有class =“ kiddo”的标签内的所有值，因此您需要捕获所有这些使用document.getElementsByClassName（“ kiddo”）具有class =“ kiddo”的标记，并在将每个循环元素的innerHTML设置为userInput的同时遍历列表。有关示例，请参见此链接：https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

如何更改多个元素？

7 个答案: