Discussion :

[Latulipe2]

Bonjour à tous,
Je suis en train de créer un site qui propose des exercices de maths (ici calcul de fractions).
Pour répondre au calcul, les élèves ont un pavé numérique interactif comme celui-ci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
        <tr id="ligne_num">
          <td class="touche" title="7" onclick="display('7','answer_7')">7</td>
          <td class="touche" title="8" onclick="display('8','answer_7')">8</td>
          <td class="touche" title="9" onclick="display('9','answer_7')">9</td>
          <td></td>
        </tr>

La zone de remplissage est composée de span comme ci-dessous :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

        <span class="fraction"><span type="reponse" class="answer_7_1"></span><span class="fraction-bar"></span><span type="reponse" class="answer_7_2"></span></span>

Et ma fonction display

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function display(value, a) {
  document.getElementsByClassName(a)[0].innerHTML += value;
}

Pour faciliter la réponse aux élèves, j'aimerais qu'ils puissent cliquer sur le span qu'ils veulent compléter puis cliquer sur mes touches pour ajouter les valeurs souhaitées.
En outre, j'aimerais que lorsqu'ils clique sur un span, la fonction display prenne comme valeur "a" la classe du span cliqué, sans toucher à la "value" qui correspondra au chiffre inscrit sur le bouton.
Est-ce possible ?

Merci à vous !

[Latulipe2]

J'ai trouvé la solution !
Voici le HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

 <span class="fraction"><span type="reponse" class="answer_7_1" onclick="selectSpan(this)" ></span><span class="fraction-bar"></span><span type="reponse" class="answer_7_2" onclick="selectSpan(this)"></span></span>

et les JS correspondants :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
var selectedSpan = null;
function selectSpan(span) {
  if (selectedSpan) {
    selectedSpan.classList.remove('selected');
  }
  selectedSpan = span;
  selectedSpan.classList.add('selected');
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function display(value, a) {
  if (selectedSpan) {
    var className = selectedSpan.className;
    document.getElementsByClassName(className)[0].innerHTML += value;
  } else if (a) {
    document.getElementsByClassName(a)[0].innerHTML += value;
  }
}

[SpaceFrog]

sinon l'élément cliqué se trouve dans e.target de l'event