Can't use const/var outside of a function

Question

This a javascript script working on Tampermonkey

I can't use my const idElement outside of my timed function.

I need to use the value of my get in the sendEmail function. I can't use getElementbyId in the sendEmail function I must put I timer because the page where I need to use this script load very strangely ( 3 or 4 times in a row ).

When I put sendEmail into the timed function, the value was in.

I tried to put sendEmail into the timed function but I need to have a button to launch sendEmail and not a timed thing.

The "recup" was here because a tried to verify if I can use it (idElement) but only from the timed function.

(function() {
  'use strict';

  // Créer le bouton
  var emailButton = document.createElement('button');
  emailButton.innerText = 'Envoyer un e-mail';
  emailButton.style.position = 'fixed';
  emailButton.style.bottom = '20px';
  emailButton.style.right = '20px';
  emailButton.style.zIndex = '9999';
  emailButton.style.padding = '10px';
  emailButton.style.backgroundColor = '#a83232';
  emailButton.style.color = 'white';
  emailButton.style.border = 'none';
  emailButton.style.borderRadius = '5px';
  emailButton.style.cursor = 'pointer';

  const idElement = "rien";

  function recup(idElement) {
    if (idElement) {
      console.log('Valeur de l\'input:', idElement);
    } else {
      console.log('Élément input introuvable.');
    }
  }

  window.addEventListener('load', function() {
    // Utilisez setTimeout pour afficher le message après 1 minute (60000 millisecondes)
    setTimeout(function() {
      const idElement = document.getElementById('application-AccessManagement-Display-component---accessManagementPhase--accessmanagement_01_01_01-defaultXML--internationalCode-inner').value;
      console.log(idElement);
      return idElement;
      emailButton.style.backgroundColor = '#38a832';
    }, 10000);
  });

  // Ajouter le bouton à la page
  document.body.appendChild(emailButton);

  // Fonction pour ouvrir l'application de messagerie par défaut avec des informations pré-remplies
  function sendEmail(idElement) {
    var destinataire = 'kevin';
    var recipient = '[email protected]';
    var subject = 'Sujet de l\'e-mail';

    // Variables que vous pouvez définir
    var variable2 = 'Valeur de la variable 2';
    var variable3 = 'Valeur de la variable 3';
    // ... Ajoutez plus de variables si nécessaire

    // Corps de l'e-mail avec les variables
    var body = 'Contenu de l\'e-mail :\n\n';
    body += 'Variable 1 : ' + idElement + '\n';
    body += 'Variable 2 : ' + variable2 + '\n';
    body += 'Variable 3 : ' + variable3 + '\n';

    var mailtoLink = 'mailto:' + recipient + '?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(body);
    window.location.href = mailtoLink;
  };

  // Ajouter l'événement de clic au bouton
  emailButton.addEventListener('click', sendEmail(idElement));

  // Appeler la fonction recup lorsque la page est complètement chargée
  //document.addEventListener('DOMContentLoaded', recup);
})();

Answer 1

Change

emailButton.addEventListener('click', sendEmail(idElement)); to

emailButton.addEventListener('click', () => { sendEmail() });

or just

emailButton.addEventListener('click', sendEmail);

since you are invoking sendmail immediately you add the event -

Then change function sendEmail(idElement) { to function sendEmail() { and let the function access the global variable.

Then also remove the const from const idElement inside the function and change the global variable to let idElement

I have changed the timeout to an interval so it will check every second if the element exists and stop when it does

I have also wrapped everything in the DOMContentLoaded since it makes better sense

(function() {
  'use strict';
  window.addEventListener('DOMContentLoaded', function() {
    // Créer le bouton
    var emailButton = document.createElement('button');
    emailButton.innerText = 'Envoyer un e-mail';
    emailButton.style.position = 'fixed';
    emailButton.style.bottom = '20px';
    emailButton.style.right = '20px';
    emailButton.style.zIndex = '9999';
    emailButton.style.padding = '10px';
    emailButton.style.backgroundColor = '#a83232';
    emailButton.style.color = 'white';
    emailButton.style.border = 'none';
    emailButton.style.borderRadius = '5px';
    emailButton.style.cursor = 'pointer';

    let idElement = "rien"; // accessible from the whole IIFE


    // Utilisez setTimeout pour afficher le message après 10 secondes
    let tId = setInterval(function() {
      const element = document.getElementById('application-AccessManagement-Display-component---accessManagementPhase--accessmanagement_01_01_01-defaultXML--internationalCode-inner');
      if (element) {
        idElement = element.value; // set the global value
        console.log(idElement);
        emailButton.style.backgroundColor = '#38a832';
        clearInterval(tId)
      }
    }, 1000);


    // Ajouter le bouton à la page
    document.body.appendChild(emailButton);

    // Fonction pour ouvrir l'application de messagerie par défaut avec des informations pré-remplies
    function sendEmail() {
      var destinataire = 'kevin';
      var recipient = '[email protected]';
      var subject = 'Sujet de l\'e-mail';

      // Variables que vous pouvez définir
      var variable2 = 'Valeur de la variable 2';
      var variable3 = 'Valeur de la variable 3';
      // ... Ajoutez plus de variables si nécessaire

      // Corps de l'e-mail avec les variables
      var body = 'Contenu de l\'e-mail :\n\n';
      body += 'Variable 1 : ' + idElement + '\n'; // from the global variable
      body += 'Variable 2 : ' + variable2 + '\n';
      body += 'Variable 3 : ' + variable3 + '\n';

      var mailtoLink = 'mailto:' + recipient + '?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(body);
      window.location.href = mailtoLink;
    };

    // Ajouter l'événement de clic au bouton
    emailButton.addEventListener('click', sendEmail);
  });

})();