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

How to add and use a Div as a total calculator using Javascript?

本文关键字：Div 计算器 何使用 Javascript 添加      更新时间：2023-09-26

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

你以前说你一周吃20顿饭，但现在你列出了5顿晚餐、7顿午餐和36顿早餐。总共48顿饭。

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

注意，我是JS的新手，所以我的一些代码可能没有意义。到目前为止，这就是我所得到的一切，被注释掉的部分是造成麻烦的原因，其余部分（假设我有一个div ID作为"output"）运行良好：

<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>

谢谢！

edit：我认为可能值得注意的是，"buttoner"div是上一个实验阶段遗留下来的，现在用作插入新div的占位符。

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

你可以用一些方法来解决这个问题。使用纯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>

另一种方法是将outputdiv放在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来更新答案。

更新：如果要用新的output div替换button div，只需将名称从output更改为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;

因此，无论何时计算新答案，您都将始终使用"上一个答案"。

试试这个小提琴：

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.";
}
}

我不确定您缺少了什么行为。当我取消对该块的注释时，它似乎运行良好。如果新的DIV还不存在的话，它正在动态创建中。

代码过于冗长，但如果正如你所说，你是一个初学者，这并不是一件坏事。以下是一些可能的清理：

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