Append() Method Is Not Working For Putting Condition On Button For Html/js Application

I have created a questionnaire application using HTML/JS.But i am stuck in one place i am using next button to go to next section of questions but i wanted to put condition to chec

Solution 1:

In the html code you write this code, which should not be in this html by default:

<divclass="btn-nav-group"><ahref=""class="btn btn-primary btnNext">Next</a></div>

In the previous question, I deliberately removed <a href="" class="btn btn-primary btnNext">Next</a>, leaving only <a href="" class="btn btn-primary btnPrevious">Previous</a>. Like that:

<divclass="btn-nav-group"><ahref=""class="btn btn-primary btnPrevious">Previous</a></div>

Because the Next button will be added automatically, using the append() method:

$(this).closest(".section_main").find(".btn-nav-group").append('<a href=""class="btn btn-primary btnNext">Next</a>');

This button is Next added to the same div with class btn-nav-group. Like that:

<divclass="btn-nav-group"><ahref=""class="btn btn-primary btnPrevious">Previous</a><ahref=""class="btn btn-primary btnNext">Next</a></div>

functiondisplayRadioValue() {
    let section1 = document.querySelectorAll('.section-1 > input[type="radio"]');
    let section2 = document.querySelectorAll('.section-2 > input[type="radio"]');
    let sectionnew = document.querySelectorAll("#section1").values;
    let fullName = document.querySelector("#fullName").value;
    let email = document.querySelector("#email").value;
    let age = document.querySelector("#age").value;
    var ctx = document.querySelector("#resultsChart").getContext("2d");
    let section1Total = 0;
    let section2Total = 0;
    let section1Question = 0;
    let section2Question = 0;
    let finalResults = document.querySelector(".final-results");
    let result1 = "";
    let result2 = "";
    finalResults.innerHTML = "";

    //Section 1
    section1.forEach(function (radio, index) {
        if (radio.checked) {
            section2Question++;
            section1Total += +radio.value;
        }
    });
    console.log("radio value:", $("input[name='question1']:checked").val());
    // console.log( $("input[name=‘question1’]:checked").val());console.log("Ruchir");
    //Section 2
    section2.forEach(function (radio, index) {
        if (radio.checked) {
            section1Question++;
            section2Total += +radio.value;
        }
    });

    //Final Results and validationif (fullName.value != "" && email.value != "" && age.value != "") {
        if (section1Total > 0 && section2Total > 0) {
            finalResults.innerHTML += genDetails(fullName, email, age);
            finalResults.innerHTML += "<h2>Results</h2>";
            finalResults.innerHTML += genTable(section1Question, section1Total, 1);
            finalResults.innerHTML += genTable(section2Question, section2Total, 2);
            finalResults.innerHTML += $("input[name='question1']:checked").val();
            finalResults.innerHTML += "<h2>Chart Results</h2>";
            document.getElementById("control").style.display = "block";
            document.getElementById("resultsChart").style.display = "block";
            document.getElementById("toemail").href += document.querySelector(".final-results").innerText;
        } else {
            finalResults.innerHTML = "Snap! Please select the atleast one survey question from each section ";
        }
    } else {
        finalResults.innerHTML = "Snap! Please enter your name, emial, age in the first section ";
    }
}

functiongenDetails(name, email, age) {
    var result = "<h2>Personal Info</h2>";
    result += "<b>Full name:</b> <span>" + name + "</span><br>";
    result += "<b>Email name:</b> <span>" + email + "</span><br>";
    result += "<b>Age: </b> <span>" + age + "</span><br>";
    return result;
}

functiongenTable(ques, total, section) {
    var result = "<b>Section " + section + ":</b><br>";
    var tr = "<tr><th>" + total + "</th><th>" + ((total / (ques * 3)) * 100).toFixed(2) + "</th></tr>";
    result += "<table><thead><tr><th>Total Score</th><th>Percentage</th></tr></thead><tbody>" + tr + "</tbody></table>";
    return result;
}

$('input[type="radio"]').on("change", function () {
    let all_radio = $(this).closest(".section_main").find('input[type="radio"]');
    let checked_radio = $(this).closest(".section_main").find('input[type="radio"]:checked');

    if (checked_radio.length == all_radio.length / 3) {
        $(this).closest(".section_main").find(".btn-nav-group").append('<a href="" class="btn btn-primary btnNext">Next</a>');
    }
});
$(document).ready(function () {
    $(".btnNext").click(function (e) {
        e.preventDefault();
        $("ul.nav-tabs li.nav-item a.active").closest("li").next("li").find("a").trigger("click");
    });

    $(".btnPrevious").click(function (e) {
        e.preventDefault();
        $("ul.nav-tabs li.nav-item a.active").closest("li").next("li").find("a").trigger("click");
    });
});

canvas {
    display: none;
}

@media print {
    body * {
        visibility: hidden;
    }
    canvas {
        visibility: visible;
        margin-top: 30%;
    }
    .form-control {
        visibility: visible;
    }
    .final-results * {
        visibility: visible;
    }
    .spider-chart * {
        visibility: visible;
    }
    .final-results,
    .form-control {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }
}

table,
tabletrth,
tabletrtd {
    border: 1px solid black;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><sectionclass="container py-4"><divclass="row"><divclass="col-md-12"><h2>Survey</h2><ulid="tabs"class="nav nav-tabs"><liclass="nav-item"><ahref=""data-target="#personalInfo"data-toggle="tab"class="nav-link small text-uppercase active">Personal Info</a></li><liclass="nav-item"><ahref=""data-target="#section1"data-toggle="tab"class="nav-link small text-uppercase">Section 1</a></li><liclass="nav-item"><ahref=""data-target="#section2"data-toggle="tab"class="nav-link small text-uppercase">Section 2</a></li><liclass="nav-item"><ahref=""data-target="#results"data-toggle="tab"class="nav-link small text-uppercase">Results</a></li></ul><br /><divid="tabsContent"class="tab-content"><divid="personalInfo"class="tab-pane fade active show"><divclass="form-group"><labelfor="fullName">Full Name address</label><inputtype="email"class="form-control"id="fullName"aria-describedby="nameHelp"placeholder="Enter full name" /><smallid="nameHelp"class="form-text text-muted">Please enter your full name.</small></div><divclass="form-group"><labelfor="email">Email address</label><inputtype="email"class="form-control"id="email"aria-describedby="email"placeholder="Enter email" /><smallid="email"class="form-text text-muted">Please enter your valid email address.</small></div><divclass="form-group"><labelfor="age">Password</label><inputtype="number"class="form-control"id="age"aria-describedby="age"placeholder="Age" /><smallid="age"class="form-text text-muted">Please enter your age in number.</small></div><!--a class="btn btn-primary btnNext">Next</a--></div><divid="section1"class="section_main tab-pane fade"><divclass="section-1-questions"><fieldsetclass="form-group"><divclass="row"><legendclass="col-form-label col-sm-2 pt-0">Question 1:</legend><divclass="col-sm-10"><divclass="form-check section-1"><inputclass="form-check-input"type="radio"name="question1"id="gridRadios1"value="1" /><labelclass="form-check-label"for="gridRadios1">
                                            1
                                        </label></div><divclass="form-check section-1"><inputclass="form-check-input"type="radio"name="question1"id="gridRadios2"value="2" /><labelclass="form-check-label"for="gridRadios2">
                                            2
                                        </label></div><divclass="form-check section-1"><inputclass="form-check-input"type="radio"name="question1"id="gridRadios3"value="3" /><labelclass="form-check-label"for="gridRadios3">
                                            3
                                        </label></div></div></div></fieldset><fieldsetclass="form-group"><divclass="row"><legendclass="col-form-label col-sm-2 pt-0">Question 2:</legend><divclass="col-sm-10"><divclass="form-check section-1"><inputclass="form-check-input"type="radio"name="question2"id="gridRadios4"value="1" /><labelclass="form-check-label"for="gridRadios4">
                                            1
                                        </label></div><divclass="form-check section-1"><inputclass="form-check-input"type="radio"name="question2"id="gridRadios5"value="2" /><labelclass="form-check-label"for="gridRadios5">
                                            2
                                        </label></div><divclass="form-check section-1"><inputclass="form-check-input"type="radio"name="question2"id="gridRadios6"value="3" /><labelclass="form-check-label"for="gridRadios6">
                                            3
                                        </label></div></div></div></fieldset><fieldsetclass="form-group"><divclass="row"><legendclass="col-form-label col-sm-2 pt-0">Question 3:</legend><divclass="col-sm-10"><divclass="form-check section-1"><inputclass="form-check-input"type="radio"name="question3"id="gridRadios7"value="1" /><labelclass="form-check-label"for="gridRadios7">
                                            1
                                        </label></div><divclass="form-check section-1"><inputclass="form-check-input"type="radio"name="question3"id="gridRadios8"value="2" /><labelclass="form-check-label"for="gridRadios8">
                                            2
                                        </label></div><divclass="form-check section-1"><inputclass="form-check-input"type="radio"name="question3"id="gridRadios9"value="3" /><labelclass="form-check-label"for="gridRadios9">
                                            3
                                        </label></div></div></div></fieldset></div><divclass="btn-nav-group"><ahref=""class="btn btn-primary btnPrevious">Previous</a></div><!-- <a class="btn btn-primary btnNext" >Next</a>
                    <a class="btn btn-primary btnPrevious" >Previous</a> --></div><divid="section2"class="section_main tab-pane fade"><divclass="section-2-question"><fieldsetclass="form-group"><divclass="row"><legendclass="col-form-label col-sm-2 pt-0">Question 4:</legend><divclass="col-sm-10"><divclass="form-check section-2"><inputclass="form-check-input"type="radio"name="question4"id="gridRadios10"value="1" /><labelclass="form-check-label"for="gridRadios10">
                                            1
                                        </label></div><divclass="form-check section-2"><inputclass="form-check-input"type="radio"name="question4"id="gridRadios11"value="2" /><labelclass="form-check-label"for="gridRadios11">
                                            2
                                        </label></div><divclass="form-check section-2"><inputclass="form-check-input"type="radio"name="question4"id="gridRadios12"value="3" /><labelclass="form-check-label"for="gridRadios12">
                                            3
                                        </label></div></div></div></fieldset><fieldsetclass="form-group"><divclass="row"><legendclass="col-form-label col-sm-2 pt-0">Question 5:</legend><divclass="col-sm-10"><divclass="form-check section-2"><inputclass="form-check-input"type="radio"name="question5"id="gridRadios13"value="1" /><labelclass="form-check-label"for="gridRadios13">
                                            1
                                        </label></div><divclass="form-check section-2"><inputclass="form-check-input"type="radio"name="question5"id="gridRadios14"value="2" /><labelclass="form-check-label"for="gridRadios14">
                                            2
                                        </label></div><divclass="form-check section-2"><inputclass="form-check-input"type="radio"name="question5"id="gridRadios15"value="3" /><labelclass="form-check-label"for="gridRadios15">
                                            3
                                        </label></div></div></div></fieldset><fieldsetclass="form-group"><divclass="row"><legendclass="col-form-label col-sm-2 pt-0">Question 4:</legend><divclass="col-sm-10"><divclass="form-check section-2"><inputclass="form-check-input"type="radio"name="question6"id="gridRadios16"value="1" /><labelclass="form-check-label"for="gridRadios16">
                                            1
                                        </label></div><divclass="form-check section-2"><inputclass="form-check-input"type="radio"name="question6"id="gridRadios17"value="2" /><labelclass="form-check-label"for="gridRadios17">
                                            2
                                        </label></div><divclass="form-check section-2"><inputclass="form-check-input"type="radio"name="question6"id="gridRadios18"value="3" /><labelclass="form-check-label"for="gridRadios18">
                                            3
                                        </label></div></div></div></fieldset><fieldsetclass="form-group"><divclass="row"><legendclass="col-form-label col-sm-2 pt-0">Question 4:</legend><divclass="col-sm-10"><divclass="form-check section-2"><inputclass="form-check-input"type="radio"name="question7"id="gridRadios19"value="1" /><labelclass="form-check-label"for="gridRadios19">
                                            1
                                        </label></div><divclass="form-check section-2"><inputclass="form-check-input"type="radio"name="question7"id="gridRadios20"value="2" /><labelclass="form-check-label"for="gridRadios20">
                                            2
                                        </label></div><divclass="form-check section-2"><inputclass="form-check-input"type="radio"name="question7"id="gridRadios21"value="3" /><labelclass="form-check-label"for="gridRadios21">
                                            3
                                        </label></div></div></div></fieldset></div><divclass="btn-nav-group"><ahref=""class="btn btn-primary btnPrevious">Previous</a></div><!-- <a class="btn btn-primary btnNext" >Next</a>
                    <a class="btn btn-primary btnPrevious" >Previous</a> --></div><divid="results"class="tab-pane fade"><divclass="final-results"></div><br /><canvasid="resultsChart"></canvas><br /><buttontype="button"class="btn btn-success"onclick="displayRadioValue()">
                        Show Results
                    </button><br /><divclass="spider-chart"id="container2"style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto;"></div><br /><divid="control"style="display: none;"><aid="toemail"class="btn btn-link"href="mailto:youremail@domain.com?subject=Survey response&body=">Send to email</a>&nbsp;<buttononclick="window.print();"class="btn btn-warning">Send to PDF</button></div></div></div></div></div></section>