54321焦虑着陆法代码异常：切换事件绑定后仅第一步文本更新

Looks like you ran into a mix of logic bugs and scope hiccups when switching to Meteor's event binding! Let's break down what's going wrong and fix your code step by step.

First, Diagnose the Core Issues #

Your current code has four key problems causing the text to stop updating after the first step:

• Duplicate counter conditions: You have two checks for compteur ==9—this means the "Identify 2 things you see" text will never trigger, breaking the flow.
• Unupdated numberOfButtons: This variable never decreases after hiding a button, so you'll keep hiding the same button every time instead of the next one in sequence.
• Unreset answered state: Once all 5 buttons are marked as true, allTrue will always return true for every subsequent click, throwing off your step logic.
• Incorrect counter values: Your step thresholds don't match the total clicks for each phase (the correct sequence is 5→9→12→14→15, not the values you used).

Fixed Code with Explanations #

Step 1: Initialize Instance-Scoped Variables

First, add an onCreated hook to store state in Meteor reactive variables—this avoids global scope conflicts and ensures proper reactivity per template instance:

Template.theMethod.onCreated(function() {
  // Track total clicks across all phases
  this.compteur = new ReactiveVar(0);
  // Track current number of visible buttons
  this.numberOfButtons = new ReactiveVar(5);
  // Track which buttons have been clicked in the current phase
  this.answered = new ReactiveVar({
    button1: false,
    button2: false,
    button3: false,
    button4: false,
    button5: false
  });
});

Step 2: Updated Event Handler

Replace your existing event binding with this corrected version:

Template.theMethod.events({
  'click .thebtn'(event, instance) {
    const btnId = event.currentTarget.id;
    // Pull current state from reactive variables
    let compteur = instance.compteur.get();
    let answered = instance.answered.get();
    let numberOfButtons = instance.numberOfButtons.get();

    // Mark button as clicked and increment total click counter
    compteur++;
    answered[btnId] = true;

    // Save updated state back to reactive variables
    instance.compteur.set(compteur);
    instance.answered.set(answered);

    // Only check click status for currently visible buttons
    const visibleBtnIds = Array.from(document.querySelectorAll('.thebtn')).map(btn => btn.id);
    const allTrue = visibleBtnIds.every(id => answered[id]);

    if (allTrue) {
      // Hide the last button in the current phase
      document.getElementById(`button${numberOfButtons}`).style.display = 'none';
      // Decrease button count for the next phase
      numberOfButtons--;
      instance.numberOfButtons.set(numberOfButtons);

      // Reset click tracking for remaining visible buttons
      const newAnswered = {};
      for (let i = 1; i <= numberOfButtons; i++) {
        newAnswered[`button${i}`] = false;
      }
      instance.answered.set(newAnswered);

      // Update step text based on total clicks
      switch(compteur) {
        case 5:
          document.getElementById('step1').textContent = 'Identify 4 things you see';
          break;
        case 9: // 5 initial clicks + 4 next clicks
          document.getElementById('step1').textContent = 'Identify 3 things you see';
          break;
        case 12: // 5+4+3
          document.getElementById('step1').textContent = 'Identify 2 things you see';
          break;
        case 14: // 5+4+3+2
          document.getElementById('step1').textContent = 'Identify 1 thing you see';
          break;
        case 15: // Full completion
          document.getElementById('step1').textContent = 'You’ve completed the 54321 grounding technique!';
          break;
      }
    }
  }
});

Key Fixes Breakdown #

• Reactive Variables: Storing state in ReactiveVar ensures each template instance has its own isolated state, no cross-instance conflicts.
• Visible Button Check: We now only check if currently visible buttons are clicked, so hidden buttons don't interfere with the allTrue validation.
• Reset answered State: After each phase, we reset tracking for remaining buttons so the next phase's click logic works correctly.
• Corrected Counter Thresholds: The switch statement uses accurate total click counts for each step.
• Updated numberOfButtons: We decrement this variable after hiding a button, so the next phase hides the correct button in sequence.
• textContent Instead of innerHTML: Safer practice that avoids potential XSS risks while working perfectly for plain text updates.

This should get your 54321 grounding technique working exactly as expected—each phase will hide a button and update the step text until full completion.

内容的提问来源于stack exchange，提问作者cped