有没有一种方法可以调用函数并将其中的结果记录为变量,以备将来在Javascript中使用?
我想调用一个函数,用来抓取我在输入表单上输入的数字(如数字,而不是字符串),计算一个月内,以及一年后,他喝的茶的总量,+他喝的是最便宜的咖啡,而不是最贵的咖啡,而两者之间。然后,我想将结果信息存储为单独的变量,然后在其他地方调用所需的信息,因为我正在尝试制作一个估算器应用程序 然而,它需要一个按钮来触发每个变量工作所需的计算。以下是我在尝试根据用户输入在一个月内喝茶所需的单个功能故障排除时得到的信息:有没有一种方法可以调用函数并将其中的结果记录为变量,以备将来在Javascript中使用?,javascript,function,user-input,Javascript,Function,User Input,我想调用一个函数,用来抓取我在输入表单上输入的数字(如数字,而不是字符串),计算一个月内,以及一年后,他喝的茶的总量,+他喝的是最便宜的咖啡,而不是最贵的咖啡,而两者之间。然后,我想将结果信息存储为单独的变量,然后在其他地方调用所需的信息,因为我正在尝试制作一个估算器应用程序 然而,它需要一个按钮来触发每个变量工作所需的计算。以下是我在尝试根据用户输入在一个月内喝茶所需的单个功能故障排除时得到的信息: <input type="number" id="cupM
<input type="number" id="cupMon" >
<input type="number" id="cupTues">
<input type="number" id="cupWed">
<input type="number" id="cupThurs">
<input type="number" id="cupFri">
<input type="number" id="cupSat">
<input type="number" id="cupSun">
<p>Click the button to get the number of the number field.</p>
<button onclick="teaMth()">Calculate Total number of cups of tea drunk!</button>
<p id="demo"></p>
<script>
let tea_Mth = teaMth();
function teaMth() {
//Enter amt_TeaMonday
let cupsMon = document.getElementById("cupMon").value;
let teaMon = (parseInt(cupsMon));
//Enter amt_TeaTuesday
let cupsTues = document.getElementById("cupTues").value;
let teaTues = (parseInt(cupsTues));
//Enter amt_TeaWednesday
let cupsWed = document.getElementById("cupWed").value;
let teaWed = (parseInt(cupsWed));
//Enter amt_TeaThursday
let cupsThurs = document.getElementById("cupThurs").value;
let teaThurs = (parseInt(cupsThurs));
//Enter amt_TeaFriday
let cupsFri = document.getElementById("cupFri").value;
let teaFri = (parseInt(cupsFri));
//Enter amt_TeaSaturday
let cupsSat = document.getElementById("cupSat").value;
let teaSat = (parseInt(cupsSat));
//Enter amt_TeaSunday
let cupsSun = document.getElementById("cupSun").value;
let teaSun = (parseInt(cupsSun));
//Procedure amt_TeaMth {amt_TeaMonth * 4}
let tea4Mth = ((teaMon + teaTues + teaWed + teaThurs + teaFri + teaSat + teaSun) * 4);
document.getElementById("demo").innerHTML = tea4Mth
}
document.getElementById("demo").innerHTML = tea_Mth
</script>
单击按钮以获取数字字段的编号
计算总共喝了多少杯茶!
让tea_Mth=teaMth();
函数teaMth(){
//输入amt\u TeaMonday
让cupsMon=document.getElementById(“cupMon”).value;
设teaMon=(parseInt(cupsMon));
//输入amt\u teastu二
让cupsTues=document.getElementById(“cupTues”).value;
让teaTues=(parseInt(cupsTues));
//输入金额
让cupsWed=document.getElementById(“cupWed”).value;
设teaWed=(parseInt(cupsWed));
//输入amt\u teasterday
让cupThurs=document.getElementById(“cupThurs”).value;
设teaThurs=(parseInt(cupsThurs));
//输入amt\u teaviday
让cupsFri=document.getElementById(“cupFri”).value;
设teaFri=(parseInt(cupsFri));
//输入每天的金额
让cupsSat=document.getElementById(“cupSat”).value;
设teaSat=(parseInt(cupsSat));
//输入amt\u teasday
让cupSun=document.getElementById(“cupSun”).value;
设teaSun=(parseInt(cupsson));
//程序amt\u TeaMth{amt\u TeaMonth*4}
让tea4Mth=((teaMon+teaTues+teaWed+teathus+teaFri+teaSat+teaSun)*4);
document.getElementById(“demo”).innerHTML=tea4Mth
}
document.getElementById(“demo”).innerHTML=tea\u Mth
我想将调用的函数用作一个变量,替换空段落补丁的内容(当事情变得混乱时,可以通过get元素by Id标记访问),然后存储新信息供将来使用,比如,当我得到一个计算一年喝茶量和他会花多少钱的应用程序时。但到目前为止,我只能在调用函数本身中的指定变量时获取数据。否则我会得到一个楠
有人能看到代码有什么问题吗?因为我必须获取有关用户最便宜的一杯茶的成本和他喝的最昂贵的一杯茶的成本的输入信息,并使用该信息+所述茶的平均成本来查看一个月和一年的总预计支出?提前谢谢 您没有从函数返回任何内容,如果返回,您将能够存储该变量以备将来使用:
let tea_Mth = teaMth();
document.getElementById("demo").innerHTML = tea_Mth;
// note: tea_Mth is available elsewhere now
function teaMth() {
.....
let tea4Mth = ((teaMon + teaTues + teaWed + teaThurs + teaFri + teaSat + teaSun) * 4);
return tea4Mth; // <-- THIS LINE WAS MISSING
}
单击按钮以获取数字字段的编号
计算总共喝了多少杯茶!
将代码更改为更具状态的方法,请查看:
HTML:
实际上不需要将整个月的总和存储在任何地方,因为它是基于输入值的。因此,当您需要最新的值时,只需调用CalculateCupPermonth()
。下面是一个由答案组成的I。或者,下面的代码片段。答案使用jQuery(您可以在没有jQuery的情况下完成所有这些,但作为初学者,我建议您学习jQuery,因为它比常规JavaScript强大得多),并使用days
和dayValues
(dayValues[0]
=星期一等-如果希望通过日期名称而不是日期的整数表示(即星期一=0;星期日=6)访问值,则可以将值存储在对象中。元素也可以在运行时创建(对于7个字段,要创建7个字段、7个不同的变量、添加7个单独的事件等,这有点烦人……所以最好是动态创建。对于50、100或10000个元素,当然,除非你喜欢自我伤害,否则你必须动态创建它们)。如果你不理解代码,请告诉我
var-days=[“周一”、“周二”、“周三”、“周四”、“周五”、“周六”、“周日”];
var dayValues=[];
$(文档).ready(函数(){
createInputFields(天);
})
函数createInputFields(天){
天。forEach(功能(d){
$(“#dayWrapper”).append(“+d+”);
})
$(“#dayWrapper input”)。在(“input”,function()上{
var weeklyTotal=0;
dayValues=[];
$(“#dayWrapper输入”)。每个(函数(){
var n=fieldToInt($(this.val());
周总+=n;
dayValues.push(n);
})
$(“weeklyTotal”).text(weeklyTotal);
$(“#月总计”).text(周总计*4);
console.log(dayvalue);
})
}
功能字段输入(v){
如果(v==“”)返回0;
否则返回parseInt(v);
}
@import('https://fontlibrary.org/face/glacial-indifference');
*{
保证金:0;
填充:0;
颜色:白色;
字体系列:'Glacialinergular',无衬线;
}
html{
身高:100%;
}
身体{
身高:100%;
背景:#222;
背景:url('https://cbsnews3.cbsistatic.com/hub/i/r/2018/02/05/a8617d9c-4d06-427e-8e86-6e39cbd36c9e/thumbnail/1200x630/bd66ca034448164d0c7c2d28ea5bde2c/istock-466073662.jpg')没有固定的重复中心;
-webkit背景尺寸:封面;
-moz背景尺寸:封面;
-o-背景尺寸:封面;
背景尺寸:封面;
显示器:flex;
对齐项目:居中;
证明内容:
<label>Monday <input type="number" id="cupMon" value="0" /></label>
<label>Tuesday <input type="number" id="cupTues" value="0" /></label>
<label>Wednesday <input type="number" id="cupWed" value="0" /></label>
<label>Thursday <input type="number" id="cupThurs" value="0" /></label>
<label>Friday <input type="number" id="cupFri" value="0" /></label>
<label>Saturday <input type="number" id="cupSat" value="0" /></label>
<label>Sunday <input type="number" id="cupSun" value="0" /></label>
<h1>Number of cups for the entire month: <span id="sumCupsMonth">0</span></h1>
const state = {
cupMon: 0,
cupTues: 0,
cupWed: 0,
cupThurs: 0,
cupFri: 0,
cupSat: 0,
cupSun: 0,
};
const weekDays = Object.keys(state); // ['cupMon', 'cupTues', ...]
const total = document.getElementById('sumCupsMonth');
const calculateCupsPerMonth = () => {
// Add up all weekdays in state
const sumWeek = weekDays.reduce((result, weekDay) => {
const weekDayValue = state[weekDay];
return result + weekDayValue;
}, 0);
return sumWeek * 4;
};
// Update total based on all weekdays
const updateTotal = () => {
total.innerHTML = calculateCupsPerMonth();
};
// Listen to input changes for each weekday, save current value in state.
weekDays.forEach((weekDay) => {
const input = document.getElementById(weekDay);
input.addEventListener('change', (changeEvent) => {
const currentWeekDay = changeEvent.target.id;
const value = parseInt(changeEvent.target.value, 10);
// Save value for future calculations
state[currentWeekDay] = value;
updateTotal();
});
});