更改跨度文本值 JavaScript/jQuery

Posted 2023-05-08

【中文标题】更改跨度文本值 JavaScript/jQuery

【英文标题】：Changing span text value JavaScript/jQuery

【发布时间】：2021-09-08 03:10:35

【问题描述】：

我正在尝试将 ID="DNTCaptchaInputText-error" 的跨度（请参见图片）作为目标，我希望能够将“此字段为必填项”的内部文本更改为更自定义的错误消息，例如, "请输入安全码"。

到目前为止我已经尝试过：

document.getElementById('DNTCaptchaInputText-error').innerhtml = 'please type out the security 
code';

也试过了

document.getElementsByClassName('DNTCaptchaInputText-error')[0].innerHTML = 'please type out 
security code.';

到目前为止，这些似乎都不起作用，请问有什么想法吗？

谢谢。

//编辑

代码还是不行

<div class="input-group"><span class="input-group-prepend"><span 
class="input-group-text"><i class="fas fa-lock"></i></span></span><input 
autocomplete="off" class="text-box form-control input-validation-error" 
data-required-msg="none" data-val="true" data-val-required="none" 
dir="ltr" id="DNTCaptchaInputText" name="DNTCaptchaInputText" 
placeholder="Enter Code" required="required" type="text" value="" aria- 
describedby="DNTCaptchaInputText-error" aria-invalid="true"></div>

<span class="text-danger field-validation-error" data-valmsg- 
for="DNTCaptchaInputText" data-valmsg-replace="true"><span 
id="DNTCaptchaInputText-error" class="">This field is required</span> 
</span>

我真的不明白为什么 document.getElementById('DNTCaptchaInputText-error').innerHTML = 'New text here'; 不起作用！一直说不能将innerHTML属性设置为null，我在这里尝试了所有建议的答案。

【问题讨论】：

“不起作用”如何？有任何错误信息吗？

id DNTCaptchaInputText-error 是该类型的唯一 id 吗？ id 标签必须特定于 1 个元素。可能是您没有更改正确的元素，您的第一个示例应该可以正常工作

要补充以上关于多个id 的观点，还要检查您是否在 DOM 加载之后执行您的JS 代码。

我在控制台日志中得到的错误是，“无法设置属性'innerHTML' of null”基本上，我设法更改了输入字段中的占位符，它工作正常：document.getElementsByName('DNTCaptchaInputText' )[0].placeholder = '输入代码';但是更改跨度似乎是一场噩梦，这是我实现的 ReCaptcha，称为 DNTCaptcha，因此跨度是自动添加的，只需使用 JS 定位它，这样我就可以抛出自定义错误消息。

【参考方案1】：

试试这样就行了。

document.getElementById('DNTCaptchaInputText').textContent='please type out the security code';

【讨论】：

您好，感谢您的回答，我试过了，但仍然无法正常工作，但仍然在控制台中出现错误“无法设置属性 'innerHTML' of null”。这是输入字段名称“DNTCaptchaInputText”的跨度，当该字段中没有输入值并且用户点击提交时，该跨度显示。

【参考方案2】：

您的代码看起来不错，您只需要在使用它时检查该元素是否存在。

解决方案 1：

检查 dom 是否正确加载。使用window.onload 事件并将您的代码放入其中。

解决方案 2：

添加一个标志来检查元素是否存在并将代码放入块中。

另外，请检查下面的 sn-p 中的两个工作解决方案。

// will fire when everything will be loaded
window.onload = function() 
  document.getElementById('DNTCaptchaInputText-error').textContent = 'This message will show when window is loaded';


// just checking null for selected dom
if (document.getElementById('DNTCaptchaInputText-error')) 
  document.getElementById('DNTCaptchaInputText-error').innerHTML = 'This is dynamic message';

<p id="DNTCaptchaInputText-error">I am the default error</p>

注意：window.onload 将覆盖该值，因为它在加载窗口后执行。阅读更多关于它的信息here

【讨论】：

您好，感谢您的回答，不幸的是没有用 - 请查看编辑后的版本。

应用此技巧后遇到什么错误？以及您尝试了什么解决方案？

这是一个奇怪的错误，一直说，“无法设置属性 'innerHTML' of null”，如果我将 .innerHTML 更改为 .textContext 错误消息将是：“无法设置属性 'textContext' of null ”。输入字段以及跨度（我正在尝试定位）是自动生成的，因为我尝试实现的解决方案是使用此处找到的 dnt-recaptcha：github.com/VahidN/DNTCaptcha.Core（一切正常，只需专门更改此字段 asp -validation-error-message="请以数字形式输入安全码。" 自定义消息的值）是否有帮助？

你试过解决方案1了吗？

是的，两个伙伴都试过了，只是不会改变 - 我通过使用这个改变了占位符文本： document.getElementsByName('DNTaptchaInputText')[0].placeholder = '请输入如图所示的代码';但是那个错误范围拒绝只是不知道，因为我已经尝试了一切。解决方案 1 在控制台日志中不显示错误，只是不显示文本。