Annulation d'une fonction javascript qui se déclenche à partir de onClick dans un lien

Question

Ma page contient un formulaire avec 20 attributs de sélection qui, pour le sens du formulaire, sont regroupés en 10 paires apparentées.

J'ai donné aux utilisateurs la possibilité de randomiser les options pour chacune des 10 paires par un javascript dépendant de jQuery.

La randomisation des sélections fonctionne bien. En cliquant sur l'un des liens "Randomiser", la paire en question sera randomisée, tandis que les autres paires de sélections resteront telles quelles.

Le problème se situe au niveau de la onClick alerte/contrôle sur le lien : comme les liens sont toujours "à l'écoute" du clic, même si l'utilisateur clique sur "Annuler", la randomisation des sélections a toujours lieu.

Ce que je recherche, c'est un moyen de placer une alerte sur le lien qui donnera à l'utilisateur la possibilité d'empêcher la fonction de randomisation de se déclencher si le choix est "Annuler" ou similaire.

Mes compétences en codage javascript ne sont pas très bonnes, mais je suppose que le code du lien en ligne ne peut pas être modifié pour cela, parce que les liens sont toujours "à l'écoute" de tout type de clic, et que la fonction javascript elle-même devrait être modifiée pour permettre le placement d'une alerte dans le lien qui peut annuler la randomisation ou l'autoriser à se dérouler.

jQuery(document).ready(function() {

  jQuery("#randomSelect1").click(function() {
    var select = document.getElementById('pair_1_phrase');
    var items = select.getElementsByTagName('option');
    var index = Math.floor(Math.random() * items.length);
    select.selectedIndex = index;

    var select = document.getElementById('pair_1_descriptor');
    var items = select.getElementsByTagName('option');
    var index = Math.floor(Math.random() * items.length);
    select.selectedIndex = index;
  });

  jQuery("#randomSelect2").click(function() {
    var select = document.getElementById('pair_2_phrase');
    var items = select.getElementsByTagName('option');
    var index = Math.floor(Math.random() * items.length);
    select.selectedIndex = index;

    var select = document.getElementById('pair_2_descriptor');
    var items = select.getElementsByTagName('option');
    var index = Math.floor(Math.random() * items.length);
    select.selectedIndex = index;
  });

  //8 more pairs like this..

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="pair_1_phrase" id="pair_1_phrase">
  <option value="0">State</option>
  <option value="1">Condition</option>
  <option value="2">Health</option>
  <option value="3">Strength</option>
</select>

<select name="pair_1_descriptor" id="pair_1_descriptor">
  <option value="0">moderate</option>
  <option value="1">great</option>
  <option value="2">good</option>
  <option value="3">superior</option>
</select>

<p><a onClick="return confirm('Randomise these selects?');" id="randomSelect1" href="#">Randomise</a></p>

<select name="pair_2_phrase" id="pair_2_phrase">
  <option value="0">Requirement</option>
  <option value="1">Need</option>
  <option value="2">Lack</option>
  <option value="3">Necessity</option>
</select>

<select name="pair_2_descriptor" id="pair_2_descriptor">
  <option value="0">urgent</option>
  <option value="1">pressing</option>
  <option value="2">extreme</option>
  <option value="3">crucial</option>
</select>

<p><a onClick="return confirm('Randomise these selects?');" id="randomSelect2" href="#">Randomise</a></p>

<!-- 8 more pairs like this.. -->

Answer 1

Si j'ai bien compris, vous devez déplacer le fichier confirm a click voir ci-dessous :

jQuery("#randomSelect1").click(function () {
    if(confirm('Randomise these selects?')) {
        var select = document.getElementById('pair_1_phrase');
        var items = select.getElementsByTagName('option');
        var index = Math.floor(Math.random() * items.length);
        select.selectedIndex = index;

        var select = document.getElementById('pair_1_descriptor');
        var items = select.getElementsByTagName('option');
        var index = Math.floor(Math.random() * items.length);
        select.selectedIndex = index;
    }
    // else ...
});

Et bien sûr, il faut supprimer la ligne confirm

<p><a id="randomSelect1" href="#">Randomise</a></p>

Ce qui suit n'est pas lié à votre question, mais vous pourriez vous faciliter la vie en refaisant votre code, quelque chose comme ceci :

var randomizeSelect = function($select) {
  var $items = $select.find('option'),
      index = Math.floor(Math.random() * $items.length);

    $select[0].selectedIndex = index;
}

var randomize = function(id) {
  if(confirm('Randomise these selects?')) {
    randomizeSelect($('#pair_' + id + '_phrase'));   
    randomizeSelect($('#pair_' + id + '_descriptor'));    
  }
}

jQuery("#randomSelect1").click(function() {
  randomize(1);
});

jQuery("#randomSelect2").click(function() {
  randomize(2);
});

Vous pouvez faire plus, par exemple ajouter un data-id puis lier le click une fois sur [data-id] comme je l'ai fait dans ce stylo

Answer 2

Voici une version plus simple

1. Enveloppez chaque ensemble dans un conteneur, ici un div
2. Naviguer relativement à ce conteneur
3. Annuler le clic sur le lien

Le script ici présent fonctionnera sur n'importe quel nombre d'ensembles de classes de phrases/desc définis dans la sélection.

$(function() {
  $(".rdn").on("click", function(e) {
    e.preventDefault(); // stop click
    const $parent = $(this).closest("div");
    const $phrase = $parent.find(".phrase");
    const $desc = $parent.find(".descriptor");
    const setText = "Randomise set #"+$phrase.attr("name").split("_")[1]+"?";

    if (!confirm(setText)) return;

    let len;
    let index;

    len = $('option',$phrase).length;
    index = Math.floor(Math.random() * len);
    $phrase[0].selectedIndex = index;

    len = $('option',$desc).length;
    index = Math.floor(Math.random() * len);
    $desc[0].selectedIndex = index;
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <select name="pair_1_phrase" class="phrase">
    <option value="0">State</option>
    <option value="1">Condition</option>
    <option value="2">Health</option>
    <option value="3">Strength</option>
  </select>

  <select name="pair_1_descriptor" class="descriptor">
    <option value="0">moderate</option>
    <option value="1">great</option>
    <option value="2">good</option>
    <option value="3">superior</option>
  </select>

  <p><a class="rdn" href="#">Randomise</a></p>
</div>

<div>
  <select name="pair_2_phrase" class="phrase">
    <option value="0">Requirement</option>
    <option value="1">Need</option>
    <option value="2">Lack</option>
    <option value="3">Necessity</option>
  </select>

  <select name="pair_2_descriptor" class="descriptor">
    <option value="0">urgent</option>
    <option value="1">pressing</option>
    <option value="2">extreme</option>
    <option value="3">crucial</option>
  </select>

  <p><a class="rdn" href="#">Randomise</a></p>
</div>

Answer 3

Généralement, la randomisation doit se produire à la suite d'une confirmation, vous devez donc avoir un auditeur et faire confirm à l'intérieur de celui-ci, ou de vérifier <a onClick="confirm... :

// a bit optimized way, instead of copy/pasting same code with a different id.
function selectRandomValue(elSelect) {
    var items = elSelect.getElementsByTagName('option');
    var index = Math.floor(Math.random() * items.length);
    elSelect.selectedIndex = index;
}

// also a bit optimized
function randomizeValuesInBlock(index) {
        var select = document.getElementById(`pair_${index}_phrase`);
        selectRandomValue(select);

        var select = document.getElementById(`pair_${index}_descriptor`);
        selectRandomValue(select);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="pair_1_phrase" id="pair_1_phrase">
  <option value="0">State</option>
  <option value="1">Condition</option>
  <option value="2">Health</option>
  <option value="3">Strength</option>
</select>

<select name="pair_1_descriptor" id="pair_1_descriptor">
  <option value="0">moderate</option>
  <option value="1">great</option>
  <option value="2">good</option>
  <option value="3">superior</option>
</select>

<p><a onClick="confirm('Randomise these selects?') ? randomizeValuesInBlock(1) : '';" id="randomSelect1" href="#">Randomise</a></p>

<select name="pair_2_phrase" id="pair_2_phrase">
  <option value="0">Requirement</option>
  <option value="1">Need</option>
  <option value="2">Lack</option>
  <option value="3">Necessity</option>
</select>

<select name="pair_2_descriptor" id="pair_2_descriptor">
  <option value="0">urgent</option>
  <option value="1">pressing</option>
  <option value="2">extreme</option>
  <option value="3">crucial</option>
</select>

<p><a onClick="confirm('Randomise these selects?') ? randomizeValuesInBlock(2) : '';" id="randomSelect2" href="#">Randomise</a></p>

Après la réponse :

8 autres paires comme celle-ci

Cela signifie généralement qu'il existe un domaine d'optimisation, par exemple vous pouvez placer des valeurs dans un tableau, puis utiliser javascript pour le parcourir et ajouter dynamiquement chaque select dans un DOM.