更改跨度文本值 JavaScript/jQuery

Question

我正在嘗試針對 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'; 不工作！ 一直說不能設置 null 的innerHTML 屬性，我在這里嘗試了所有建議的答案。

Answer 1

試試這種方式它的工作。

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

Answer 2

您的代碼看起來不錯，您只需要在使用它時檢查該元素是否存在。

解決方案1：

檢查dom是否正確加載。 使用window.onload事件並將您的代碼放入其中。

解決方案2：

添加一個標志來檢查元素是否存在並將您的代碼放入塊中。

另外，請檢查以下代碼段中的兩個工作解決方案。

 // 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將覆蓋該值，因為它在窗口加載后執行。 在這里閱讀更多相關信息