SetAttribute также устанавливает значение для следующего элемента

Я уверен, что этот вопрос глупый, но не могу понять его сам.

Это Django-сайт, содержащий немного Javascript.

В моем HTML есть кнопка, которая должна отправить несколько значений в функцию Javascript. Затем функция javascript должна найти и обновить некоторые div в HTML.

Странно то, что значение, присвоенное оператору setAttribute, автоматически используется и для следующего оператора innerHTML (отменяя все, что там было настроено).

HTML-кнопка:

                <button class="btn btn-outline-dark" onclick="monthStats(
                {{simple_total_monthly_sent_volume}},
                {{average_monthly_delivery_rate}},
                {{average_monthly_unique_open_rate}},
                {{total_monthly_unique_open_volume}},
                {{average_monthly_unique_click_rate}},
                {{average_monthly_rejection_rate}},
                )">Month</button>

Javascript:

function monthStats (sentvolume,
                    deliveryrate,
                    uniqueopenrate,
                    uniqueopenvolume,
                    uniqueclickrate,
                    rejectionrate
                    ) {
    document.getElementById("sent").innerHTML = (sentvolume).toLocaleString("en-US");
    document.getElementById("delivered").innerHTML = deliveryrate+"%";
    document.getElementById("uniqueopened").innerHTML = uniqueopenrate+"%";
    document.getElementById("uniqueopened").setAttribute("title", uniqueopenvolume.toString());
    document.getElementById("uniqueclicked").innerHTML = uniqueclickrate+"%";
    document.getElementById("rejected").innerHTML = rejectionrate+"%";
}

HTML divs, которые должны быть обновлены:

<div class="container">
    <div class="row">
        <div class="col">
            <div id="sent" class="keymetric">{{simple_total_monthly_sent_volume|intcomma}}</div><div class="text-muted keymetricexplanation">sent volume</div>
        </div>
        <div class="col">
            <div id="delivered" class="keymetric">{{average_monthly_delivery_rate}}%</div><div class="text-muted keymetricexplanation">delivery rate</div>
        </div>
        <div class="col">
            <div id="uniqueopened" class="keymetric" data-bs-toggle="tooltip" data-bs-placement="top" title="{{total_monthly_unique_open_volume|intcomma}}">{{average_monthly_unique_open_rate}}%</div><div class="text-muted keymetricexplanation">unique open rate</div>
        </div>
        <div class="col">
            <div id="uniqueclicked" class="keymetric">{{average_monthly_unique_click_rate}}%</div><div class="text-muted keymetricexplanation">unique click rate</div>
        </div>
        <div class="col">
            <div id="rejected" class="keymetric">{{average_monthly_rejection_rate}}%</div><div class="text-muted keymetricexplanation">rejection rate</div>
        </div>
    </div>
</div>

При нажатии на кнопку Month в HTML заголовок и текстовое значение div с ID "uniqueopened" корректно обновляются Javascript. Однако оператор setAttribute в javascript, похоже, также обновляет значение следующего div с ID "uniqueclicked", отменяя оператор Javascript, нацеленный на этот div.

Вернуться на верх