Bonjour,

Dans le cadre d'un projet étudiant de développement d'un logiciel via electron js, je travaille actuellement sur l'interface graphique.

Ainsi, Je rencontre actuellement des difficultés pour récupérer le texte de la balise h2 et la changer en fonction du choix fait dans la fenêtre modal. En effet, chaque boites à l'intérieur du panneau peut ouvrir une fenêtre modal qui est identique mais son contenu change en fonction du texte de la balise h2. Ainsi, s'il y a écrit twist dans la balise h2 alors la checkbox twist devra être checké. L'utilisateur pourra également changer le texte de la boîte en choisissant dans le menu des checkbox un autre paramètre. J'ai ainsi essayé de récupérer l'id de l'élément cliqué mais je n'arrive pas à exclusivement extraire le texte de la balise h2.

J'aimerais donc savoir comment je pourrais récupérer le texte de la boîte et comment appliquer un changement via une checkbox ?

Voici les codes HTML, CSS et JS:

HTML :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"> -->

    <!----===== CSS ===== -->
    <link rel="stylesheet" href="style.css">

    <!----===== Boxicons CSS ===== -->
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

    <title>Sail Vision</title>
  </head>
  <body>
      <div class="home">
        <div class="template-1" id="temp1">
          <div class="panel-1">
            <div class="panel-header">
              <h1>Panel 1</h1>
              <i class='bx bx-cog modal-trigger-panel'></i>
            </div>
            <div class="panel-body">
              <div class="sec-5 modal-trigger-data" id="hs-sec-5">
                <h1>--</h1>
                <h2>TWIST</h2>
                <h3>s5</h3>
              </div>
              <div class="sec-4 modal-trigger-data" id="hs-sec-4">
                <h1>--</h1>
                <h2>TWIST</h2>
                <h3>s4</h3>
              </div>
              <div class="sec-3 modal-trigger-data" id="hs-sec-3">
                <h1>--</h1>
                <h2>TWIST</h2>
                <h3>s3</h3>
              </div>
              <div class="sec-2 modal-trigger-data" id="hs-sec-2">
                <h1>--</h1>
                <h2>TWIST</h2>
                <h3>s2</h3>
              </div>
              <div class="sec-1 modal-trigger-data" id="hs-sec-1">
                <h1>--</h1>
                <h2>TWIST</h2>
                <h3>s1</h3>
              </div>
            </div>
          </div>
      </div>
      <div class="modal-container-data">
        <div class="overlay">
          <div class="data">
            <div class="popup-header">
              <button class="close-modal modal-trigger-data">X</button>
              <h1>Choix des données</h1>              
            </div>
            <div class="popup-body">
              <div class="container-box">
                <label for="entry"><input type="checkbox" id="entry" name="entry">Entry</label>
                <label for="cfwd"><input type="checkbox" id="cfwd" name="cfwd">Cfwd</label>
                <label for="camber"><input type="checkbox" id="camber" name="camber">Camber</label>
                <label for="draft"><input type="checkbox" id="draft" name="draft">Draft</label>
                <label for="caft"><input type="checkbox" id="caft" name="caft">Caft</label>
                <label for="exit"><input type="checkbox" id="exit" name="exit">Exit</label>
                <label for="twist"><input type="checkbox" id="twist" name="twist">Twist</label>
                <label for="sag lat"><input type="checkbox" id="sag-lat" name="saglat">Sag lat</label>
                <label for="sag long"><input type="checkbox" id="sag-long" name="saglong">Sag long</label>
              </div>
              <div class="input_field">
                <input type="submit" value="Valider" class="btn">
              </div>
            </div>
          </div>
        </div>
      </div>
      <script src="script.js"></script>
  </body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*{
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

:root{
    /* ===== Colors ===== */
    --body-color: #E4E9F7;
    --sidebar-color: #FFF;
    --primary-color: #1c1a1a;
    --primary-color-light: #F6F5FF;
    --toggle-color: #DDD;
    --text-color: #707070;

    /* ===== Transition ===== */
    --tran-02: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.4s ease;
    --tran-05: all 0.5s ease;
}

body{
    height: 100vh;
    background: var(--body-color);
}

/*Paramètres de la page des templates*/
.home{
    position: relative;
    height: 100vh;
    left: 78px;
    width: calc(100% - 78px);
    background: var(--body-color);
    transition: var(--tran-05);
}

/*Paramètre texte de la page*/
.home .text{
    font-size: 30px;
    font-weight: 500;
    color: var(--text-color);
    padding: 8px 40px;
}

/*Activer le mouvement de la page*/
.sidebar.active ~ .home{
    left: 240px;
    width: calc(100% - 78px);
}

/*Paramètres de l'overlay lorsque la fenêtre modal est ouverte*/
.overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #333333d3;
}

/*--------------------- ACTIVATION TEMPLATE ---------------------*/
/*Paramètre d'affichage de la template 1*/
.template-1.active{
    display: none;
}

/*Paramétre d'affichage de la template 2*/
.template-2.active{
    display: none;
}

/*Paramétre d'affichage de la template 3*/
.template-3.active{
    display: none;
}

/*--------------------- TEMPLATE 1 ---------------------*/
.template-1{
    display: block;
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;
}

/* PANNEAU N°1*/

/*Paramètres de la fenêtre modal*/
.panel-1{
    position: absolute;
    width: 10%;
    height: 100%;
    padding: 5px;
}

/*Paramétre titre du panneau*/
.panel-1 .panel-header h1{
    font-size: 1.5vh;
    margin-left: 5px;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
}

/*Paramétre panel header*/
.panel-1 .panel-header{
    display: flex;
    height: 3%;
    border-radius: 5px 5px 0px 0px;
    align-items: center;
    justify-content: space-between;
    padding: 0.1% 0.1%;
    background-color: rgb(91, 91, 91);
    color: rgb(255, 255, 255);
    box-shadow: 0 0 7px rgba(18,18,18,0.5);
}

/*Paramètres panel body*/
.panel-1 .panel-body{
    height: 97%;
    background-color: #ffffff;
    box-shadow: 0 0 7px rgba(18,18,18,0.5);
}

/*----- Sections -----*/

.panel-body .sec-5{
    position: relative;
    width: 100%;
    height: 20%;
    cursor: pointer;
    border: 1px solid #000000;

}

.panel-body .sec-5:hover{
    background-color: #707070;
    color: #E4E9F7;
}

.panel-body h1{
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 4vh;
}

.panel-body h2{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3vh;

}

.panel-body h3{
    position: absolute;
    margin-left: 2%;
    font-size: 1.5vh;
}

.panel-body .sec-4{
    position: relative;
    width: 100%;
    height: 20%;
    cursor: pointer;
    border: 1px solid #000000;
}

.panel-body .sec-4:hover{
    background-color: #707070;
    color: #E4E9F7;
}

.panel-body .sec-3{
    position: relative;
    width: 100%;
    height: 20%;
    cursor: pointer;
    border: 1px solid #000000;
}

.panel-body .sec-3:hover{
    background-color: #707070;
    color: #E4E9F7;
}

.panel-body .sec-2{
    position: relative;
    width: 100%;
    height: 20%;
    cursor: pointer;
    border: 1px solid #000000;
}

.panel-body .sec-2:hover{
    background-color: #707070;
    color: #E4E9F7;
}

.panel-body .sec-1{
    position: relative;
    width: 100%;
    height: 20%;
    cursor: pointer;
    border: 1px solid #000000;
}

.panel-body .sec-1:hover{
    background-color: #707070;
    color: #E4E9F7;
}

/*--------------------- FENETRE MODAL DONNEES ---------------------*/

/*Paramètres de la fenêtre modal*/
.modal-container-data{
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #1c1a1a;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

/*Activer la fenêtre modale lors de l'appui sur le bouton template*/
.modal-container-data.active{
    display: flex;
}

/*Paramétre des panneaux */
.data{
    position: relative;
    top: 25%;
    background-color: rgb(170, 170, 170);
    margin: 100px auto;
    padding: 0;
    width: 300px;
    max-width: 85%;
}

/**/
.data .popup-header{
    padding: 2px 16px;
    background-color: #ffffff;
    color: #1c1a1a;
    display: flex;
}

/*Paramètres du texte de la modal*/
.data .popup-header h1{
    font-size: 12px;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
}

/*Paramètre du bouton de la fenêtre modal*/
.data .close-modal{
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 10px;
    padding: 1.5px 20px;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    background: #fff;
    color: rgb(0, 0, 0);
}

/*Activation du background lors du passage de la souris*/
.data .close-modal:hover{
    color: #FFF;
    background: rgb(188, 15, 15);
}

/*Paramètres du body de la popup*/
.data .popup-body{
    padding: 10px 16px;
    justify-content: center;
}

.container-box{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.container-box input{
    cursor: pointer;
}

.container-box label{
    white-space: nowrap;
}

.popup-body .input_field .btn{
    width: 100%;
    padding: 8px 10px;
    font-size: 15px;
    border: 0;
    background: #707070;
    color: #FFF;
    cursor: pointer;
    outline: none;
}

.popup-body .input_field .btn:hover{
    background: #11101d;
    color: #FFF;
}

JS:

// Activation de la fenêtre choix des données
const modalContainerData = document.querySelector(".modal-container-data");
const modalTriggersData = document.querySelectorAll(".modal-trigger-data");
modalTriggersData.forEach(trigger => trigger.addEventListener("click",(e) => {
    modalContainerData.classList.toggle("active");
    console.log(e.target.id);
    console.log(document.getElementById(e.target.id).textContent)
}))

//Activation des changements des données des sections
const entry= document.querySelector('#entry');
const cfwd= document.querySelector('#cfwd');
const camber= document.querySelector('#camber');
const draft= document.querySelector('#draft');
const caft= document.querySelector('#caft');
const exit= document.querySelector('#exit');
const twist= document.querySelector('#twist');
const saglat= document.querySelector('#sag-lat');
const saglong= document.querySelector('#sag-long');
console.log(entry.checked);

Aucune réponse