CODEWITHSUNDEEP
javascripthtmlcssbuttononclick
pr0grammar
pr0grammar

Reputation: 107

How to style the text after clicking the button differently than the text before clicking (JS, CSS)?

I want the output of after-click to have a different colour. For example, the colour of the text (that of <p>) is blue before clicking the button, I would like the after-click output to have a green colour.

However, I can't seem to find relevant information on the web and am unable to do so myself. Here's my code:

button {
border: 1px solid black;
color: white;
background-color: black;
padding: 10px 20px;
font-size: 15px;
cursor: pointer;
transition-duration: .5s;
}
button:hover {
background-color: blue;
}
p {
color: blue;
font-size: 20px;
}
<p id="demo">Hello everyone! I will get changed after being clicked :)</p>

<button onClick='document.getElementById("demo").innerHTML = "I appear after clicking the button :P"' class="xx">Click</button>

I'm new to JavaScript so please bear with me... I tried doing different things after not being able to find what I want, like I wrote (id="xx") after .innerHTML inside the <button> tag and styled it using CSS but it styled the button itself and didn't give the desired output:

<!DOCTYPE html>
<html>
<head>
<style>
button {
border: 1px solid black;
color: white;
background-color: black;
padding: 10px 20px;
font-size: 15px;
cursor: pointer;
transition-duration: .5s;
}
button:hover {
background-color: blue;
}
#xx {
font-size: 20px;
color: blue;
}

</style>
</head>
<body>


<p id="demo">Hello everyone! I will get changed after being clicked :)</p>

<button onClick='document.getElementById("demo").innerHTML(id="xx") = "I appear after clicking the button :P"' class="xx">Click</button>



</body>
</html>

I also tried other things which failed so I'm at a loss here. Can anyone tell me how to have a differently styled text after clicking the button?

Here's an illustration of the output required:

enter image description here

Upvotes: 0

Views: 1780

Answers (4)

Andy
Andy

Reputation: 63550

Element precedence in CSS can be confusing so maybe the easiest thing would be to add a class to your demo element - which sets the initial colour - and then have the button add a new colour class.

const demo = document.querySelector('#demo');
const button = document.querySelector('button');
button.addEventListener('click', handleClick, false);

function handleClick() {
  demo.textContent = 'I appear after clicking the button';
  demo.classList.add('green');
}
.blue { color: blue; }
.green { color: green; }
<p id="demo" class="blue">Hello everyone! I will get changed after being clicked :)</p>
<button>Click</button>

Upvotes: 1

Diego M. Rodrigues
Diego M. Rodrigues

Reputation: 64

Check this code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example with button</title>
    <style>
        body {
            color: blue;
        }
        button {
            border: 1px solid gray;
            color: white;
            background-color: gray;
            width: 150px;
            height: 40px;
            font-size: 15px;
            cursor: pointer;
        }
        button:hover {
            border-color: darkolivegreen;
            background-color: darkolivegreen;
        }
        .newstyle {
            color: green;
        }
    </style>
    <script>
        function change_text_color() {
            let text = document.querySelector('#demo')
            text.innerHTML= "I appear after clicking the button :P";
            text.className = "newstyle";
        }
    </script>
</head>
<body>
    <p id="demo">Hello everyone! I will get changed after being clicked :)</p>
    <br/>
    <button onClick='javascript:change_text_color();' class="xx">Click here</button>
</body>
</html>

Upvotes: 1

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23500

One way of doing that:

let btn = document.querySelector('#btn')
btn.addEventListener('click', changeText)
function changeText() {
 let ptag = document.querySelector('#demo')
 ptag.innerHTML= "I appear after clicking the button :P"; 
 ptag.className = "newone";
 }
button {
border: 1px solid black;
color: white;
background-color: black;
padding: 10px 20px;
font-size: 15px;
cursor: pointer;
transition-duration: .5s;
}
button:hover {
background-color: blue;
}
p {
color: blue;
font-size: 20px;
}
.newone {
  color: green;
}
<p id="demo">Hello everyone! I will get changed after being clicked :)</p>
<button id="btn" class="xx">Click</button>

Upvotes: 1

Jakob
Jakob

Reputation: 1895

There are basically 2 options in your case. You can add <font> tag to your innerHTML

<button onClick='document.getElementById("demo").innerHTML = "<font color='#90ee90'>I appear after clicking the button :P</font>"' class="xx">Click</button>

or use JavaScript to change the color

document.getElementById("demo").style.color = 'green';

Upvotes: 0

Related Questions