anchor do nothing after second index-CodePudding

I have a django-qcm with sections that change when clicking on anchors and using the scroll snap type property.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        html{
            scroll-behavior: smooth;
          }
        body{
            background-color: #72a9d6;
            color: white;
            font-family: "Mont", sans-serif;
            overflow: hidden;
        }
        section{
            overflow: hidden;
            height: 100vh;
            /*overflow-y: scroll;*/
            scroll-snap-type: y mandatory;
            scroll-behavior: smooth; 
        }
        .container{ 
            padding: 5%;
            display: grid;
            position: relative;
            justify-items: center;
            gap: 3px;
            scroll-snap-align: center;
            height: 100%;  
        }
        .question_title{
            height: 50px;
            font-size: 25px;
            font-weight: 500;
            text-align: center;
            
        }
        .space_title{
            height: 150px;
        }
        .container_reps{
            max-width: 30%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            column-count:2;
            height: 20%;   
        }
        .rep{
            display: flex;
            align-items: center;
            border:1px solid white;
            padding: 0 5px ;
            max-width: 15%;
            min-width: 250px;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 5px;
            margin-bottom: 10px;
            margin-left: 10px;
            max-height: 40px;
        }
        .rep:hover{
            background-color: rgba(255, 255, 255, 0.3);
        }
        .dot_rep{
            background-color: #63c7f5;
            border: 1px solid white;
            color: white;
            margin-right: 7px;
            padding: 5px 10px;
            border-radius: 5px;
        }
        .text_rep{
            font-weight: 700;
        }
        .check{
           margin-left: 40%;
        }
        </style>
        
        
        <section>
               
            <div id="1" >
                <div >
                    <div ></div>
                    <p>Question 1</p>
                </div>
                <div >
                    <div >
                        <span >1</span><p >rep 1</p>
                    </div>
                    <div >
                        <span >1</span><p > rep 2</p>
                    </div>
                    <div >
                        <span >1</span><p >rep3</p>
                    </div>               
                </div>
            </div>
        
            <div id="2" >
                <div >
                    <div ></div>
                    <p>Question 2</p>
                </div>
                <div >
                    <div >
                        <span >1</span><p >rep 1</p>
                    </div>
                    <div >
                        <span >1</span><p > rep 2</p>
                    </div>
                    <div >
                        <span >1</span><p >rep3</p>
                    </div>              
                </div>
            </div>
        
            <div id="3" >
                <div >
                    <div ></div>
                    <p>Question 3</p>
                </div>
                <div >
                    <div >
                        <span >1</span><p >rep 1</p>
                    </div>
                    <div >
                        <span >1</span><p > rep 2</p>
                    </div>
                    <div >
                        <span >1</span><p >rep3</p>
                    </div>               
                </div>
            </div>
            <div id="4" >
                <div >
                    <div ></div>
                    <p>Question 4</p>
                </div>
                <div >
                    
                    <div >
                        <span >1</span><p >rep 1</p>
                    </div>
                    <div >
                        <span >1</span><p > rep 2</p>
                    </div>
                    <div >
                        <span >1</span><p >rep3</p>
                    </div>               
                </div>
            </div>
        
        </section>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script>
             function scrollToAnchor(ind){
        
        const aTag = $("#" ind);
        $('body,section').animate({scrollTop: aTag.offset().top},'slow');
    }

    //scrollToAnchor('2');

    var container_page = document.getElementsByClassName('container')
    

    const reps = document.getElementsByClassName('rep');
    [].forEach.call(reps,function(rep){
        $(rep).click(function(){
            if(! rep.querySelector('.check')){
                [].forEach.call(reps,function(repToDel){
                    if(repToDel.querySelector('.check')){
                        repToDel.querySelector('.check').remove()
                        $(repToDel).css("border", "1px solid white")
                    }
                })
                $(rep).last().append('<div ><object data="{% static "img/Coin-Magpharm-V3.png" %}" width="20" > </object></div>');
                $(rep).css("border", "2.5px solid white");

               
                    let x = parseInt($(rep).closest('.container').attr('id'))
                    //var y = x.toString()
                    console.log(x)
                    scrollToAnchor(x 1) 
               
                
                

                 
            }
            
        })
    })

        </script>
</body>
</html>

The first anchor works fine, but after the second nothing happens. The function scrollToAnchor(3) works fine when called in the console. I tried to change different dom parameters to reach the container id and the int and str but nothing changes except errors.

CodePudding user response：

The problem seems to be that you're getting the .container id, instead you might use the number of the clicked .rep.

Try something like this:

let x = parseInt($(rep).index())   1

CodePudding user response：

i dont know why, but i changed my code like that it's work,

var container_page = document.getElementsByClassName('container')
 
    const reps = document.getElementsByClassName('rep');
    [].forEach.call(reps,function(rep){
        $(rep).click(function(){
            if(! rep.querySelector('.check')){
                [].forEach.call(reps,function(repToDel){
                    if(repToDel.querySelector('.check')){
                        repToDel.querySelector('.check').remove()
                        $(repToDel).css("border", "1px solid white")
                    }
                })
                $(rep).last().append('<div ><object data="{% static "img/Coin-Magpharm-V3.png" %}" width="20" > </object></div>');
                $(rep).css("border", "2.5px solid white");

                var x = parseInt($(rep).closest('.container').attr('id'));
                document.getElementById((  x).toString()).scrollIntoView({
                    behavior: 'smooth' 
                        });