How can I get the colors by clicking a button

Question

HI, I have multiple <p> of colors in a div, I want to get these colors when I click a button
exemple:
<div id="mots">

<p style = "color:red"> rouge </p>
<p style = "color:blue"> bleu </p>
<p style = "color:green"> vert </p>
<p style = "color:yellow"> jaune </p>
<p style = "color:black"> noir </p>
<p style = "color:white"> blanc </p>
<p style = "color:pink"> rose </p>
<p style = "color:purple"> violet </p>
<p style = "color:orange"> orange </p>
<p style = "color:grey"> gris </p>
<p style = "color:brown"> marron </p>
<p style = "color:turquoise"> turquoise </p>

</div>
I have a button.addEventListener...click...function...I know how to do that, but I don't know how to get access to the paragraphs in a div and get those words each time I click the button

Answer 1

Well, a bit confused also as i'm not an expert,but few things:
1-What are the effects you'd like once the button clicked?
2-where you placed i++ means you ll never call the red color from your array as on the first click the first index will be 1 , so second element.
3-you declared myFunction() inside your eventListener but never called it.
Maybe you'd like to declare it outside and then call it inside?
4-as an id is unique it is getElementById (no s at the end of element)
5-Better if you copy the link of your code (if posted on sololearn) instead of copy/paste it.This way we'll be able to see the console message and see the errors returned if so.

Answer 2

jeSuisCodeuse salut,
To collect the p elements, you can use : document.getElementsByTagName("p") or document.querySelectorAll("p") to store all p in a variable.
Ex:
let myP=document.getElementsByTagName("p");

myP will be an array of all your p elements which mean you can access them by their index.
You will be able to loop through the array.

Ex:
myP[1] will give you access to the one with color blue.

You can also give an id to each p and on the same principle use,
Ex : if first p has id="red".

In this case as an id is unique the variable won't be an array, it will just be that element you choose.

let oneP=document.getElementById("red");

For further explanations:
https://www.w3schools.com/js/js_htmldom_document.asp

https://www.sololearn.com/learn/JavaScript/2753/

Answer 3

I've tried it, it doesn't work grrrr

Answer 4

You will get better help if you post a piece of code of the JavaScript because it can comes from different reasons why it doesn't work.
For exemple you say you have a button, that means you created one with let button=document.createElement("button")
And then you append it (with appendChild() ) to a part of your html ?
Because in your html you didn't set a button actually.
Maybe start simple, add a button in your html then in js try to interact with one element only:

//Store your p elements to interact with

let myP=document.querySelectorAll("p")

//Assign your button to a variable to use it

let button=document.querySelector("button")

//Set your button to do something

button.addEventListener("click",()=>{ myP[0].style.color="orange" })

Is it changing the color of text when you click?

Also sometimes you have to make the js wait html has been loaded first otherwise you will have errors appearing in your console .
To do so start your js file with:

window.onload=()=>{

//you place your js code here

}

Answer 5

const button = document.querySelector('button');

let colors = ['red', 'blue', 'green', 'yellow', 'black', 'white', 'pink', 'purple', 'orange', 'grey', 'brown', 'turquoise'];

let colorSound = [new Audio('red.mp3'), new Audio('blue.mp3'), new Audio('green.mp3'), new Audio('yellow.mp3'), new Audio('black.mp3'), new Audio('white.mp3'), new Audio('pink.mp3'), new Audio('purple.mp3'), new Audio('orange.mp3'), new Audio('grey.mp3'), new Audio('brown.mp3'), new Audio('turquoise.mp3')];

let i = 0 ;

button.addEventListener('click', function(){

i++;
car.style.color = colors[i];
colorSound[i].play();

if(i === colors.length - 1){
i = -1;
}
function myFunction(){
const couleurs = document.getElementsById('mots').childNodes;

for (i = 0; i < couleurs.length; i++) {
return couleurs[i].text;
}
}
});

I know I'm missing something I don't understand well, but I dont know exactly WHAT

Answer 6

I don't know, I've tried everything , it doesn't work at all, I'm giving up
Thank you for your answers !

Answer 7

You're welcome,no need to give up, just giving a break will allow you to gain knowledge aside ,so you can solve your problem later.
Or someone will provide you an efficient solution later.
Have a good time.

Answer 8

Maybe this will help

Let i = 0;
document.querySelector('button').addEventListener('click', (e) => { console.log(getPText(i)); //this return the text base on the current value of i so first click return first p text
i++;})

function getPText(i) {
let pTags = document.getElementById('mots').children;
return pTags[i].innerHTML;
}

Answer 9

<!doctype html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id=black>
<p id=white>White</p>
<p id=grey>Grey</p>
</div>
<style>
#black {
color: black
}
#white {
color: white
}
#grey {
color: grey
}
</style>
</body>
</html>