Почему не работают якорные переходы на JS, если внутри тега прописать еще один тег?

Question

[Alexander9229]

Есть вот такой скрипт с кнопками.
При клике на кнопку происходит якорный переход к определенной секции.
Но вот беда, внутри кнопки пришлось добавить еще тег (это теперь тег a. содержащий внутри себя тег span)

Если происходит клик по тегу a, тогда происходит переход к нужной мне секции.
НО если клик попадает на тег span, тогда переход НЕ происходит.

Как можно решить эту проблему?

<a href="#form" class="button-fiolet offer-left__button-fiolet button-fiolet--primary animate__animated animate__fadeInUp animate__delay-1s">
                            <span>Записаться на бесплатное пробное занятие</span>
                        </a>

const  menuLinks = document.querySelectorAll( '.offer-left__button-fiolet, .choose__link, .free-lesson__link, .video__button-fiolet' );
    
        for ( let i = 0; i < menuLinks.length; i++ ) {
            menuLinks[i].addEventListener( 'click', function ( event ) {
                event.preventDefault();
        
                const blockId = event.target.getAttribute( 'href' ).substr(1);
                document.getElementById( blockId ).scrollIntoView( {
                    behavior: 'smooth',
                    block: 'start',
                } );
            } );
        }

Answer 1

[0xD34F]

Потому что целевым элементом будет уже не <a>. Соответственно, не будет и атрибута href. А у null не будет метода substr. О чём вы должны были узнать сами, из сообщения об ошибке - если бы открыли консоль.

Вместо target следует использовать currentTarget.

Или, можно сделать делегированный обработчик клика, в котором пытаться подняться от target к <a>, если таковой нашёлся, получать его href, начинается с решётки - выполнять плавную прокрутку к соответствующему элементу:

document.addEventListener('click', e => {
  const href = e.target.closest('a')?.getAttribute('href') ?? '';
  if (href[0] === '#') {
    e.preventDefault();
    document.querySelector(href)?.scrollIntoView({
      behavior: 'smooth',
    });
  }
});