JS/JQuery+IndexedDB进度条问题：计算值perc无法显示

尝试用JavaScript和JQuery通过「已读页数/总页数」计算实现阅读进度条，但计算得到的perc值无法在进度条上正常显示，推测函数逻辑存在问题。说明：代码采用IndexedDB存储数据，在calculate函数中尝试从数据库获取已读页数（pageR）和总页数（pageE）进行计算，代码中已标注需赋值perc值的元素。

相关代码 #

$(document).ready(function(){

    function calculate() {
    var perc = "";
    if (isNaN(pagesE.value) || isNaN(pagesR.value)) {
      perc = " ";
      updateProgressBar(myProgressBar, 0);
    } else {
      perc = ((pagesR.value / pagesE.value) * 100).toFixed(0);
      updateProgressBar(myProgressBar, perc)
    }
    document.getElementById('#progress__text').innerHTML = perc;
}



//Open Database
var request = indexedDB.open('bookmanager',1);

request.onupgradeneeded = function(e){
    var db = e.target.result;

    if(!db.objectStoreNames.contains('customers')){
        var os = db.createObjectStore('customers',{keyPath: "id", autoIncrement:true});
        //Create Index for Name
        os.createIndex('title','title',{unique:false});
    }
}

//Success
request.onsuccess = function(e){
    console.log('Database working Success');
    db = e.target.result;
    //Show Customers
    showCustomers();
}

//Error
request.onerror = function(e){
    console.log('Error: Opening Database!');
}
});


//Add Customer
function addCustomer(){
var title = $('#title').val();
var author = $('#authorInput').val();
var published = $('#publishedYear').val();
var pagesR = $('#pagesRead').val();
var pagesE = $('#allPages').val();
var startD = $('#startDate').val();
var endD = $('#endDate').val();
var img = $('#img').val();

var transaction = db.transaction(["customers"],"readwrite");
//Ask for ObjectStore
var store = transaction.objectStore("customers");

//Define Customer
var customer = {
    title: title,
    author: author,
    published: published,
    pagesR: pagesR,
    pagesE: pagesE,
    startD: startD,
    endD: endD,
    img: img
}

//Perform the Add
var request = store.add(customer);

//Success
request.onsuccess = function(e){
    window.location.href="/index.html";
}

//Error
request.onerror = function(e){
    alert("Sorry, the customer was not added");
    console.log('Error', e.target.error.title);
}

}

function updateProgressBar(progressBar, value) {
value = Math.round(value);
progressBar.querySelector(".progress__fill").style.width = `${value}%`;
progressBar.querySelector(".progress__text").textContent = `${value}%`;
}

const myProgressBar = document.querySelector(".progress");

updateProgressBar(myProgressBar, 10);

//Display Customer
function showCustomers(e){
var transaction = db.transaction(["customers"],"readonly");
//Ask for ObjectStore
var store = transaction.objectStore("customers");
var index = store.index('title');

var output = '';
index.openCursor().onsuccess = function(e){

    var cursor = e.target.result;
    if(cursor){

        output += "<li class='list-group-item list-group-item-action list-group-item-light'>";

        output += "<div class='progress'>";
        output += "<div class='progress__fill'></div>";
        //on the element bellow i want to assign perc value
        output += "<p class='progress__text'>1</p>";
        output += "</div>";

        output += "<img src='"+cursor.value.img+"' width='100px' height='120px'>";
        output += "<h3>"+cursor.value.title+"</h3>";
        output += "<a href='#' class='book-author'>"+cursor.value.author+"</a>";
        output += "<br>"
        output += "<a href='#' class='published'>"+cursor.value.published+"</a>";
        output += "<br>";
        output += "<p class='pages'>"+cursor.value.pagesR+" / "+cursor.value.pagesE+"</p>";
        output += "<br>";
        output += "<p class='date'>"+cursor.value.startD+" - "+cursor.value.endD+"</p>";

        output += "<button class='button-first'>Редактировать</button>";
        output +=  "<button class='button-second'>Удалить</button>";
        output += "</li>";

        cursor.continue();
    }
    $('.list-group').html(output);
}
}

核心问题与修复方案 #

1. 核心问题分析 #

• calculate函数从未被调用，且函数内直接使用的pagesE、pagesR是addCustomer内的局部变量，无法被外部访问
• 动态生成的每个书籍进度条，没有和数据库中存储的页数数据关联计算
• document.getElementById('#progress__text')存在选择器错误：getElementById不需要加#前缀

2. 修复步骤 #

（1）重构calculate函数，接收参数计算进度

function calculate(pagesR, pagesE) {
    const read = Number(pagesR);
    const total = Number(pagesE);
    // 处理非法值，避免除数为0
    if (isNaN(read) || isNaN(total) || total === 0) {
        return { perc: "0", value: 0 };
    }
    const perc = ((read / total) * 100).toFixed(0);
    return { perc: perc, value: parseInt(perc) };
}

（2）在showCustomers渲染时计算并插入进度值

修改动态生成进度条的代码，直接基于当前书籍的数据库数据计算进度：

// 替换原进度条生成代码
const progressData = calculate(cursor.value.pagesR, cursor.value.pagesE);
output += "<div class='progress'>";
output += `<div class='progress__fill' style='width:${progressData.value}%'></div>`;
output += `<p class='progress__text'>${progressData.perc}%</p>`;
output += "</div>";

（3）移除无效全局进度条初始化

如果不需要页面初始的固定进度条，删除以下代码：

const myProgressBar = document.querySelector(".progress");
updateProgressBar(myProgressBar, 10);

（4）修复选择器错误（若需单独更新进度）

如果后续需要单独更新某个进度条，将原错误代码改为：

document.getElementById('progress__text').textContent = perc;
// 或用jQuery：$('#progress__text').text(perc);

3. 额外优化建议 #

• 存储书籍数据时，将页数转换为数字类型，避免后续计算出现字符串拼接问题
• 增加编辑功能时，同步更新对应书籍的进度条显示

内容的提问来源于stack exchange，提问作者Humam Khaleel