gpt4 book ai didi

javascript - 如何使用 Javascript 添加并使用 Div 作为总计算器?

转载 作者:行者123 更新时间:2023-11-28 12:32:36 24 4
gpt4 key购买 nike

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

例如您之前说过您每周吃 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>

谢谢!

编辑:认为可能值得注意的是,“buttoner”div 是前一阶段实验遗留下来的,现在用作插入新 div 的地标。

最佳答案

你的问题对我来说似乎很简单。如果这确实是您的全部 HTML,那么您唯一的问题是您没有 output分区。

您可以通过某些方式解决这个问题。使用纯 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 中的名称即可至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;

因此,每当您计算新答案时,您总是会得到上一个答案。

关于javascript - 如何使用 Javascript 添加并使用 Div 作为总计算器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20611872/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com