Question

该程序的目的是获取输入食品的卡路里量，然后计算总卡路里。我并没有做太多的数学运算来得到NaN作为结果，但这是弹出的错误。我希望在卡路里输入框中输入的元素总和。我认为这一定是一个小错误，感谢您的帮助。另外，当我在这里运行它时，出现了一些错误，请您帮我解决这个问题，

var i=0;
var tot_cal=0;
var ar=[];
var arr=[];

function sheet(form){

    var a=new Object();
    a.food=document.getElementById("fooditem").value;
    a.cl=document.getElementById("calorie").value;
    a.cal=parseInt(a.cl,10);

    for(var h=0;h<20;h++)
	    ar.push(h*2);

    for(var h=0;h<20;h++)
	    arr.push(2*h+1);

    i=localStorage.getItem("ui");

    alert(typeof a.cal);
    localStorage.setItem(ar[i],a.food);
    localStorage.setItem(arr[i],a.cal);

    document.write(i);
    document.write("<br><br>");

    i++;
    localStorage.setItem("ui",i);

    for(var j=0;j<i;j++){
        document.write("<br><br>");
        document.write(localStorage.getItem(ar[j]));
        document.write("   -   ");
        document.write(localStorage.getItem(arr[j]));
        document.write("<br><br>");

     }
    document.write("click add more to add more food items or press button click");


    document.write('<a href="./data.html">Add more</a>');
    document.write('<button onclick="total()">Click me</button>');
}

function total(form){
    for(var h=0;h<i;h++){
        tot_cal=tot_cal+parseInt(localStorage.getItem(arr[h]),10);
    }

    document.write(tot_cal);
}

<html>
<header>DATA</header>
<body style="text-align:center">
<form name="data" method="post" onsubmit="return sheet()"><br><br>
Name of the Item:<input type="text" id="fooditem" value=""><br><br>
Calorie content:<input type="number" id="calorie" value=""><br><br>
<input type="submit" value="SUBMIT" >
</form>
</body>
</html>

Answer 1

您只需要对编写HTML的方式进行一些更改。由于您不使用表单，因此已将表单功能传递给表单功能。单击提交按钮后，表单内的数据将发送到服务器。

在这种情况下，表单的action属性决定了将数据重新发送到的URL。

要完成后期使用，可以在工作表函数内部进行ajax调用。

<html>
<header>DATA</header>
<body style="text-align:center">
<div style="display:flex; justify-content:center"><p>Name of the Item:<p><input type="text" id="fooditem" value=""></div><br><br>
<div style="display:flex; justify-content:center"><p>Calorie content:</p><input type="number" id="calorie" value=""></div><br><br>
<input type="button" value="SUBMIT" onclick="sheet()">
</body>
<script type="text/javascript" src="poc.js"></script>
</html>


var i=0;
var tot_cal=0;
var ar=[];
var arr=[];

function sheet(){

    var a=new Object();
    a.food=document.getElementById("fooditem").value;
    a.cl=document.getElementById("calorie").value;
    a.cal=parseInt(a.cl,10);

    for(var h=0;h<20;h++)
        ar.push(h*2);

    for(var h=0;h<20;h++)
        arr.push(2*h+1);

    i=localStorage.getItem("ui");

    alert(typeof a.cal);
    localStorage.setItem(ar[i],a.food);
    localStorage.setItem(arr[i],a.cal);

    document.write(i);
    document.write("<br><br>");

    i++;
    localStorage.setItem("ui",i);

    for(var j=0;j<i;j++){
        document.write("<br><br>");
        document.write(localStorage.getItem(ar[j]));
        document.write("   -   ");
        document.write(localStorage.getItem(arr[j]));
        document.write("<br><br>");

     }
    document.write("click add more to add more food items or press button click");


    document.write('<a href="./data.html">Add more</a>');
    document.write('<button onclick="total()">Click me</button>');
}

function total(form){
    for(var h=0;h<i;h++){
        tot_cal=tot_cal+parseInt(localStorage.getItem(arr[h]),10);
    }

    document.write(tot_cal);
}

工作链接：https://codepen.io/akshat_03/pen/JqQpwG

Answer 2

设置第arr [0]个值似乎存在一些逻辑问题。那就是为什么您获得NaN值。

尝试对数字输入求和时出现NaN错误

2 个答案: