Переход от вкладки к другой с помощью кнопки отправки типа ввода

Question

Я хочу перейти от вкладки к другой вкладке через вход (введите submit), этот вход имеет некоторый код JS, но консоль показывает это

Uncaught TypeError: Cannot read property 'addEventListener' of null

HTML Код:

<div class="container">
<div class="row">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">Registrarse</h3>
        </div>
        <div class="panel-body">
            <ul class="nav nav-tabs" id="myTabs">
                <li role="presentation" class="active" id="pone">
                    <a data-toggle="tab" href="#datospersonales">Datos personales</a>
                </li>
                <li role="presentation" id="ptwo" class="disabled">
                    <a data-toggle="tab" href="#registrousuario">Registro de usuario</a>
                </li>
                <li role="presentation">
                    <a href="#"></a>
                </li>
            </ul>
            <div class="tab-content mt-25">
                <div role="tabpanel" id="datospersonales" class="tab-pane active fade in">
                    <form class="form-horizontal" id="form1" name="form1">
                        <label class="col-md-1 control-label">Nombres</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control s" placeholder="Nombres" id="name">
                        </div>

                        <label class="col-md-offset-1 col-md-1 control-label">Correo</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control s" placeholder="Correo" id="email">
                        </div>
                    </form>
                    <div class="col-md-offset-11 col-md-1 mt-25">
                        <input type="submit" class="btn btn-success" class="guardar" value="Siguiente" onclick="handleClick()">
                    </div>
                </div>

JavaScript Код:

var boton = document.querySelector(".guardar")
boton.addEventListener('click',handleClick);

function handleClick(){
    $('#myTabs a[href="#ptwo"]').tab('show');
}

Я не знаю, правильно ли я в этом случае не использую JQuery, я новичок в этом.

Answer 1

Я нашел несколько вещей в вашем коде, пожалуйста, рассмотрите это просто наблюдения.

В будущем, пожалуйста, укажите, что вы используете boostrap и jQuery (не все страницы используют эти рамки), это поможет понять проблему, с которой вы столкнулись, также укажите версию используемых вами библиотек!.

в кнопке «Отправить» вы повторяете атрибут «класс», поэтому второй будет игнорируется, когда вы пытаетесь получить по className; Другой важный момент, так как вы добавляете обработчик событий через JS, поэтому нет необходимости использовать "onclick".

<input type="submit" class="btn btn-success" class="guardar" value="Siguiente" onclick="handleClick()">

изменить на

<input type="submit" class="btn btn-success guardar" value="Siguiente">

HTML кнопка отправки будет обрабатывать отправку, это означает, что всегда будет отправлять информацию на странице другим (может быть таким же), но выполнение sumit означает, что другие запросы выполнены, поэтому необходимо быть отправленным кнопка? Предполагая, что отправка необходима, вам нужно будет предотвратить событие отправки информации (пока вы не захотите выполнить эту информацию), для предотвращения событий вы можете использовать «event.preventDefault ()», вам также нужно будет добавить лог c, чтобы прекратить предотвращать, когда вы считаете, что информация готова к отправке.

селектор для вкладки не обязательно должен указывать слишком много c, так как предполагается, что id af HTML элемент не должен быть одинаковым на всей странице.

var boton = document.querySelector(".guardar")
boton.addEventListener('click',handleClick);

function handleClick(e){
    e.preventDefault();
    $('#ptwo').tab('show');
}

это пример работы:

ваш пример работы