HTMLH контент не очищается с помощью innerHTML, просто добавляется в конец предыдущего загруженного контента - PullRequest
Новая
       7

HTMLH контент не очищается с помощью innerHTML, просто добавляется в конец предыдущего загруженного контента

0 голосов
/ 27 апреля 2019

Для университетского проекта я показываю вакансии в Лидсе, используя в основном JavaScript и JSON.Идея заключается в том, что неполный рабочий день JSON-файл отображается при загрузке страницы, затем пользователь может выбрать другую категорию заданий, а затем он загружает новый JSON-файл и заменяет HTML.

Я считаю, что мой код почтитам я попытался выяснить, как снова вызвать функцию, так как в моем предыдущем коде было много повторений.Однако вместо замены innerHTML при выборе параметра он просто добавляет новое содержимое в конец HTML-кода предыдущего параметра.Я не могу понять, почему это?

Я пытался очистить идентификатор, прежде чем функция снова запустится, но это не работает.Возможно, я неправильно вызываю свои функции?

Любая помощь будет принята с благодарностью! 

window.onload = function() {
    var jobURL = "";

    //Run function
    loadJobs();

    //If dropdown is changed
    function change(){
        var jobType = document.getElementById("jobtype");
        var selectedValue = jobType.options[jobType.selectedIndex].value;

        if (selectedValue == "part") {
            var jobURL = "https://example.com/reed_parttime.php";
        }
        if (selectedValue == "temp") {
            var jobURL = "https://example.com/reed_temp.php";
        }
        if (selectedValue == "graduate") {
            var jobURL = "https://example.com/reed_graduate.php";
        }
        return jobURL;
    }
    document.getElementById("jobtype").onchange = change;

    //Show jobs function
    function loadJobs() {  
        document.getElementById("results").innerHTML = "";

        var URL = change();

        $.getJSON(URL, function(data) {            
            data.results.forEach(function(jobinfo) {
                HTMLTemplate += `
                    <div class="row">
                        <a href="${jobinfo.jobUrl}" target="_blank">
                            <p>${jobinfo.jobTitle}</p>
                            <p>${jobinfo.employerName}</p>
                            <p>${jobinfo.jobDescription}</p>
                        </a>
                    </div>
                `;
            });
            document.getElementById("results").innerHTML = HTMLTemplate;
        });
    }

    //Repeat function again when button is clicked
    document.getElementById("submitBtn").addEventListener("click", loadJobs);

}
...