---
title: "How to change paragraph font size and color when on button click in JavaScript?"  
description: "How to change paragraph font size and color when on button click in JavaScript?"  
author: "Ravi Vishwakarma"  
published: 2021-07-19  
canonical: https://answers.mindstick.com/qa/93773/how-to-change-paragraph-font-size-and-color-when-on-button-click-in-javascript  
category: "web application"  
tags: ["javascript", "css cascading style sheets", "html5"]  
reading_time: 2 minutes  

---

# How to change paragraph font size and color when on button click in JavaScript?

How to change paragraph [font size](https://www.mindstick.com/forum/158654/what-is-the-css-property-used-to-specify-the-font-size-of-an-element) and [color](https://www.mindstick.com/articles/77/how-to-split-form-background-color-in-c-sharp) when on [button click](https://www.mindstick.com/forum/790/form-gets-submiited-twice-on-button-click) in [JavaScript](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript)?

## Answers

### Answer by Ethan Karla

```
<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta charset='utf-8' />
    <title>JS Demo</title>
    <style type='text/css'>
        * {
            margin:10px;
            padding:0px;
        }
        select {
            width:100px;
        }
    </style>
    <script type='text/javascript'>
        function changeColor() {
            var name = window.document.getElementById('color');
            var size = document.getElementById('inp');
        //alert('Your selected color is : ' + name.value);
        name.style.backgroundColor = name.value;
        window.document.body.style.backgroundColor = name.value;
        document.getElementById('txt').style.fontSize = size.value+'px';
    }
    </script>
</head>
<body>
    <span>Select Color name  : </span>
    <select name='color' id='color' >
        <option value='red'>Red</option>
        <option value='yellow'>Yellow</option>
        <option value='white'>White</option>
        <option value='pink'>Pink</option>
        <option value='green'>Green</option>
    </select>
    <input id='inp' type='number' min='10' max='200' placeholder='Enter font size'/>
    <button type='button' onclick='changeColor()' value=' Submit ' id='sub'> Submit </button>
    <p id='txt'>this is demo of txt </p>
</body>
</html>
```


---

Original Source: https://answers.mindstick.com/qa/93773/how-to-change-paragraph-font-size-and-color-when-on-button-click-in-javascript

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
