"undefined" problem with element on session storage

Question

Please be nice, i am a baby futur developer.

I am creating a (fake) website to book bikes in Toulouse (France). I want to save in the session storage the name of the bike-station the user choose, because i need to show it after the bike booking.

Problem: The bike station name return by the devaux API is OK. I display it #station-name. I save it in the session storage. But when i try to collect it after -> undefined

Everything is OK for the name and forename (save in the localstorage).

Can you help me please ?

https://github.com/ldoba/project-03

HTML

<div class="row">
              <form class="form-group col-sm-12 col-md-6" id="booking-info">
                <div class="form-info" id ='form-info'>
                  <label for="name">Nom</label>
                  <input type="text" id="name" class="form-control" onkeyup='javascript:isCharSet()'>
                  <label for="forename">Prénom</label>
                  <input type="text" id="forename" class="form-control" onkeyup='javascript:isCharSet()'>
                </div>
                <button href="#modal1" class="btn-dark js-modal btn-reservation" id="btn-booking">Réserver</button>
              </form>
            </div>
            <aside id="modal1" class="modal" aria-hidden="true" role="dialog" aria-labelledby="titlemodal" style="display: none;">
              <div class="modal1-wrapper js-modal-stop"> 
                <button class="btn btn-dark js-modal-close row col-md-2 float-right">Fermer</button>
                <h2 class="row col-md-10" id="titlemodal">Veuillez signer puis cliquer sur "Confirmer la réservation"</h2>
                <canvas id="canvas"></canvas>
                <button type="button" class="btn btn-light" id="reset">Clear</button>
                <button type="button" class="btn btn-success justify-content-md-center row col-md-6 js-modal-close" id="canvasbtn">Confirmer la réservation</button>
              </div>
            </aside>
          </section>

The JS part for the form ->

//création des constantes nécessaires
const stationName = document.getElementById('station-name');
const inputName = document.getElementById('name');
const inputForename = document.getElementById('forename');
const btnBooking = document.getElementById('btn-booking');
const btnSubmit = document.getElementById('canvasbtn');
const afterBookingInfos = document.querySelector('.afterBookingInfos');
// desactive le bouton quand le javascript se charge
btnBooking.disabled = true;

// fonction appelee des qu'une touche est enfoncee
function isCharSet() {
  // on verifie si le champ n'est pas vide alors on desactive le bouton sinon on l'active
  if (inputName.value != "" && inputForename.value != "") {
    btnBooking.disabled = false;
  } else {
    btnBooking.disabled = true;
  }  
}
// exécuter la fonction quand le bouton 'Confirmer la réservation' est cliqué
canvasbtn.addEventListener('click', function() {
    // stocker le nom et prénom entrés dans le web storage
    sessionStorage.setItem('station-name', stationName.value);
    localStorage.setItem('name', inputName.value);
    localStorage.setItem('forename', inputForename.value);
     // exécuter nameDisplayCheck()
     nameDisplayCheck();
  });

// définit la fonction nameDisplayCheck()
function nameDisplayCheck() {
    // vérifie si les éléments 'name' et 'forename' sont stockés dans le web storage
    if(localStorage.getItem('name') && localStorage.getItem('forename') && sessionStorage.getItem('station-name')) {
        // Si c'est le cas, affiche un message personnalisé
        let stationNom = sessionStorage.getItem('station-name');
        let name = localStorage.getItem('name');
        let forename = localStorage.getItem('forename');
        afterBookingInfos.textContent = 'Vélo réservé à la station ' + stationNom + ' par ' + name + ' ' + forename + ' ' + 'Temps restant : ';
    } else {
      // Sinon, affiche une info générique
        afterBookingInfos.textContent = 'Pas de réservation en cours';
    }
  }

  document.body.onload = nameDisplayCheck;

Answer 1

I have reviewed your code. Issue is this line https://github.com/ldoba/project-03/blob/master/js/form.js#L23

sessionStorage.setItem('station-name', stationName.value);

This should be textContent because your are getting a value from span tag

sessionStorage.setItem('station-name', stationName.textContent);

The same for console.log() https://github.com/ldoba/project-03/blob/master/js/form.js#L26

Also I will suggest to change

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

to

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

because your are creating a variable on form.js file. https://github.com/ldoba/project-03/blob/master/js/form.js#L6