[Résolu] afficher le resultat d'une boucle for

Sujet résolu

10 mai 2022 à 17:43:34

bonjour, je débute en javascript et je ne comprend pas comment afficher le résultat du script dans le page html.

Voici mon script javascript :

let year = 2020;

for (let i = 0; i <= 10; i++)
{
    if ((year%4==0) && ((year%100!=0) || (year%400==0)))
    {
        console.log(`${year} est une année bissextile`);
    }
    else 
    {
        console.log(`${year} est pas une année bissextile`);
    }
    year++;
}

et mon code html qui est vide pour le moment :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Document</title>
</head>
<body>
   <p id="annee"></p>
   
   <script src="assets/js/script.js"></script>
    
</body>
</html>

je me voudrez retirer les consol.log et mettre autres chose a la place qui affiche le résultat sur le page html.

Merci d'avance

-
Edité par ThomasApril 11 mai 2022 à 18:04:46

SamuelGaborieau3

10 mai 2022 à 18:15:53

Bonjour, sur Openclassrooms il y à le cours ecrivez du javascript pour le web qui apprend à manipuler le document en Javascript.

Il y à aussi le cours apprenez a programmer avec javascript qui permet d'apprendre les syntaxes de base de Javascript.

suggestion de présentation.

Scraping Scrap

10 mai 2022 à 18:21:00

Bonjour,

Tu peux mettre une

alert();

Ou tu peux sélectionner un élément HTML et lui ajouter la valeur. Ex :

<h1 class="year1"></h1>
<input type="text" class="year2">
<script>
    document.querySelector('.year1').textContent = year;
    document.querySelector('.year2').value = year;
// year est ta variable year...
</script>

-
Edité par Scraping Scrap 10 mai 2022 à 18:21:55

D’où viennent les gens les plus dangereux ? D’Angers. Ahahah...

ThomasApril

10 mai 2022 à 18:24:41

SamuelGaborieau3 a écrit:

Bonjour, sur Openclassrooms il y à le cours ecrivez du javascript pour le web qui apprend à manipuler le document en Javascript.

Il y à aussi le cours apprenez a programmer avec javascript qui permet d'apprendre les syntaxes de base de Javascript.

J'ai bien regarder les tutos mais je n'ai pas vraiment eu ma réponse. Je dois créer dans mon html le meme nombre de <p> que je vais ajouter ou je peux les créers du coté du js?

Non je ne veux pas d'alerte je veux vraiment créer des <p>

j'ai tenter ceci :

let year = 2020;
let p = document.createElement("p");
document.getElementById("main").appendChild(p);


for (let i = 0; i <= 10; i++)
{
    if ((year%4==0) && ((year%100!=0) || (year%400==0)))
    {
        document.getElementById("main").appendChild(p);
        p.innerHTML = year + "est bissextille";
    }
    else 
    {
        document.getElementById("main").appendChild(p);
        p.innerHTML = year + " est pas bissextille";
        p.style.color = "green";
    }
    year++;
}

Mais comme je me douter, cela ne m'affiche que la phrase de la boucle

-
Edité par ThomasApril 10 mai 2022 à 18:25:57

SamuelGaborieau3

10 mai 2022 à 18:47:43

Bonjour, je pense que ton code fonctionne quasiment.

Il faudrait peut-être créé le paragraphe à l'intérieur de la boucle.

Comme tu ajoutes un paragraphe à chaque tour de boucle, tu en créé un à chaque tour de boucle.

let year = 2020;
 
 
for (let i = 0; i <= 10; i++)
{
	
	let p = document.createElement("p");

    if ((year%4==0) && ((year%100!=0) || (year%400==0)))
    {
        document.getElementById("main").appendChild(p);
        p.innerHTML = year + "est bissextille";
    }
    else
    {
        document.getElementById("main").appendChild(p);
        p.innerHTML = year + " est pas bissextille";
        p.style.color = "green";
    }
    year++;
}

suggestion de présentation.

ThomasApril

10 mai 2022 à 18:56:57

Edit :

let year = 2020;
  
  
for (let i = 0; i <= 10; i++)
{
     
    let p = document.createElement("p");
 
    if ((year%4==0) && ((year%100!=0) || (year%400==0)))
    {
        document.getElementById("main").appendChild(p);
        p.innerHTML = year + "est bissextille";
        p.style.color = "red";
    }
    else
    {
        document.getElementById("main").appendChild(p);
        p.innerHTML = year + " est pas bissextille";
        p.style.color = "green";
    }
    year++;
}

C'est bon tout fonctionne, merci beaucoup

-
Edité par ThomasApril 10 mai 2022 à 19:16:35