Can't change button innerHTML with JS [duplicate]

Question

I can't find a way to change the string "FIND NOW" into something else. I have tried for hours

<button type="submit" class="qbutton  default" style="">FIND NOW</button>

I tried something like this:

<script>
  document.getElementsbyClassName('.button.qbutton.default').innerHTML('change it!');
</script>

Could someone help please?

Go read up on how getElementsbyClassName works … it returns a collection, not a single element, so you have to access one of those elements inside the collection first. — C3roe
– C3roe, Commented Jun 14, 2018 at 13:22
document.getElementsByClassName('qbutton default')[0].innerHTML = 'change it!' read DOCs before posting questions — Satpal
– Satpal, Commented Jun 14, 2018 at 13:23
Also your button in the selector doesn't want a dot before it as you don't have a class of button — Pete
– Pete, Commented Jun 14, 2018 at 13:24
document.getElementsByClassName('qbutton default')[0].innerHTML="change it"; — Karen Vicknair
– Karen Vicknair, Commented Jun 14, 2018 at 13:36

Ankit Agarwal · Accepted Answer · 2018-06-14 14:06:06Z

1

Use document.querySelector('button.qbutton.default') as querySelector() will allow you to select the particular element based on the selector and not list of elements. Also you need to use button as selector and not .button and make sure the script is after the body element to get the HTML rendered properly first.

document.querySelector('button.qbutton.default').innerHTML = 'change it!';

<button type="submit" class="qbutton  default" style="">FIND NOW</button>

edited Jun 14, 2018 at 14:06

answered Jun 14, 2018 at 13:25

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

John Wilver Over a year ago

Thanks for the quick reply. It still doesn't work on my page though. How is that possible? My JS is enclosed between script tags.

Ankit Agarwal Over a year ago

@JohnWilver You can create a JSFiddle or Plunkr for that and link here

John Wilver Over a year ago

<!DOCTYPE html> <html lang="en" dir="ltr">   <head>     <meta charset="utf-8">     <title>Testing</title>   </head>   <script type="text/javascript">   document.querySelector('button.qbutton.default').innerHTML = 'change it!';   </script>   <body>     <button type="submit" class="qbutton  default" style="">FIND NOW</button>   </body>  </html>

Ankit Agarwal Over a year ago

@JohnWilver you need to specify the script after body tag like ``` <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Testing</title> </head> <body> <button type="submit" class="qbutton default" style="">FIND NOW</button> </body> <script type="text/javascript"> document.querySelector('button.qbutton.default').innerHTML = 'change it!'; </script> </html>```

Ankit Agarwal Over a year ago

@JohnWilver answer is also updated

|

Collectives™ on Stack Overflow

Can't change button innerHTML with JS [duplicate]

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related