Question

我需要创建一个函数来计算用户输入的总和，并将其与之前给定的值进行比较，并将结果返回给用户。

e.g。你之前说你每周吃20顿饭，但你现在列出了5份晚餐，7份午餐和36份早餐。总共有48餐。

到目前为止，我可以读取我的输入并将其添加到变量中，因为响应者将其输入，在已存在的div中显示。但我需要创建一个div来显示它的实际用途。这是我遇到问题的地方，因为我无法使这段代码正常工作。

注意我是JS的新手，因此我的一些代码可能毫无意义。这是我到目前为止所做的一切，有点被注释掉是造成麻烦的，剩下的（假设我有一个div ID为'输出'）工作正常：

<html>
<head>
<script>
    var count = 0;
    function summer() {
        var num1 = (parseFloat(document.getElementById("number1").value)) || 0;
        var num2 = (parseFloat(document.getElementById("number2").value)) || 0;
        var num3 = (parseFloat(document.getElementById("number3").value)) || 0;
        count = num1+num2+num3;
     // if(!document.getElementById("output")) {
     //     var newDiv = document.createElement('div');
     //     var divIdName = 'output';
     //     var myDiv = document.getElementById('buttoner');
     //     var content = document.createTextNode("")
     //     newDiv.setAttribute('id',divIdName);
     //     newDiv.appendChild(content);
     //     document.body.insertBefore(newDiv, myDiv)
     //     };
        document.getElementById("output").innerHTML = "Your running total = "+count
};
</script>
</head>
<body>
<input type="text" id="number1" onKeyUp="summer()" name="number" />
<input type="text" id="number2" onKeyUp="summer()" name="number" />
<input type="text" id="number3" onKeyUp="summer()" name="number" />
<div id='Buttoner'>
<button type="button" onclick="summer()">Clicking here adds your input to the "count" variable</button>
</div>
<br>
</body>
</html>

谢谢！

编辑：认为可能值得注意的是，“按钮”div是从前一个实验阶段遗留下来的，现在用作插入新div的地标。

Answer 1

你的问题对我来说似乎很简单。如果这确实是您的所有HTML，那么您唯一的问题就是您没有output div。

您可以通过某种方式解决此问题。使用纯JavaScript ......

var output = document.createElement("div"); // Creates a <div> element
output.innerHTML = "Your running total = " + count;
document.body.appendChild(output); // Add the <div> to the end of the <body>

另一种方法是将output div放在HTML中，这样您甚至不需要更改脚本：

<div id="output"></div>

如果你想在输入之前看不到output，你可以稍微CSS一下......

<div id="output" style="display: none;"></div>

并随时使用Javascript将其显示。

var output = document.getElementById('output');
output.style.display = 'block'; // or 'inline-block', or 'inline', etc. See what fits you better

当你开始使用Javascript时，我建议你通过阅读不引人注目的Javascript来开始正确的道路。如果你愿意，我可以用一些不引人注目的JS来更新答案。

更新：如果您想将button div替换为新的output div，则只需更改output的名称即可{1}} button / buttoner / whatever you want。

更新2 ：好像我没有正确理解你的问题。如果您想存储以前的答案，也可以通过多种方式进行。

一种是将当前答案存储在隐藏字段中。例如......

<input type="hidden" id="prevAnswer" value="0" />

然后，在您的Javascript中，您可以这样做：

var prevAnswer = document.getElementById("prevAnswer")
var prevAnswerValue = parseFloat(prevAnswer.value) || 0;
output.innerHTML = "You previously said you eat " + prevAnswerValue + " meals a week but you have currently listed " + num1 + " Dinners, " + num2 + " Lunches and " + num3 + " Breakfasts. This totals " + count + " meals.";
prevAnswer.value = count;

因此，无论何时计算新答案，您都将始终拥有“上一个答案”。

Answer 2

试试这个小提琴：

http://jsfiddle.net/Q65BT/

var pre =0;
var count = 0;
function summer(a) {
    var num1 = (parseFloat(document.getElementById("number1").value)) || 0;
    var num2 = (parseFloat(document.getElementById("number2").value)) || 0;
    var num3 = (parseFloat(document.getElementById("number3").value)) || 0;
    if(a==1)
    {
    pre=count;
    count = num1+num2+num3;
    document.getElementById("output").innerHTML = "You previously said you eat "+pre+" meals a week but you have currently listed "+num1+" Dinners, "+num2+" Lunches and "+num3+" Breakfasts. This totals "+count+" meals.";
}
}

Answer 3

我不确定你缺少什么行为。当我取消注释该块时，它 seems to work fine 。如果新的DIV尚不存在，它将在动态创建。

代码比必要的更有代表性，但如果你说，你是初学者，这不是一件坏事。这里有一些可能的清理：

if (!document.getElementById("output")) {
    var newDiv = document.createElement('div');
    newDiv.setAttribute('id', 'output');
    var myDiv = document.getElementById('buttoner');
    document.body.insertBefore(newDiv, myDiv)
};

如何使用Javascript添加和使用Div作为总计算器？

3 个答案: