Hello,
As part of a student project to develop a software via electron js, I am currently working on the graphical interface.
I’m currently having trouble retrieving the text from the h2 tag and changing it according to the choice made in the modal window. Indeed, each box inside the panel can open a modal window which is identical but its content changes according to the text of the h2 tag. So if the h2 tag says twist then the twist checkbox should be checked. The user can also change the text of the box by choosing another parameter in the checkbox menu. I have tried to get the id of the clicked element but I can’t get the text from the h2 tag exclusively.
So I would like to know how I could retrieve the text of the box and how to apply a change via a checkbox?
Here are the HTML, CSS and JS codes:
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;
}
Javascript:
// 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);
Regards,