Comment changer l'ID d'un bouton HTML en JavaScript ?

Réponses rédigées par Antoine

Dernière mise à jour : 2022-09-01 07:43:56

Question

Bonjour, J'aimerai que l'ID de la textarea et du bouton change à chaque affichage de textarea. Pour cela j'ai fais ce code.

if(isset ($_SESSION['TabInter'])){

for($ligne=0;$ligne<sizeof($_SESSION['TabInter']);$ligne++)
{
$txt_0=0;
$btn_0=0;
$js0=0;
$_SESSION['ValueInter']= $_SESSION['Start'].$_SESSION['TabInter'][$ligne].$_SESSION['Balises3'].$_SESSION['Balises4'].'['.$str.']'.$date.$version.$code;

?>
<table align="center">
    <tr align="center">
        <td>
        <form id="form-copier" >
        <!-- //champ de saisie de texte -->
        <textarea id="<?php $txt_0.$ligne; ?>" cols="80" rows="3"disabled="disabled"><?php print_r($_SESSION['ValueInter']) ?></textarea>
        <!-- //Bouton copier -->
        <input type="button" class="<?php $js0.$ligne; ?>" id="<?php $btn_0.$ligne; ?>" value="Copier la chaîne" onclick="this.disabled = 'disabled';this.type='checkbox';this.checked='checked'">
    </form>
        </td>
    </tr>
</table>
<?PHP
print_r($txt_0);
?>
<script>
var toCopy  = document.getElementById( '$txtInter' ),
var btnCopy = document.getElementById( 'btnInter' ),
            (() => {
            const button = document.querySelector('btnCopy');
 
            button.addEventListener("click", () => {
  const elemText = document.thisgetElementById('toCopy');
  // 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 ServiceNow.');
                        //document.location.replace('pagefin.php');
                    }
                } catch (err) {
                    alert('Pas possible de copier.');
                }
 
                window.getSelection().removeAllRanges();
            });
       
        })();
</script>

<?PHP
}
}

?>

Mais l'id du bouton et de la textarea reste à 0.

Merci pour votre aide.

Réponse

Bonjour vous pouvez créer une fonction JavaScript pour modifier l'ID d'un élément du DOM.

<textarea id="textarea_0"></textarea>
<input type="button" id="button_0" value="bouton" onclick="copy()">

<script>
document.addEventListener("DOMContentLoaded", function(changeID) {
  // On récupère les ID
  var textarea = document.getElementById("textarea_0");
  var bouton = document.getElementById("button_0");
  // On change les ID
  textarea.id = "textarea_1";
  bouton.id = "button_1";
  // On stocke les nouveaux ID dans le localStorage
  localStorage.setItem('stockage_id_textarea', textarea.id);
  localStorage.setItem('stockage_id_button', bouton.id);
});

// On copie le contenu du textarea quand le bouton est cliqué
function copy() {
  // On récupère l'ID du textarea préalablement stocké
  var textarea = document.getElementById(localStorage.getItem('stockage_id_textarea'));
  // On récupère son contenu et on copie
  textarea.select();
  document.execCommand("copy");
  // Ajoutez ensuite vos autres actions (supression disabled, encoche, etc...)
}
</script>

Dans cet exemple la fonction changeID s'exécute une fois que la page est chargée ; on récupère les deux ID de départ, et on les remplace par les nouveaux.

Si les valeurs des nouveaux ID sont générés coté serveur en PHP, vous remplacez par exemple :

textarea.id = "textarea_1";

par

textarea.id = "<?php echo $valeur;?>";

Les nouveaux ID sont ensuite stockés dans le localStorage (https://developer.mozilla.org/fr/docs/Web/API/Window/localStorage).

Enfin vous ajoutez la fonction copy où vous récupérez l'ID du textarea préalablement modifié et stocké, puis vous effectuez la copie, et vos autres actions.