Changer le message de la page d'acceuil

HTML et JS

Sujet résolu

30 mai 2021 à 18:17:22

Bonjour,

Je débute en JS, et je dois changer le message de la page d'accueil en utilisant le pseudo qui est dans le localStorage. Le message est dans ma page HTML, avec une id. Je dois donc le changer, je suppose, avec innerHTML. Voici ce que j'ai écrit, qui ne marche pas:

const nameButton = document.getElementById("nameButton");
const myText =document.getElementById("myText");


function addName(){
    let username = myText.value
    localStorage.setItem("username",username);
}

nameButton.addEventListener("click", addName);

function welcomeUsername(){
    let username = myText.value
    let welcome = document.getElementById("welcome");
    if (! localStorage.getItem("username")){
        addName();
    } else {
        return welcome = welcome.innerHTML + "back" + username
    }
}
welcomeUsername();

Est-ce que vous arriveriez à m'aider ou m'orienter? J'ai fait pas mal d'essais, de google, mais je coince sérieusement.... Merci!

Arthur222

30 mai 2021 à 20:39:17

Salut,

si tu return quelque chose, c'est généralement pour que ça soit gardé dans une variable, par exemple :

function a (){
  return "truc";
}
let t = a();//"truc"

ici la fonction a retourné son résultat pour que le résultat soit gardé dans la variable t.

Mais si tu modifies le html, tu n'as pas besoin de faire ce return :

function a (){
  document.getElementById("elementTruc").innerHTML = "truc";
}
a();

Donc ta ligne pourrait être :

else {
  welcome.innerHTML += "back" + username;//+= pour ajouter, ou welcome.innerHTML = "back"+username , pour tout remplacer
}

Il vaut mieux mettre des ";" à la fin d'une ligne quand le code est fini, sinon ça peut entraîner des erreurs, parfois le navigateur va coller 2 lignes ensemble alors que ce sont deux expressions différentes.

Tu peux regarder dans la console du navigateur les erreurs javascript, avec la ligne de l'erreur à côté.

VéroNes

30 mai 2021 à 22:03:23

Salut Arthur222!

Merci beaucoup pour ton explication et ton aide! Ca m'écrit bien welcome back quand je recharge la page. Ca ne prend pas le username, donc je dois avoir une autre faute.La console ne me donne pas d'erreur.

Et oui, le ";"... c'est pourtant pas faute de nous l'avoir répeter.. je m'emmèle les pieds avec Python, parfois.

Je vais revoir cette histoire de username, qui pourtant est bien dans le localStorage. Du coup, ça doit etre le getItem qui est faux.D'après ce que tu écris, je devrais plutôt utiliser innerHTML au lieu de .value.

J'ai encore de la peine avec ce localStorage.... et à bien comprendre ce qu'est innerHTML par rapport à .value. J'ai du boulot!

Merci encore!

Arthur222

30 mai 2021 à 22:16:43

value c'est pour prendre le contenu d'un input text, ou alors pour aller chercher la value d'un option dans un select (la liste déroulante), alors que innerHTML c'est le contenu à l'intérieur d'une balise html, comme div, span, etc.

Si tu as toujours le même problème, tu peux mettre tout ton code, pour qu'on t'aide à le corriger!

VéroNes

30 mai 2021 à 22:37:28

Merci! Je m'apercois que je suis encore loin du but... pour l'instant, ca me prend le username seulement si je le rentre de nouveau et rafraichi la page, alors qu'il faudrait que ca l'affiche directement quand je rouvre firefox. La logique de ma fonction n'est donc pas bonne... J'ai vraiemnt de lapeine, sur ce coup là!

Il faudrait que je te mette la page index et js? Il y a une partie qui fonctionne avec Python.. mais la, ça marche (ouf!) (L'exercice est une app qui doit prendre des notes)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <title>Homepage</title>
    <link rel="stylesheet" href="static/style.css">
    
</head>
<body>

    <div>
        <h1 id="welcome">Welcome</h1> 
        
        <input type="text"  placeholder="Enter your name" id="myText" >
        <input type="button" value="Send" class="name" id="nameButton">
    </div> 

        <p>This is your note app!</p>
  
        <form action="/search" method="get">
            <input type="text" placeholder="Enter your search" id="searchbox" name="q">
            <input type="submit" value="Search">
        </form>


        <form action="/save" method="GET">
            <input type="text" placeholder="Write your note" id="writebox" name="s">
            <input type="submit" value="Save">
        </form>



        <p id="link"><a href="/notes">See all your notes</a> </p>
        
     
    <script src="static/script.js"></script>

</body>
</html>

et la js

const nameButton = document.getElementById("nameButton");
const myText =document.getElementById("myText");
const username = myText.value

function addName(){
    const username = myText.value;
    localStorage.setItem("username",username);
}

nameButton.addEventListener("click", addName);

function welcomeUsername(){
    username.innerHTML = myText.value;
    document.getElementById("welcome").innerHTML = "Welcome";
    if (! localStorage.getItem("username")){
        addName();
    } else {
        welcome.innerHTML += " back " + username;
    }
}
welcomeUsername();

EDIT: J'ai changé ma fonction comme ça, ça a l'air de marcher...

function welcomeUsername(){
    username = localStorage.getItem("username");
    username.innerHTML = myText.value;
    document.getElementById("welcome").innerHTML = "Welcome";
    welcome.innerHTML += " back " + username;
}
welcomeUsername();

Ne reste plus qu'à trouver comment enlever la partie "Enter your name" et le bouton send si on est sur "Welcome back" (et faire le css, mais ça ne peut pas etre pire que ma galère pour cette fonction!)

-
Edité par VéroNes 30 mai 2021 à 23:02:10

Arthur222

30 mai 2021 à 23:05:52

Voilà un exemple, quand tu arrives sur la page, il y a "welcome", quand tu écris un username, ça te salue, et quand tu rafraichis la page, ça dit "welcome back: le username"

(le forum bug avec le code, voici un lien vers codepen). Quand tu cliques sur restart, c'est pour supprimer le localstorage et refaire le test. Tu peux rafraîchir la page de codepen pour tester le localStorage.

(j'utilise les variables avec le même nom que l'id dans le html, pour aller plus vite, mais la bonne pratique c'est de faire document.getElementById )

-> si tu as trouvé c'est bon

-
Edité par Arthur222 30 mai 2021 à 23:07:24

VéroNes

30 mai 2021 à 23:21:16

Merci beaucoup! Ca a l'air presque plus simple comme tu as fait toi... je ne connais pas onClick, donc j'ai fait avec ce que je savais, mais je garde ça en mémoire!

La, je cherche comment faire pour ne plus pouvoir mettre son nom quand il y a deja un username en mémoire. Je vais bien finir par y arriver!

Merci encore, c'est vraiment sympa!

Arthur222

30 mai 2021 à 23:26:18

Voilà comme tu peux faire :

if (localStorage.getItem("username") != null){
  phrase.innerHTML = "Welcome back : "+localStorage.getItem("username");
  document.getElementById("tonInput").setAttribute("placeholder", "");//<---
}

-
Edité par Arthur222 30 mai 2021 à 23:29:13

VéroNes

30 mai 2021 à 23:32:06

Alors ça.... C'est top!!! Merci infiniment!!

VéroNes

7 juin 2021 à 23:50:57

Me revoila avec mon histoire de welcome et de username... je ne voulais pas ouvrir un nouveau topic. Maintenant que tout ça marche (encore merci!), je voudrais que tant qu'on n'a pas fermé le browser, meme si on navigue d'une page à l'autre, quand on revient sur la page d’accueil, ça continue d'afficher welcome username.

Et que le welcome back username ne s'affiche que quand on ferme et rouvre le browser...

J'avoue que je ne sais même pas quoi chercher ou dans quelle direction aller...je suis au niveau 0, la..

Comment puis-je faire ça??

Arthur222

8 juin 2021 à 18:50:46

Salut,

tu peux récupérer l'url de la page précédente avec document.referrer , et tu peux chercher le mot principal de ton site avec les expressions régulières, par exemple si c'est www.monsite.com tu cherches le mot "monsite" dans le referrer, pour savoir si ça vient de ton site ou non :

let string = document.referrer;
let regex = /(monsite)/g; //tu remplaces monsite par le mot principal de ton site, écrit comme ça entre les parenthèses
let a = string.match(regex);
alert(a);//ça renvoie le résultat trouvé, tu peux faire un if(a=="monsite")... else...

VéroNes

8 juin 2021 à 19:10:45

Salut!

Merci! Je vais essayer ça!

Même si je commence à perdre courage sur ce projet...