JavaScript中获取onChange值并传递给按钮onClick函数的方法

Hey there! Let's work through how to pass that type value from your input's onChange handler to the "commit my goals" button's click function. Here are two straightforward, reliable approaches you can use:

Approach 1: Use a Shared Variable (Simple & Direct) #

Declare a variable outside both functions to hold the type value whenever an input changes. Then you can access that variable directly in the button's click handler.

// Create a variable to store the latest type value
let activeGoalType = '';

// Your updated onChange handler (I cleaned up the selector for robustness!)
$(document).on("change", ".goalsdata", function(e) {
  debugger;
  // Instead of chaining parent() calls, use closest() to find the row then grab the first cell's text
  const type = $(e.target).closest('tr').find('td:first').text();
  console.log("Checked Value:", type);
  // Update our shared variable with the new type
  activeGoalType = type;
});

// Click handler for the commit button
$('.commit-goals-btn').on('click', function() {
  // Now we can use the stored type value here
  if (activeGoalType) {
    console.log("Passing type to commit function:", activeGoalType);
    // Call your actual commit logic with the type as a parameter
    // commitMyGoals(activeGoalType);
  } else {
    console.log("No type value has been set yet—try editing an input first!");
  }
});

Approach 2: Store the Type in a Data Attribute (Cleaner, No Global Scope) #

Instead of a global variable, store the type value directly on the commit button using jQuery's data() method. This keeps your data encapsulated and avoids cluttering the global scope.

// Updated onChange handler
$(document).on("change", ".goalsdata", function(e) {
  debugger;
  const type = $(e.target).closest('tr').find('td:first').text();
  console.log("Checked Value:", type);
  // Save the type to the commit button's data attributes
  $('.commit-goals-btn').data('currentGoalType', type);
});

// Commit button click handler
$('.commit-goals-btn').on('click', function() {
  // Retrieve the stored type from the button itself
  const goalType = $(this).data('currentGoalType');
  if (goalType) {
    console.log("Passing type to commit function:", goalType);
    // Run your commit logic with the type parameter
    // commitMyGoals(goalType);
  } else {
    console.log("No type value has been set yet—edit an input first!");
  }
});

Quick Notes: #

• Make sure your commit button has a unique class (like commit-goals-btn) so the jQuery selector targets it correctly.
• If you have multiple input rows and need to track multiple type values instead of just the latest one, you'd want to use an array to store all values instead of a single variable.

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