Javascript increment and decrement not working on querySelector

Question

In my code I created a next and previous function which will increment and decrement a value onclick and use the value to select an html element in my code. The next works fine but the previous returns null .

HTML code containing data-parentid The idea is the value of currentOption below should equal the parentid's I already have in my markup.

<div class="col-lg-12 floatChildLeft" data-parentid="2">
            <div id="child-2">
            <div class="col-lg-3" data-option="a">
                <input type="radio" name="1" value="1-2" class="checkbox" onclick="next('child-2', 'scale-2', this.value)">
                <label class="answer">I always have emergencies, but have no savings, which is why I need to borrow money.</label>
            </div>
            <div class="col-lg-3" data-option="b">
                <input type="radio" name="1" value="3-5" class="checkbox" onclick="next('child-2', 'scale-2', this.value)">
                <label class="answer">I have emergencies but my savings is not usually enough to cover it, so I borrow sometimes.</label>
            </div>
            <div class="col-lg-3" data-option="c">
                <input type="radio" name="1" value="6-8" class="checkbox" onclick="next('child-2', 'scale-2', this.value)">
                <label class="answer">I have emergencies but have enough money to cover most of it.</label>
            </div>
            <div class="col-lg-3" data-option="d">
                <input type="radio" name="1" value="9-10" class="checkbox" onclick="next('child-2', 'scale-2', this.value)">
                <label class="answer">I have an emergency fund dedicated for this; emergencies are rarely a problem.</label>
            </div>
            </div>
            <div class="col-lg-12 hidden" id="scale-2"></div>
        </div>

My JS code

    var currentOption; //the variable tracking the increment and decrement
    window.addEventListener('click', function(e){ 
    var option = document.querySelector(`div[data-parentid="${e.path['0'].id}"]`);
    if(!option) return;

    $("#modal-body").html("<p id='response'>Option "+e.path['0'].id+"</p>")
    $("#modal-body").append(option);

    currentOption = e.path['0'].id; //assigning the variable to the selected id     
     $("#modal").trigger('click');
        //this function works just fine
    });

function proceed(next, prev){
    currentOption = Number(currentOption);
    if(next){
        currentOption++;
    }else{
        currentOption--;
    }
        var nextOption = document.querySelector(`div[data-parentid="${currentOption}"]`);
            if(!nextOption) return;
            $("#modal-body").html("<p>"+currentOption+"</p>");
            $("#modal-body").append(nextOption);
}

My HTML

<div class="col-lg-12">
    <div class="container-fluid">
              <div id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left">
                <div role="document" class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h4 id="exampleModalLabel" class="modal-title">Click below which option best describes you</h4>
                      <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>
                    </div>
                    <div class="modal-body" id="modal-body">
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-primary" onclick="proceed(false, true)">Prev</button>
                      <button type="button" class="btn btn-primary" onclick="proceed(true, false)">Next</button>
                    </div>
                  </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

Only thing that you need is just assign the variable currentOption to value 0 var currentOption=0; so that it will be an integer type now it will work.

 var currentOption = 0; //the variable tracking the increment and decrement window.addEventListener('click', function(e) { var option = document.querySelector(`div[data-parentid="${e.path['0'].id}"]`); if (!option) return; $("#modal-body").html("<p id='response'>Option " + e.path['0'].id + "</p>") $("#modal-body").append(option); currentOption = e.path['0'].id; //assigning the variable to the selected id $("#modal").trigger('click'); //this function works just fine }); function proceed(next, prev) { currentOption = currentOption; if (next) { currentOption++; } else { currentOption--; } alert(currentOption); //$(".modal-footer").attr('data-parentid',currentOption); var nextOption = document.querySelector(`div[data-parentid="${currentOption}"]`); // console.log(nextOption); if (!nextOption) return; $("#modal-body").html("<p>" + currentOption + "</p>"); $("#modal-body").append(nextOption); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-lg-12"> <div class="container-fluid"> <div id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left"> <div role="document" class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 id="exampleModalLabel" class="modal-title">Click below which option best describes you</h4> <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body" id="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" onclick="proceed(false, true)">Prev</button> <button type="button" class="btn btn-primary" onclick="proceed(true, false)">Next</button> </div> </div> </div> </div> </div> </div> <div class="col-lg-12 floatChildLeft" data-parentid="2"> <div id="child-2"> <div class="col-lg-3" data-option="a"> <input type="radio" name="1" value="1-2" class="checkbox" onclick="next('child-2', 'scale-2', this.value)"> <label class="answer">I always have emergencies, but have no savings, which is why I need to borrow money.</label> </div> <div class="col-lg-3" data-option="b"> <input type="radio" name="1" value="3-5" class="checkbox" onclick="next('child-2', 'scale-2', this.value)"> <label class="answer">I have emergencies but my savings is not usually enough to cover it, so I borrow sometimes.</label> </div> <div class="col-lg-3" data-option="c"> <input type="radio" name="1" value="6-8" class="checkbox" onclick="next('child-2', 'scale-2', this.value)"> <label class="answer">I have emergencies but have enough money to cover most of it.</label> </div> <div class="col-lg-3" data-option="d"> <input type="radio" name="1" value="9-10" class="checkbox" onclick="next('child-2', 'scale-2', this.value)"> <label class="answer">I have an emergency fund dedicated for this; emergencies are rarely a problem.</label> </div> </div> <div class="col-lg-12 hidden" id="scale-2"></div> </div>