How to change the color of all paragraphs (not the headings) on click of a button?

Question

I'm using JavaScript and having trouble getting my function to work. I'm trying to change the color of all my paragraphs using a button click, but I haven't managed to achieve it. I have already managed to change the background color with the same button.

This is the function I used to change the paragraphs color:

function color() {
    document.getElementById("changecolor").style.color = "blue";
}

I used an id changecolor on all my paragraphs as well, but doesn't work.

Thank you all for all your answers. Most of those work, but what I'm trying to do is to get the color blue after clicking a button, this is how I code the button part for now: window.confirm("Wanna get laid ?"); if (confirm("Karma bitch!")) { window.location.replace("https://www.youtube.com/watch?v=dQw4w9WgXcQ"); } else { txt = "Smart move!"; } var color = ["#FF00FF"]; var i = 0; document.querySelector("button").addEventListener("click", function (){ i = i < color.length ? ++i : 0; document.querySelector("body").style.background = color[i]}); — Zalachenka, Dec 24 '18 at 18:18
So all this works for now, but I don't seem to find how to add the color blue for the paragraphs JUST on click, not all the time. — Zalachenka, Dec 24 '18 at 18:20

score 1 · Answer 1 · answered Dec 24 '18 at 16:10

I used an id "changecolor" on all my paragraphs as well but doesn't work.

If you're trying to change the background colour of all paragraphs, they should be identified using a Class -- not an ID. If you try to change the CSS of something with a ID, you'll only affect one of the elements on the page with that ID. Classes are meant to be used multiple times through out the page, as opposed to IDs which are meant to be uniqued and, therefore, only used once.

So, if you have a bunch of paragraphs called zalachenka for example, they'd look like this:

<p class="zalachenka">Here's my paragraph text where I want to change the background colour</p>
<p class="zalachenka">Here's my paragraph text where I want to change the background colour</p>
<p class="zalachenka">Here's my paragraph text where I want to change the background colour</p>

You could use getElementsByClassName to find all of these Classes, but that would generate an array of results and you would have to loop through them to assign the colours. To target the first element, you'd have to write your JavaScript like this:

document.getElementsByClassName('zalachenka')[0].style.backgroundColor = 'blue'

Since you have three (in the above example), you would have to loop through all of them.

const elems = document.getElementsByClassName('zalachenka') // returns array of elements.

for (let i = 0; i < elems.length; i++) {
    elems[i].style.backgroundColor = 'blue' // loops through the array and assigns the background color to each element.
}

Keep in mind, this will assign CSS to the Tag inline. When the process is complete, the HTML will looks like this:

<p class="zalachenka" style="background-color: red;">Here's my paragraph text where I want to change the background colour</p>
<p class="zalachenka" style="background-color: red;">Here's my paragraph text where I want to change the background colour</p>
<p class="zalachenka" style="background-color: red;">Here's my paragraph text where I want to change the background colour</p>

score 1 · Answer 2 · answered Dec 24 '18 at 16:22

Your code is fine except the Id part. Just replace the 'getElementById' by 'getElementsByClassName' and give all the paragraph a common class name. For Ex... class='common-paragraph'.

If you give the same id to all the paragraphs then it won't work as Id should be unique. You won't get any error for this in HTML or JS.

score 0 · Answer 3 · answered Dec 24 '18 at 16:08

First, you need to select all the p elements

You can use either

const ps = Array.from(document.querySelectorAll('p')) // string can be any CSS selector

or

const ps = Array.from(document.getElementsByTagName('p')) // might be a bit faster

then

for (let i = 0; i < ps.length; i++) {
  ps[i].style.color = 'green'
}

note:

let and const are replacement for the var keyword, but you can avoid some strange bugs caused by var

note2:

most HTML request doesn't return the type you expect,

<input type="number" > still returns a string as its value

and document.getElementsByTagName returns an array like object, which looks like this:

{ length: 2, 0: foo, 1: bar }

To convert it to an array use Array.from(arrayLike)

I used an id "changecolor" on all my paragraphs as well but doesn't work. you can't use the same html id for multiple elements, use `
text
` instead — tomitheninja, Dec 24 '18 at 16:11

score 0 · Answer 4 · answered Dec 24 '18 at 16:14

you can use class, since id should be unique why id should be unique . Also you can get all the elements by using getElementsByClassName. Which will be a collection so you can use for loop and iterate through each element and change the color.

I hope this will solve the issue

function color() {
var elements = document.getElementsByClassName("changecolor");
  for (var i = 0; i < elements.length; i++) {
        elements[i].style.color = "blue";
    }
};

<p class="changecolor">First Paragraph</p>
<p class="changecolor">Second Paragraph</p>
<p class="changecolor">Third Paragraph</p>
<button onclick="color()">Changing Color Button</button>

score 0 · Answer 5 · answered Dec 24 '18 at 16:18

If you want to apply style to all p tags, you can use javascript's getElementsByTagName to select all elements of a given tag name.

So your javascript code would go like this

        function color() {
        var paragraphs = document.getElementsByTagName("p");
        var i;
        for (i = 0; i < paragraphs.length; i++) {
            paragraphs[i].style.color = "blue";
        }
    };

In case there is a style sheet or script that is already applying a color style, you could use javascripts !important keyword against your style.. in that case the code would get modified like this..

        function color() {
        var paragraphs = document.getElementsByTagName("p");
        var i;
        for (i = 0; i < paragraphs.length; i++) {
            paragraphs[i].style = "color: blue !important";
        }
    };

To apply on a single id you would write like this

document.getElementById("changecolor").style = "color:blue !important;";

Please note that an id attribute must be unique per DOM document. If you apply same id attribute to multiple elements, a warning would appear and document.getElementById("") would return the first element that matched the id.

Thanx.

score 0 · Answer 6 · answered Nov 01 '21 at 08:59

You can't use id for multiple tags in HTML
id for each tag should be uniq
You should use class instead of id

You can do this (Changing Color Using Tag Name):

<p>This is a Paragraph</p>
<p>This is a Paragraph</p>
<p>This is a Paragraph</p>

<button onclick="MakeChanges()">Change Styles</button>

<script>
    function MakeChanges() {
        const MyCollection = document.getElementsByTagName('p')
        for (let i = 0; i < MyCollection.length; i++) {
            MyCollection[i].style.color = "blue"
        }
    }
</script>

Or This (Changing Color Using Class Name):

<p class="changecolor">This is a Paragraph</p>
<p class="changecolor">This is a Paragraph</p>
<p class="changecolor">This is a Paragraph</p>

<button onclick="MakeChanges()">Change Styles</button>

<script>
    function MakeChanges() {
        const pTags = document.getElementsByClassName('changecolor')
        for (let i = 0; i < MyCollection.length; i++) {
            MyCollection[i].style.color = "blue"
        }
    }
</script>

How to change the color of all paragraphs (not the headings) on click of a button?

6 Answers6

You can do this (Changing Color Using Tag Name):

Or This (Changing Color Using Class Name):