我有一个自定义插件，它使用短代码生成要由用户操作的表。当他们改变A2中的份数时，B2-E2中的值将除以A2中的值。

第一次出现在页面上时，短代码和表格功能正常。如果我再次尝试使用短代码，它将生成表，但当单元格A2中的值更改时，不会发生任何变化，它不会像预期的那样分割值。

有什么想法吗？

Here is my .js code:

    \'use strict\';

    var updateNutritionValues = function updateNutritionValues(multipler, macros) {
      var carbs = document.querySelector(\'.nutrition-table__content--carbs\');
      var protein = document.querySelector(\'.nutrition-table__content--protein\');
      var fat = document.querySelector(\'.nutrition-table__content--fat\');
      var calories = document.querySelector(\'.nutrition-table__content--calories\');

      carbs.textContent = (macros.carbs / parseInt(multipler)).toFixed(1) + \'g\';
      protein.textContent = (macros.protein / parseInt(multipler)).toFixed(1) + \'g\';
      fat.textContent = (macros.fat / parseInt(multipler)).toFixed(1) + \'g\';
      calories.textContent = (macros.calories / parseInt(multipler)).toFixed(0) + \' cals\';
      console.log(\'carbs => \', (macros.carbs / parseInt(multipler)).toFixed(1) + \'g\');
      console.log(\'carbs => \', (macros.protein / parseInt(multipler)).toFixed(1) + \'g\');
      console.log(\'carbs => \', (macros.fat / parseInt(multipler)).toFixed(1) + \'g\');
      console.log(\'carbs => \', (macros.calories / parseInt(multipler)) + \' cals\');
    };

    var nutritionTable = function nutritionTable() {
      var number = document.querySelector(\'.nutrition-table__number\');
      var originalValues = {
        carbs: parseInt(document.querySelector(\'.nutrition-table__content--carbs\').textContent),
        protein: parseInt(document.querySelector(\'.nutrition-table__content--protein\').textContent),
        fat: parseInt(document.querySelector(\'.nutrition-table__content--fat\').textContent),
        calories: parseInt(document.querySelector(\'.nutrition-table__content--calories\').textContent)
      };

      number.addEventListener(\'change\', function (e) {
        updateNutritionValues(parseInt(e.target.value), originalValues);
      });
    };

    document.addEventListener(\'DOMContentLoaded\', function () {
      return nutritionTable();
    });

Here is my .php code

    function ls_nutritional_table_resources() {
        global $post;
        if( is_a( $post, \'WP_Post\' ) && has_shortcode( $post->post_content, \'nutrition_table\') ) {
            wp_register_style( \'ls-nutritional-table-css\',  plugin_dir_url( __FILE__ ) . \'nutritional-table.css\' );
            wp_enqueue_style( \'ls-nutritional-table-css\' );

            wp_enqueue_script(\'ls-nutritional-table-js\', plugin_dir_url( __FILE__ ) . \'nutritional-table.js\' );
        }
    }

    add_action( \'wp_enqueue_scripts\', \'ls_nutritional_table_resources\');


    add_shortcode(\'nutrition_table\', \'ls_nutritional_table\');

    function ls_shortcodes() {
        function ls_nutritional_table($atts) {
            $attributes = shortcode_atts(array(
                \'servings\' => \'1\',
                \'carbs\' => \'100\',
                \'protein\' => \'400\',
                \'fats\' => \'90\',
                \'calories\'=> \'2810\'
            ), $atts);

            $output = \'<div class="nutrition-table">
            <div class="nutrition-table__column">
            <div class="nutrition-table__head">Servings</div>
            <div class="nutrition-table__content">
                <input type="number" value="\' . esc_attr($attributes[\'servings\']) .  \'" min="1" autocomplete="off" class="nutrition-table__number">
            </div>
            </div>
            <div class="nutrition-table__column">
            <div class="nutrition-table__head">Carbs</div>
            <div class="nutrition-table__content nutrition-table__content--carbs">\' . esc_attr($attributes[\'carbs\']) .  \'g</div>
            </div>
            <div class="nutrition-table__column">
            <div class="nutrition-table__head">Protein</div>
            <div class="nutrition-table__content nutrition-table__content--protein">\' . esc_attr($attributes[\'protein\']) .  \'g</div>
            </div>
            <div class="nutrition-table__column">
            <div class="nutrition-table__head">Fat</div>
            <div class="nutrition-table__content nutrition-table__content--fat">\' . esc_attr($attributes[\'fats\']) .  \'g</div>
            </div>
            <div class="nutrition-table__column">
            <div class="nutrition-table__head">Calories</div>
            <div class="nutrition-table__content nutrition-table__content--calories">\' . esc_attr($attributes[\'calories\']) .  \' cals</div>
            </div>
        </div>\';

      return $output;
        }
    }

    add_action(\'init\', \'ls_shortcodes\');

    /** Always end your PHP files with this closing tag */
    ?>