Why does this JavaScript once implementation not work? [closed]

Question

attach: function(context, settings) {       
        console.log('enter');
        var element = once('addedtocart', '#addtocart', context);
        element.on('click', function () {
            var product_id = document.getElementById("addtocart").getAttribute("value");            

            var product = GetProductInfo(product_id);
            
            //console.log();
            //attachTitleAndButton(product);
        });
        
    }

below is my libraries.yml

demo-js:
  version: 1.x
  js:
    js/main.js: {}
  dependencies:
    - core/jquery
    - core/drupal
    - core/once

getting below error

Uncaught TypeError: element.on is not a function
    at Object.attach (js_O9oYlgvKhzeW6csP6ljhJ8fkoJHfailxVqOunj38cJ4.js?scope=footer&delta=0&language=en&theme=olivero&include=eJx9UUFywyAM_JAxb-hLMgJUmxQjRgK7_n3BNUnj6eQixK60syyWGLXjkiCMiWliFBlsAyla_O0Cgbuf6Dnq0FB5DJwgxNjBmPE7FwideiIq-Pglg-yScdEG5KJhs1_xGBoo1JZJJ9qQ0SmzKxPIPolPRDesHjfRRx0XciXgIDNxtiV30X5_LEZY_QTZU1SC1ZsD3v8jE_vlLyUIbGe1eYdXLAIzbYPDhXQr6pqYlxSghpOJggHW51k3Vqw5tao6VgS5L7Z-9NXkqedrkhyPV2GakV1VLE2usJK81-SmJ_JiIYMxlV0gwoT8_pe6E3CLj7fzdpzSnR-mXgceVGbEN9Q4U82uvSTmayAjioWEH215MH66JZ9Q9-YH_m0LfQ:71:165)
    at js_O9oYlgvKhzeW6csP6ljhJ8fkoJHfailxVqOunj38cJ4.js?scope=footer&delta=0&language=en&theme=olivero&include=eJx9UUFywyAM_JAxb-hLMgJUmxQjRgK7_n3BNUnj6eQixK60syyWGLXjkiCMiWliFBlsAyla_O0Cgbuf6Dnq0FB5DJwgxNjBmPE7FwideiIq-Pglg-yScdEG5KJhs1_xGBoo1JZJJ9qQ0SmzKxPIPolPRDesHjfRRx0XciXgIDNxtiV30X5_LEZY_QTZU1SC1ZsD3v8jE_vlLyUIbGe1eYdXLAIzbYPDhXQr6pqYlxSghpOJggHW51k3Vqw5tao6VgS5L7Z-9NXkqedrkhyPV2GakV1VLE2usJK81-SmJ_JiIYMxlV0gwoT8_pe6E3CLj7fzdpzSnR-mXgceVGbEN9Q4U82uvSTmayAjioWEH215MH66JZ9Q9-YH_m0LfQ:22:427
    at Array.forEach (<anonymous>)
    at Drupal.attachBehaviors (js_O9oYlgvKhzeW6csP6ljhJ8fkoJHfailxVqOunj38cJ4.js?scope=footer&delta=0&language=en&theme=olivero&include=eJx9UUFywyAM_JAxb-hLMgJUmxQjRgK7_n3BNUnj6eQixK60syyWGLXjkiCMiWliFBlsAyla_O0Cgbuf6Dnq0FB5DJwgxNjBmPE7FwideiIq-Pglg-yScdEG5KJhs1_xGBoo1JZJJ9qQ0SmzKxPIPolPRDesHjfRRx0XciXgIDNxtiV30X5_LEZY_QTZU1SC1ZsD3v8jE_vlLyUIbGe1eYdXLAIzbYPDhXQr6pqYlxSghpOJggHW51k3Vqw5tao6VgS5L7Z-9NXkqedrkhyPV2GakV1VLE2usJK81-SmJ_JiIYMxlV0gwoT8_pe6E3CLj7fzdpzSnR-mXgceVGbEN9Q4U82uvSTmayAjioWEH215MH66JZ9Q9-YH_m0LfQ:22:353)
    at HTMLUListElement.<anonymous> (js_O9oYlgvKhzeW6csP6ljhJ8fkoJHfailxVqOunj38cJ4.js?scope=footer&delta=0&language=en&theme=olivero&include=eJx9UUFywyAM_JAxb-hLMgJUmxQjRgK7_n3BNUnj6eQixK60syyWGLXjkiCMiWliFBlsAyla_O0Cgbuf6Dnq0FB5DJwgxNjBmPE7FwideiIq-Pglg-yScdEG5KJhs1_xGBoo1JZJJ9qQ0SmzKxPIPolPRDesHjfRRx0XciXgIDNxtiV30X5_LEZY_QTZU1SC1ZsD3v8jE_vlLyUIbGe1eYdXLAIzbYPDhXQr6pqYlxSghpOJggHW51k3Vqw5tao6VgS5L7Z-9NXkqedrkhyPV2GakV1VLE2usJK81-SmJ_JiIYMxlV0gwoT8_pe6E3CLj7fzdpzSnR-mXgceVGbEN9Q4U82uvSTmayAjioWEH215MH66JZ9Q9-YH_m0LfQ:60:14635)
    at Function.each (js_O9oYlgvKhzeW6csP6ljhJ8fkoJHfailxVqOunj38cJ4.js?scope=footer&delta=0&language=en&theme=olivero&include=eJx9UUFywyAM_JAxb-hLMgJUmxQjRgK7_n3BNUnj6eQixK60syyWGLXjkiCMiWliFBlsAyla_O0Cgbuf6Dnq0FB5DJwgxNjBmPE7FwideiIq-Pglg-yScdEG5KJhs1_xGBoo1JZJJ9qQ0SmzKxPIPolPRDesHjfRRx0XciXgIDNxtiV30X5_LEZY_QTZU1SC1ZsD3v8jE_vlLyUIbGe1eYdXLAIzbYPDhXQr6pqYlxSghpOJggHW51k3Vqw5tao6VgS5L7Z-9NXkqedrkhyPV2GakV1VLE2usJK81-SmJ_JiIYMxlV0gwoT8_pe6E3CLj7fzdpzSnR-mXgceVGbEN9Q4U82uvSTmayAjioWEH215MH66JZ9Q9-YH_m0LfQ:3:3129)
    at ce.fn.init.each (js_O9oYlgvKhzeW6csP6ljhJ8fkoJHfailxVqOunj38cJ4.js?scope=footer&delta=0&language=en&theme=olivero&include=eJx9UUFywyAM_JAxb-hLMgJUmxQjRgK7_n3BNUnj6eQixK60syyWGLXjkiCMiWliFBlsAyla_O0Cgbuf6Dnq0FB5DJwgxNjBmPE7FwideiIq-Pglg-yScdEG5KJhs1_xGBoo1JZJJ9qQ0SmzKxPIPolPRDesHjfRRx0XciXgIDNxtiV30X5_LEZY_QTZU1SC1ZsD3v8jE_vlLyUIbGe1eYdXLAIzbYPDhXQr6pqYlxSghpOJggHW51k3Vqw5tao6VgS5L7Z-9NXkqedrkhyPV2GakV1VLE2usJK81-SmJ_JiIYMxlV0gwoT8_pe6E3CLj7fzdpzSnR-mXgceVGbEN9Q4U82uvSTmayAjioWEH215MH66JZ9Q9-YH_m0LfQ:3:1594)
    at Drupal.AjaxCommands.insert (js_O9oYlgvKhzeW6csP6ljhJ8fkoJHfailxVqOunj38cJ4.js?scope=footer&delta=0&language=en&theme=olivero&include=eJx9UUFywyAM_JAxb-hLMgJUmxQjRgK7_n3BNUnj6eQixK60syyWGLXjkiCMiWliFBlsAyla_O0Cgbuf6Dnq0FB5DJwgxNjBmPE7FwideiIq-Pglg-yScdEG5KJhs1_xGBoo1JZJJ9qQ0SmzKxPIPolPRDesHjfRRx0XciXgIDNxtiV30X5_LEZY_QTZU1SC1ZsD3v8jE_vlLyUIbGe1eYdXLAIzbYPDhXQr6pqYlxSghpOJggHW51k3Vqw5tao6VgS5L7Z-9NXkqedrkhyPV2GakV1VLE2usJK81-SmJ_JiIYMxlV0gwoT8_pe6E3CLj7fzdpzSnR-mXgceVGbEN9Q4U82uvSTmayAjioWEH215MH66JZ9Q9-YH_m0LfQ:60:14565)
    at js_O9oYlgvKhzeW6csP6ljhJ8fkoJHfailxVqOunj38cJ4.js?scope=footer&delta=0&language=en&theme=olivero&include=eJx9UUFywyAM_JAxb-hLMgJUmxQjRgK7_n3BNUnj6eQixK60syyWGLXjkiCMiWliFBlsAyla_O0Cgbuf6Dnq0FB5DJwgxNjBmPE7FwideiIq-Pglg-yScdEG5KJhs1_xGBoo1JZJJ9qQ0SmzKxPIPolPRDesHjfRRx0XciXgIDNxtiV30X5_LEZY_QTZU1SC1ZsD3v8jE_vlLyUIbGe1eYdXLAIzbYPDhXQr6pqYlxSghpOJggHW51k3Vqw5tao6VgS5L7Z-9NXkqedrkhyPV2GakV1VLE2usJK81-SmJ_JiIYMxlV0gwoT8_pe6E3CLj7fzdpzSnR-mXgceVGbEN9Q4U82uvSTmayAjioWEH215MH66JZ9Q9-YH_m0LfQ:60:11020

Answer 1

jQuery Once was deprecated in Drupal 9 and removed from Drupal 10. The change record includes a conversion guide.

Answer 2

The new once() function from the new v10 core/once library always returns an array of elements (even if the selector matches only a single element). And vanilla JS arrays don't have a .on() function.

So either process the array in a loop

let manyElements = once('addedtocart', '#addtocart', context);
manyElements.forEach(ele => ele.doSomething())

or just shift the first element from the resulting array
(use the null-safe ?. operator to prevent errors if shifting from an empty array)

let singleElement = once('addedtocart', '#addtocart', context).shift();
singleElement?.doSomething()

If you need to run a jQuery-specific function, wrap the result of once() into a jQuery object.

let manyElements = once('addedtocart', '#addtocart', context);
$(manyElements).jQuerySomething();

Answer 3

Below code is working for me

if (once('addedtocart', '#addtocart', context).length) {
  $('#addtocart').on('click', function () {
    var product_id = document.getElementById("addtocart").getAttribute("value");            
    var product = GetProductInfo(product_id);
  });
}