CODEWITHSUNDEEP
javascripthtml
Dante
Dante

Reputation: 57

How to style a text string that is added by using a JavaScript function?

The link below is supposed to reveal more text when clicked, which it does, however the text uses all default styling, which cannot be seen on my black background that I use for the page. I have tried to style the tag where the text is added through JavaScript, but the added text still uses the default style.

Below is the code I have used: HTML:

<p>


    This movie might seem boring to you at first and you 
      might not get it after <br>first time viewing, like I did. But this 
    is one of the greatest movies ever made.....
        <a  href="#" onClick="more(event)">Read More</a>
    <p id="atext" class="atext">dqdas</p>
        <script src="Home.js"></script>
    </p>

and JavaScript:

function more(e) {
    e.preventDefault();
document.getElementById("atext").style.color= "white";
document.getElementById("atext").outerHTML = 'It touches many issues in our lives and packs a hell of a plot twist';

}

Upvotes: 0

Views: 63

Answers (1)

AlexH
AlexH

Reputation: 856

Simply use innerText rather then outerHTML. This should solve the issue.

I believe this happens because setting the HTML of an element overwrites any styles it may have. Setting the text does not do this.

Also, it is generally best to use innerText when necessary, as it reduces the risk of errors like yours occurring.

Upvotes: 1

Related Questions