Modifier les paramètres d'un span en cliquant dessus

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:

---

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:

---

<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:

---

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 !

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

Code:

---

<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:

---

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:

---

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; } }

---

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