Encountering an unexpected problem that I never thought would happen. I wrote a word limiter code for a text box on a single page and it was working perfectly fine. The word limiter worked and the remaining words were displayed by a label named "remaining6". However, when I copied the same code into a child page of the master page, the word limiter functionality works but the remaining words are not displayed:
<input type="text" id="TextBox5" placeholder="latest" runat="server" onkeyup="countChar(this)" />
<h5 >Characters Left <span id="remaining6">20</span></h5>
<script type="text/javascript" >
function countChar(val) {
var len = val.value.length;
if (len >= 10) {
val.value = val.value.substring(0, 10);
}
else
{
$('.numbersofChart').text(10 - len);
alert("before");
var textEntered = document.getElementById('TextBox5').value;
alert("after");
var msg = document.getElementById('remaining6');
var counter = (10 - (textEntered.length));
msg.textContent = counter;
}
};
</script>
While debugging this code using alerts, "before" is displayed but "after" is not. This indicates an error in the line:
var textEntered = document.getElementById('TextBox5').value;
I'm unsure why the code is not executing from this point. It's worth noting that the code runs smoothly on a single page (without the master page).The issue arises when pasted into a child page of the master. I've ensured that all necessary libraries are included in the child page. How can I solve this problem?