---
title: "How to change inner text of button in html using JS?"  
description: "How to change inner text of button in html using JS?"  
author: "Ravi Vishwakarma"  
published: 2021-07-19  
canonical: https://answers.mindstick.com/qa/93770/how-to-change-inner-text-of-button-in-html-using-js  
category: "web application"  
tags: ["html5", "css cascading style sheets", "javascript", "web development", "web application development"]  
reading_time: 1 minute  

---

# How to change inner text of button in html using JS?

How to change inner [text](https://www.mindstick.com/blog/301635/did-people-reinvent-texting-to-express-the-full-range-of-emotions) of [button](https://www.mindstick.com/articles/63/how-to-add-button-in-datagridview-in-csharp-dot-net) in [html](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript) using JS?

## Answers

### Answer by Ethan Karla

We will use the innerHTML property of html for changing the button text.

Syntax

```
    element.innerHTML = naw-value;
```

```
<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta charset='utf-8' />
    <title></title>
</head>
<body>
    <p>Click on button then change the inner data of button </p>
    <button id='btn' onclick='changeData()'>Click Me</button>
    <script>
        var i = 0;
        function changeData() {
            document.getElementById('btn').innerHTML = 'You click me ' + (++i) + ' times';
            var x = Math.floor((Math.random() * 1000) + 999);
            var col = '#bf' + x;
            document.body.style.backgroundColor = col;
        }
    </script>
</body>
</html>
```


---

Original Source: https://answers.mindstick.com/qa/93770/how-to-change-inner-text-of-button-in-html-using-js

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
