Изменения в содержимом div не отражаются в браузере

#javascript #html #jquery #ajax #google-chrome

#javascript #HTML #jquery #ajax #google-chrome

Вопрос:

Я пытаюсь изменить содержимое div «info» с помощью скрипта, как показано ниже

Но мы можем видеть, что содержимое div меняется на проверяемом экране и не отражается на экране браузера.

Пожалуйста, помогите мне исправить эту проблему.

 function GeneratePaySlips() {
    ShowLoaderOnElement(".btn-generate");
    if ($("#driverIDs").val().length > 0) {
        var i = 0;
        var driverIDs = $("#driverIDs").val().split(',');
        //for (var i = 0; i < driverIDs.length; i  )
        for (i = 0; i < 5; i  ) {
            document.getElementById("info").innerHTML = i   1   ' of '   $("#totalDrivers").val();
            $.ajax({
                type: "POST",
                data: { "driverID": driverIDs[i] },
                async: false,
                cache: false,
                url: '/BulkPaySlip/GeneratePaySlip',
                success: function (response) {
                    if (response.isSuccess) {
                    }
                    else {
                    }
                },
                error: function (response) {
                    HideLoaderOnElement(".btn-generate");
                },
                complete: function () {

                }
            });
        }
        if (i >= driverIDs.length) {
            HideLoaderOnElement(".btn-generate");
        }
    }
}

1. Можете ли вы связать нас с образцом, чтобы мы могли попытаться его отладить?

2. Если отладчик говорит, что текст есть, но он просто не отображается, то это может быть проблемой CSS, а не проблемой javascript. Попробуйте добавить background:red !important; font-size:16px !important;white-space:nowrap; , чтобы убедиться, что вы действительно смотрите в нужное место, и что это не просто скрыто overflow:hidden; или что-то глупое в этом роде.

3. Еще один простой способ определить, связан ли ваш javascript с проблемой, — это дважды щелкнуть по нему и вручную изменить текст на Lorem ipsum dolor sit . Если вы не видите всего этого, проверьте свой CSS.

Ответ №1:

Поэтому я не могу видеть весь код, но, возможно, поместите код в тег < script > прямо перед элементом html, а затем посмотрите, что произойдет.

1. <тип сценария=»текст /javascript»> функция GeneratePaySlips() { ShowLoaderOnElement(«.btn-generate»); if ($(«#driverIDs»).val().length > 0) { var i = 0; var driverIDs = $(«#driverIDs»).val().split(‘,’); for (i = 0; i < 5; i ) { document.getElementById(«info»).value=i 1 ‘ of’ $(«#totalDrivers»).val(); } если (i >= driverIDs.length) { HideLoaderOnElement(«.btn-generate»); } } } </script>

Ответ №2:

В первую очередь innnerHTML используется для изменения содержимого указанного элемента, который вы вызвали. В приведенных выше кодах содержимое будет отправлено в элемент div без создания каких-либо тегов elements, что не позволяет отображать желаемый контент. Приведенный ниже код может работать, если вам нужно создать другой элемент в теге DIV

 .innerHTML = '<p>'   $('#totalDrivers').value   '</p>

или вы можете попробовать создать новый элемент, который вы можете позже добавить в div пять раз в соответствии с вашим циклом for. Запустите приведенный ниже код

 for (var i = 0; i < 5; i  ) {
    var element = document.createElement('p')
    var text = $('#totalDrivers').value /* You can use strings to show the result fast // var text = 'i am coming' // */
    element.textContent = text
    document.getElementById('text').appendChild(element)
}

Коды не требуют пояснений, извините за упоминание об этом.

1. Спасибо. Не могли бы вы проверить мою функцию?

2. Просто измените следующее на один из приведенных выше примеров, которые я предложил, и tit будет работать. Измените следующее: document.getElementById(«info»).innerHTML = i 1 ‘ of’ $(«#totalDrivers»).val(); Работаю над моим