I have the following code to set the text of the button through javascript code , but it does not work it remains same the text remains same.
function showFilter
If the HTMLElement
is input[type='button']
, input[type='submit']
, etc.
<input id="ShowButton" type="button" value="Show">
<input id="ShowButton" type="submit" value="Show">
change it using this code:
document.querySelector('#ShowButton').value = 'Hide';
If, the HTMLElement
is button[type='button']
, button[type='submit']
, etc:
<button id="ShowButton" type="button">Show</button>
<button id="ShowButton" type="submit">Show</button>
change it using any of these methods,
document.querySelector('#ShowButton').innerHTML = 'Hide';
document.querySelector('#ShowButton').innerText = 'Hide';
document.querySelector('#ShowButton').textContent = 'Hide';
Please note that
input
is an empty tag and cannot have innerHTML
, innerText
or textContent
button
is a container tag and can have innerHTML
, innerText
or textContent
You must use value
instead of .innerHTML
Try this.
document.getElementById("ShowButton").value= "Hide Filter";
And since you are running the button at server
the ID may get mangled in the framework. I so, try
document.getElementById('<%=ShowButton.ClientID %>').value= "Hide Filter";
Another better way to do this is like this.
On markup, change your onclick attribute like this. onclick="showFilterItem(this)"
Now use it like this
function showFilterItem(objButton) {
if (filterstatus == 0) {
filterstatus = 1;
$find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().showFilterItem();
objButton.value = "Hide Filter";
}
else {
filterstatus = 0;
$find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().hideFilterItem();
objButton.value = "Show filter";
}
}
I know this question has been answered but I also see there is another way missing which I would like to cover it.There are multiple ways to achieve this.
1- innerHTML
document.getElementById("ShowButton").innerHTML = 'Show Filter';
You can insert HTML into this. But the disadvantage of this method is, it has cross site security attacks. So for adding text, its better to avoid this for security reasons.
2- innerText
document.getElementById("ShowButton").innerText = 'Show Filter';
This will also achieve the result but its heavy under the hood as it requires some layout system information, due to which the performance decreases. Unlike innerHTML, you cannot insert the HTML tags with this. Check Performance Here
3- textContent
document.getElementById("ShowButton").textContent = 'Show Filter';
This will also achieve the same result but it doesn't have security issues like innerHTML as it doesn't parse HTML like innerText. Besides, it is also light due to which performance increases.
So if a text has to be added like above, then its better to use textContent.
innerText is the current correct answer for this. The other answers are outdated and incorrect.
document.getElementById('ShowButton').innerText = 'Show filter';
innerHTML also works, and can be used to insert HTML.
You can toggle filterstatus
value like this
filterstatus ^= 1;
So your function looks like
function showFilterItem(objButton) {
if (filterstatus == 0) {
$find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().showFilterItem();
objButton.value = "Hide Filter";
}
else {
$find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().hideFilterItem();
objButton.value = "Show filter";
}
filterstatus ^= 1;
}
Another solution could be using jquery button selector inside the if else statement $("#buttonId").text("your text");
function showFilterItem() {
if (filterstatus == 0) {
filterstatus = 1;
$find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().showFilterItem();
$("#ShowButton").text("Hide Filter");
}
else {
filterstatus = 0;
$find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().hideFilterItem();
$("#ShowButton").text("Show Filter");
}}