使用javascript加载页面时自动将跨度文本复制到输入字段答案

【问题标题】：Copy span text to input field automatically when page load using javascript使用javascript加载页面时自动将跨度文本复制到输入字段
【发布时间】：2020-09-24 14:56:13
【问题描述】：

我想复制 span 的文本内容并在页面加载时自动粘贴到输入字段。每当我使用 getElementByClassName 代码时都无法正常工作，但当我使用 getElementById 代码时，代码运行良好。

请大家帮忙，非常感谢。

document.addEventListener('DOMContentLoaded', (event) => {
  document.getElementById('showTag').value = document.getElementByClassName('addTag')[0].textContent;
});

<p class="addTag">
  Copy this to input field
</p>

<input name="showTag" type="text" id="showTag" />

【问题讨论】：

编辑删除php和css标签，因为它们不相关
我将您的问题编辑为 sn-p，现在您可以在浏览器控制台中看到应该可以看到的异常。
错字错误它是getElement s ByClassName，元素是复数
@MisterJojo ahaha 你做到了，谢谢兄弟。
使用F12这种错误在控制台生成信息

标签： javascript html

【解决方案1】：

你没看错，只是一个错字：getElementByClassName

应该是：getElementsByClassName。

document.getElementsByClassName('addTag')[0].textContent;

不过，既然你知道并且总是期望它始终是第一个元素，你不妨这样写：

document.querySelector('addTag').textContent;

<p class="addTag">
  Copy this to input field
</p>

<input name="showTag" type="text" id="showTag" />

<script>
document.addEventListener('DOMContentLoaded', (event) => {

  document.getElementById('showTag').value = document.getElementsByClassName('addTag')[0].textContent;
  // or 
  document.getElementById('showTag').value = document.querySelector('.addTag').textContent;

});
</script>

【讨论】：

嗨@Hakik 谢谢你的回答，但我已经找到了问题，我忘了放一个“s”getElementByClassName 它应该是getElementsByClassName。
是的，答案的开头已经写了。
哦！我现在看到我不小心调换了它们的顺序，我的错。

【解决方案2】：

 window.addEventListener('load', (event) => {
 var x = document.getElementsByClassName('addTag')[0].innerHTML;
 var y = document.getElementById('showTag');
 y.value=x;
 });

https://jsfiddle.net/dbwpox38/

【讨论】：

有人在此回复中添加了一条评论，称“有关拼写错误的问题不值得回复，因此会被删除”，然后他们对我的回答投了反对票。有哪位前辈能证实一下吗？如果是这样，我将不得不停止回答所有问题，以防万一有人打错了，我错过了......