在提交 HTML 表单后保留 JavaScript 中的 innerHTML 值

keeping a innerhtml value from a javascript after a html form submit

本文关键字：JavaScript 中的 innerHTML 保留 提交 HTML 表单      更新时间：2023-09-26

>我正在使用下面的javascript从一些文本框中收集值，进行一些计算并将结果显示为innerhtml内容

window.onload = function () {
    var left = document.getElementById('mem_count');
    var right = document.getElementById('siz_single');
    var result = document.getElementById("disp_siz");
    function check(a, b, elem) {
        var txt = '';
        if (a === 0 && b === 0) {
        } 
        else if (a !== 0 && b === 0) {
         txt = "Enter size of single device in above column"
        }
        else if(a == 0 && b !== 0){
        txt = "Enter Meta member count in above column "
        }
        else  {
            var c = 1 +a        
            txt = "Your meta device size is " + (c*b) +" MB" + " = " + (c*b/1024) +" GB ";
        }
disp_siz.innerHTML = txt;
    }
    mem_count.onkeyup = calc;
    siz_single.onkeyup = calc;
    function calc() {
        var a = parseFloat(mem_count.value) || 0;
        var b = parseFloat(siz_single.value) || 0;
        check(a,b, this);
    }
}

并且输出将显示在div 之间

<div id="disp_siz"><-----above output will come here----></div>

此div 是 html 表单的一部分。提交表单后，我可以将所有其他表单值保留在同一字段中。但无法显示上面的输出。它只是清除了我的价值观。无论如何，我可以在表单订阅后将此 javascript 变量值回显到同一字段吗？

第一个选项：

将其设置在服务器端。

第二种选择：

如果页面刷新，就像清理白板一样，您必须重新开始。如果字段存在，则触发函数运行。

将calc();添加到onload函数的末尾。 

    ...
    ...
    function calc() {
        var a = parseFloat(mem_count.value) || 0;
        var b = parseFloat(siz_single.value) || 0;
        check(a,b, this);
    }
    calc();  //<-- added this to trigger the calculation
}

另一个问题：

并且您不应该直接通过元素的 id 引用元素。你应该使用 

document.getElementById("disp_siz").innerHTML = txt;

您引用的变量（disp-siz ）不存在。使用您之前创建的变量，result .

result.innerHTML = txt;
相关文章：