11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'aimerai savoir s'il est possible de remplacer ces 3 scripts en un seul ?

<!-- Script bouton 1 -->
<script>
                    (() => {
                        const button = document.querySelector('.TxtGBtn');
            
                        button.addEventListener("click", () => {
                            const elemText = document.getElementById("TxtG");
                            // supprimer l'attribut disabled si existe
                            const disabled = elemText.getAttribute("disabled");
                            elemText.removeAttribute("disabled");
                            // selectionne le contenu
                            elemText.focus();
                            elemText.select();
                            // copy
                            document.execCommand("copy");
                            // réactive l'attribut disabled si existe
                            disabled && elemText.setAttribute("disabled", disabled);
                            // remise focus sur Btn
                            button.focus();
                            try {
                                if (document.execCommand('copy')) {
                                    var alerte = "Champs Work Notes* "
                                    alert('La chaine des Balises a été copié ! \n\r Il suffit de la coller dans le ' + alerte + 'de l\'incident Principal de ServiceNow.');
            
                                }
                            } catch (err) {
                                alert('Pas possible de copier.');
                            }
            
                            window.getSelection().removeAllRanges();
                        });
            
                    })();
                </script>
<!-- Script bouton  2 -->
<script>
                    (() => {
                        const button = document.querySelector('.TxtGBtn2');
            
                        button.addEventListener("click", () => {
                            const elemText = document.getElementById("TxtG2");
                            // supprimer l'attribut disabled si existe
                            const disabled = elemText.getAttribute("disabled");
                            elemText.removeAttribute("disabled");
                            // selectionne le contenu
                            elemText.focus();
                            elemText.select();
                            // copy
                            document.execCommand("copy");
                            // réactive l'attribut disabled si existe
                            disabled && elemText.setAttribute("disabled", disabled);
                            // remise focus sur Btn
                            button.focus();
                            try {
                                if (document.execCommand('copy')) {
                                    var alerte = "Champs Work Notes* "
                                    alert('La chaine des Balises a été copié ! \n\r Il suffit de la coller dans le ' + alerte + 'de l\'incident Principal de ServiceNow.');
            
                                }
                            } catch (err) {
                                alert('Pas possible de copier.');
                            }
            
                            window.getSelection().removeAllRanges();
                        });
            
                    })();
                </script>
<!-- Script bouton3 -->
<script>
                    (() => {
                        const button = document.querySelector('.TxtGBtn3');
            
                        button.addEventListener("click", () => {
                            const elemText = document.getElementById("TxtG3");
                            // supprimer l'attribut disabled si existe
                            const disabled = elemText.getAttribute("disabled");
                            elemText.removeAttribute("disabled");
                            // selectionne le contenu
                            elemText.focus();
                            elemText.select();
                            // copy
                            document.execCommand("copy");
                            // réactive l'attribut disabled si existe
                            disabled && elemText.setAttribute("disabled", disabled);
                            // remise focus sur Btn
                            button.focus();
                            try {
                                if (document.execCommand('copy')) {
                                    var alerte = "Champs Work Notes* "
                                    alert('La chaine des Balises a été copié ! \n\r Il suffit de la coller dans le ' + alerte + 'de l\'incident Principal de ServiceNow.');
            
                                }
                            } catch (err) {
                                alert('Pas possible de copier.');
                            }
            
                            window.getSelection().removeAllRanges();
                        });
            
                    })();
                </script>


Est-ce que l'on peut déclarer une variable unique dans ce code pour avoir une seul

const elemText = document.getElementById("TxtG");
const button = document.querySelector('.TxtGBtn');


voici le code en entier.


 <div id="legend"><legend><b>Le RDV a été respecté, ou bien :</b></legend></div>
                <br/>
<div id="baliserdv">
    <form id="rdv">
    <label>Le RDV n'a pas eu lieu pour une raison non imputable à SSC [decu]panne réseau..)</label>
    <input type="radio" id="radio" name="rdv" value="[RDV_OUI][RDV_RESPECTE_OUI]" onchange="essai(this.value)"/>
</br></br>

    <label>L'utilisateur(trice) n'était pas présent(e) au RDV (sans avoir prévenu(e))</label>
    <input type="radio" id="radio" name="rdv" value="[RDV_OUI][RDV_RESPECTE_OUI]" onchange="essai(this.value)"/>
</br></br>

    <label>Le RDV a été annulé par l'utilisateur(trice)</label>
    <input type="radio" id="radio" name="rdv" value="[RDV_OUI][RDV_ANNULE_USER]" onchange="essai(this.value)"/>
</br></br>

    <label>SCC n'était pas présent au RDV (sans avoir prévenu)
    <input type="radio" id="radio" name="rdv" value="[RDV_OUI][RDV_NON RESPECTE SCC]" onchange="essai(this.value)"/>
</br></br>

    <label>Le RDV a été annulé par SCC</label>
    <input type="radio" id="radio" name="rdv" value="[RDV_OUI][RDV_NON RESPECTE SCC]" onchange="essai(this.value)"/>
</form>
</div>

<br/> <br/>
<form id="rdv1" style="display:none">
<textarea id="TxtG" cols="30" rows="1"disabled="disabled">[RDV_OUI][RDV_RESPECTE_OUI]</textarea>
<input type="button" class="TxtGBtn" value="Copier la balise rdv" onclick="this.disabled = 'disabled';this.type='checkbox';this.checked='checked'">
<br /> <br /><br /> 
 <form>
<button type="submit"><a href="logout.php">Créer un nouveau ticket.</a></button>
</form>
</form>
<form id="rdv2" style="display:none">
<textarea id="TxtG2" cols="30" rows="1"disabled="disabled">[RDV_OUI][RDV_ANNULE_USER]</textarea>
<input type="button" class="TxtGBtn2" value="Copier la balise rdv" onclick="this.disabled = 'disabled';this.type='checkbox';this.checked='checked'">
<br /> <br /><br /> 
 <form>
<button type="submit"><a href="logout.php">Créer un nouveau ticket.</a></button>
</form>
</form>
<form id="rdv3" style="display:none">
<textarea id="TxtG3" cols="30" rows="1"disabled="disabled">[RDV_OUI][RDV_NON RESPECTE SCC]</textarea>
<input type="button" class="TxtGBtn3" value="Copier la balise rdv" onclick="this.disabled = 'disabled';this.type='checkbox';this.checked='checked'">
<br /> <br /><br /> 
 <form>
<button type="submit"><a href="logout.php">Créer un nouveau ticket.</a></button>
</form>

</form>
<br/> <br/>
</div><!*-------END DIV texte---->
</div>
<?php include 'footer.php'; ?>

<!-- Script bouton 1 -->
<script>
                    (() => {
                        const button = document.querySelector('.TxtGBtn');
            
                        button.addEventListener("click", () => {
                            const elemText = document.getElementById("TxtG");
                            // supprimer l'attribut disabled si existe
                            const disabled = elemText.getAttribute("disabled");
                            elemText.removeAttribute("disabled");
                            // selectionne le contenu
                            elemText.focus();
                            elemText.select();
                            // copy
                            document.execCommand("copy");
                            // réactive l'attribut disabled si existe
                            disabled && elemText.setAttribute("disabled", disabled);
                            // remise focus sur Btn
                            button.focus();
                            try {
                                if (document.execCommand('copy')) {
                                    var alerte = "Champs Work Notes* "
                                    alert('La chaine des Balises a été copié ! \n\r Il suffit de la coller dans le ' + alerte + 'de l\'incident Principal de ServiceNow.');
            
                                }
                            } catch (err) {
                                alert('Pas possible de copier.');
                            }
            
                            window.getSelection().removeAllRanges();
                        });
            
                    })();
                </script>
<!-- Script bouton  2 -->
<script>
                    (() => {
                        const button = document.querySelector('.TxtGBtn2');
            
                        button.addEventListener("click", () => {
                            const elemText = document.getElementById("TxtG2");
                            // supprimer l'attribut disabled si existe
                            const disabled = elemText.getAttribute("disabled");
                            elemText.removeAttribute("disabled");
                            // selectionne le contenu
                            elemText.focus();
                            elemText.select();
                            // copy
                            document.execCommand("copy");
                            // réactive l'attribut disabled si existe
                            disabled && elemText.setAttribute("disabled", disabled);
                            // remise focus sur Btn
                            button.focus();
                            try {
                                if (document.execCommand('copy')) {
                                    var alerte = "Champs Work Notes* "
                                    alert('La chaine des Balises a été copié ! \n\r Il suffit de la coller dans le ' + alerte + 'de l\'incident Principal de ServiceNow.');
            
                                }
                            } catch (err) {
                                alert('Pas possible de copier.');
                            }
            
                            window.getSelection().removeAllRanges();
                        });
            
                    })();
                </script>
<!-- Script bouton3 -->
<script>
                    (() => {
                        const button = document.querySelector('.TxtGBtn3');
            
                        button.addEventListener("click", () => {
                            const elemText = document.getElementById("TxtG3");
                            // supprimer l'attribut disabled si existe
                            const disabled = elemText.getAttribute("disabled");
                            elemText.removeAttribute("disabled");
                            // selectionne le contenu
                            elemText.focus();
                            elemText.select();
                            // copy
                            document.execCommand("copy");
                            // réactive l'attribut disabled si existe
                            disabled && elemText.setAttribute("disabled", disabled);
                            // remise focus sur Btn
                            button.focus();
                            try {
                                if (document.execCommand('copy')) {
                                    var alerte = "Champs Work Notes* "
                                    alert('La chaine des Balises a été copié ! \n\r Il suffit de la coller dans le ' + alerte + 'de l\'incident Principal de ServiceNow.');
            
                                }
                            } catch (err) {
                                alert('Pas possible de copier.');
                            }
            
                            window.getSelection().removeAllRanges();
                        });
            
                    })();
                </script>

<!-- Script JS Affichage  -->

<script type="text/javascript">
function essai(radio) {
    if (radio=="[RDV_OUI][RDV_RESPECTE_OUI]") {
        document.querySelector('#legend').style.display = 'none';
        document.querySelector('#baliserdv').style.display = 'none';
        document.getElementById('rdv1').style.display='block';
        document.getElementById('rdv2').style.display='none';
        document.getElementById('rdv3').style.display='none';
    }
    if (radio=="[RDV_OUI][RDV_ANNULE_USER]") {
        document.querySelector('#legend').style.display = 'none';
        document.querySelector('#baliserdv').style.display = 'none';
        document.getElementById('rdv1').style.display='none';
        document.getElementById('rdv2').style.display='block';
        document.getElementById('rdv3').style.display='none';
                }
    if (radio=="[RDV_OUI][RDV_NON RESPECTE SCC]") {
        document.querySelector('#legend').style.display = 'none';
        document.querySelector('#baliserdv').style.display = 'none';
        document.getElementById('rdv1').style.display='none';
        document.getElementById('rdv2').style.display='none';
        document.getElementById('rdv3').style.display='block';
                }

}
</script>


Merci.
La réponse pour savoir si peut mettre un seul script au lieu de trois est OUI
écrire

<script>contenu1</script>
<script>contenu2</script>
<script>contenu3</script>

est la même chose que

<script>
    contenu1
    contenu2
    contenu3
</script>


Pour le reste, à première vue ce code est très compliqué pour une fonction apparemment simple, mais il me faudrait plus de temps pour proposer des simplifications.