Suppose, I have 5 buttons on my page. How can I change the innerHTML of the buttons in one go. I buttons having text "Clicked" should get changed to "Click me" when Change InnerHTML button is clicked.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function ChangeInnerHTML()
{
//Iterate all the buttons with innerHTML = "Clicked" in the DOM and set them to "Click me".
}
</script>
</head>
<body>
<button type="button" id="myButton1">Click me</button>
<button type="button" id="myButton2">Clicked</button>
<button type="button" id="myButton3">Click me</button>
<button type="button" id="myButton4">Clicked</button>
<button type="button" id="myButton5">Click me</button>
<button type="button" id="btnChangeInnerHTML" onclick="ChangeInnerHTML()">Change InnerHTML</button>
</body>
</html>
Suppose, I have 5 buttons on my page. How can I change the innerHTML of the buttons in one go. I buttons having text "Clicked" should get changed to "Click me" when Change InnerHTML button is clicked.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function ChangeInnerHTML()
{
//Iterate all the buttons with innerHTML = "Clicked" in the DOM and set them to "Click me".
}
</script>
</head>
<body>
<button type="button" id="myButton1">Click me</button>
<button type="button" id="myButton2">Clicked</button>
<button type="button" id="myButton3">Click me</button>
<button type="button" id="myButton4">Clicked</button>
<button type="button" id="myButton5">Click me</button>
<button type="button" id="btnChangeInnerHTML" onclick="ChangeInnerHTML()">Change InnerHTML</button>
</body>
</html>
- you have tagged the question using jQuery but is it not used? – Arun P Johny Commented Apr 10, 2014 at 3:08
- @ArunPJohny - I think it can be done using jQuery. Earlier I had emptied all my textboxes using jquery like this $('input[type=text]').val("");. But this time I have to change innerHTML of some of the buttons. – user1556433 Commented Apr 10, 2014 at 3:10
5 Answers
Reset to default 7You can do:
function ChangeInnerHTML() {
$('button').each(function() {
if ($.trim($(this).html()) == "Clicked")
$(this).html('Click me');
});
}
Fiddle Demo
Without jQuery
function ChangeInnerHTML() {
var btns = document.querySelectorAll('button[id^=myButton]');
for (var i = 0; i < btns.length; i++) {
if (btns[i].innerHTML.trim() == 'Clicked') {
btns[i].innerHTML = 'Click Me'
}
}
}
Demo: Fiddle
Use Attribute selector in jquery.
function ChangeInnerHTML() {
$("[id^=myButton]:contains('Clicked')").click(function() {
$(this).text("Click Me");
});
}
Fiddle
The other answers look like too much work...
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function ChangeInnerHTML(){
document.body.innerHTML=
document.body.innerHTML.replace(/Clicked/g,'Click me');
}
</script>
</head>
<body>
<button type="button" id="myButton1">Click me</button>
<button type="button" id="myButton2">Clicked</button>
<button type="button" id="myButton3">Click me</button>
<button type="button" id="myButton4">Clicked</button>
<button type="button" id="myButton5">Click me</button>
<button type="button" id="btnChangeInnerHTML" onclick="ChangeInnerHTML()">Change InnerHTML</button>
</body>
</html>
function ChangeInnerHTML()
{
$("button[id*=myButton]").html("Click me");
}