✅ Clean, delegation‑free version

Each button gets its own click listener. The structure is simple

const container = document.querySelector(".container");

const choices = document.querySelector(".choices");

// 🪛Direct listeners on each key

const keys = container.querySelectorAll("button.key");

keys.forEach(key => {

key.addEventListener("click", () => {

const action = key.dataset.action;

// Delete: remove the last text node

if (action === "del") {

const last = choices.lastChild;

if (last && last.nodeType === Node.TEXT_NODE) {

choices.removeChild(last);

}

return;

}

// Regular key: append symbol as a new text node

const symbol = key.dataset.symbol || key.textContent.trim();

if (!symbol) return;

choices.appendChild(document.createTextNode(symbol));

});

--- remove text / not node

// Delete: remove last character
if (action === "del") {
const text = choices.textContent || "";
if (text.length > 0) {
choices.textContent = text.slice(0, -1);
}
return;
}

✅ Delegation + delete last text node

const container = document.querySelector(".container");
const choices = document.querySelector(".choices");

// Select all keys directly (no delegation)
const keys = container.querySelectorAll("button.key");

keys.forEach(key => {
  key.addEventListener("click", () => {
    // brief visual feedback
    key.classList.add("pressed");
    setTimeout(() => key.classList.remove("pressed"), 800);

    const action = key.dataset.action;

    // Delete: remove exactly one character from the end
    if (action === "del") {
      const text = choices.textContent || "";
      if (text.length > 0) {
        choices.textContent = text.slice(0, -1);
      }
      return;
    }

    // Regular key: use the data-symbol from HTML
    const symbol = key.dataset.symbol || key.textContent.trim();
    if (!symbol) return;

    choices.appendChild(document.createTextNode(symbol));
  });
});

const container = document.querySelector(".container");
const choices = document.querySelector(".choices");

container.addEventListener("click", (event) => {
  const key = event.target.closest("button.key");
  if (!key) return;

  const action = key.dataset.action;

  // DELETE: remove the last text node
  if (action === "del") {
    const last = choices.lastChild;
    if (last && last.nodeType === Node.TEXT_NODE) {
      choices.removeChild(last);
    }
    return;
  }

  // REGULAR KEY: append a new text node
  const symbol = key.dataset.symbol || key.textContent.trim();
  if (!symbol) return;

  choices.appendChild(document.createTextNode(symbol));
});

-------------- 🚨Action du delete -------------------
What happens when you press A, B, C
Your DOM looks like this:
Code
choices
 ├─ #text "A"
 ├─ #text "B"
 └─ #text "C"
What happens when you delete C
if you run:
choices.textContent = text.slice(0, -1);
choices.textContent removes all existing child nodes and replaces them with one new text node containing "AB".
So the DOM becomes:
Code
choices
 └─ #text "AB"
This is expected behavior — textContent always normalizes everything into a single text node.

✔️ If you want to keep separate text nodes
Then you must delete from the last text node, not rewrite the whole element.

If you press A, B, C
You create three separate text nodes:
Code
choices
 ├─ #text "A"
 ├─ #text "B"
 └─ #text "C"
When you delete
You remove the entire last text node, not just its last character.
So after deleting C (the textNode)
choices
 ├─ #text "A"
 └─ #text "B"
You now have two nodes, not one — and the content is "AB" because those two nodes happen to be adjacent.
This is correct behavior for your code.

help !

const pizzas = [

{ name: "queen", toppings: ["🐷", "🍄", "🍅", "🧀"] },

{ name: "me", toppings: ["🧀"] }

];

const headers = Object.keys(pizzas[0]);

const template = `

<ul>

${pizzas

.map(pizza => {

const line = headers

.map(header => `${header}: ${pizza[header]}`)

.join(" ");

return ` <li>${line}</li>`;

})

.join("\n")}

</ul>

console.log(template);

🪛en action

Offre pour une alternance

🌟 Offre d’alternance – Développeur Web (Typescript / Angular)

Vous êtes motivé pour rejoindre une entreprise innovante spécialisée dans le développement Web ?
Vous souhaitez évoluer dans un environnement technique moderne (Typescript, Angular) au sein d’une équipe qui a déjà accueilli deux étudiants en alternance de notre établissement avec succès ?

Cette opportunité est faite pour vous.

🚀 Ce que l’entreprise propose

Une alternance au sein d’une société dynamique et tournée vers l’innovation
Un accompagnement par des développeurs expérimentés
Des projets concrets en Typescript, Angular et technologies Web modernes
Un cadre idéal pour progresser rapidement et gagner en autonomie

🎯 Profil recherché

Étudiant(e) en L3 informatique ou développement Web
Curiosité, motivation et envie d’apprendre
Intérêt marqué pour les technologies front-end modernes

📩 Intéressé(e) ?

Remplissez rapidement le formulaire ci-dessous.

Je transmettrai directement votre candidature aux recruteur (ne me contactez pas)Chargement…

Préparation examen !

https://dupontdenis.github.io/L2Objectif2024/

🧀 https://docs.google.com/document/d/1YPHyaxZlldFH0XjQ3HUy75743qQS8qaNHP6tJp9TscQ/edit?usp=sharing

Examen

Donnez le corps de la fonction some(array, test) qui teste si au moins un élément du tableau en argument passe le test implémenté.

→ Soit la BD d'animaux, comprenant des 🐶 et des chats 🐱.

Animals = [{name: 'But',age: 3,type: 🐶},{name: 'Lizzy',age: 6,type:🐶}, … ];

La fonction getAges, calcule la somme des âges des chiens en équivalent humain (1 an pour un homme est équivalent à 7 ans pour un chien)

function getAges(array) {
let sum = 0;
for (var i = 0; i < array.length; i++){
if (array[i].type === 🐶){
let tempAge = array[i].age;
sum += (tempAge * 7); } }
return sum; }

Écrivez la fonction getAges sous la forme Animals.filter(?).map(?).reduce(?);

→ Soit la BD des étudiants L2 = [{name: "bob", age: 18, notes: [12,18,14]}, {name: "Abdel", age: 21, notes: [17, 04]}, ...]

Donnez les noms des étudiants par génération (même âge).

Donnez les deux étudiants qui ont eu les meilleures notes.

→ Affichez (DOM) la liste (ul) des noms, avec en rouge ceux qui ont au moins une note inférieure au plafond de 05/20.

→ Affichez (DOM) la liste (ul) des noms avec pour effet "hover" la moyenne de l'étudiant qui s'affiche. Le CSS fourni est : li:hover:before{content: attr(data-average)}

→ ⌨️Application

Donnez le code pour l'application clavier !

Plus d'infos »

dupontL2

Pages

sujet

✅ Clean, delegation‑free version

What happens when you press A, B, C

What happens when you delete C

✔️ If you want to keep separate text nodes

If you press A, B, C