有没有一种方法可以调用函数并将结果记录为变量，以备将来在Javascript中使用？

编程问答 2022-08-11

问题描述

我想调用一个用于获取数字的函数（以数字而不是字符串），我在输入表格上键入了该数字，以计算喝茶的总量在一个月内，以及一年后的某个月，他将要花费的费用加上他所能喝到的最便宜的咖啡与最便宜的咖啡之间的差额。然后，我想将结果信息存储为单独的变量，然后根据需要在其他地方调用此信息，因为我正在尝试制作Estimator应用。

但是，它需要一个按钮来触发每个变量起作用所需的计算。这是我尝试根据用户输入在一个月内喝下一杯茶所需的单个功能进行故障排除时遇到的事情：

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

我想将调用的函数用作变量，该变量将替换空段补丁的内容（当事情变得混乱时可以通过get Element by Id标签访问），然后存储该新信息以备将来使用，例如，当我获得该应用程序以计算一年中喝茶的量以及他将花费多少钱时。但是到目前为止，我只能在函数内部调用指定的变量时才能获取该数据。否则我会得到一个NaN。

有人可以看到代码有什么问题，因为我将不得不获取有关用户最便宜的一杯茶的价格及其最贵的一杯醉茶的价格的输入信息，并使用该信息+所说茶的平均成本看一个月再一年的预计总支出？预先感谢！

解决方法

您不会从函数中返回任何内容，如果可以，则可以存储该变量以备将来使用：

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
}

下面的实时示例：

var tea_Mth;

function calcTeaMth(){
    tea_Mth = teaMth();    
    document.getElementById("demo").innerHTML = tea_Mth
}
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); 
        return tea4Mth
      }  
<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="calcTeaMth()">Calculate Total number of cups of tea drunk!</button>


<p id="demo"></p>

,

将代码更改为更具状态的方法，看看：https://codepen.io/timotgl/pen/KKzQWXd

HTML：

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

JS：

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();
  });
});

实际上，不需要基于整个月的总和，因为它基于输入值。因此，当您需要最新值时，只需调用calculateCupsPerMonth()。

,

这是我回答的jsFiddle。或者，也可以是下面的代码段。答案使用jQuery（您可以在不使用jQuery的情况下完成所有这些操作，但是，作为一个初学者，我建议您学习jQuery，因为它比常规的JavaScript强大得多）并使用days和{{1}数组}（dayValues =星期一等-如果您想按日期名称而不是日期的整数表示形式（即，Monday = 0; Sunday = 6）。元素也是在运行时创建的（有7个字段，不得不创建7个字段，7个不同的变量，添加7个单独的事件等有点烦人...所以最好动态地创建事物。50个，100或10000个元素，那么当然，除非您自残，否则必须动态创建它们。）如果您不懂代码，请告诉我

dayValues[0]
var days = ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
var dayValues = [];

$(document).ready(function(){
  createInputFields(days);
})

function createInputFields(days){
  days.forEach(function(d){
    $("#dayWrapper").append("<label for'cup" + d + "'>" + d + "</label><input type='number' id='cup" + d + "' class='teaInput'/>");
  })
  
  $("#dayWrapper input").on("input",function(){
    var weeklyTotal = 0;
    dayValues = [];
    $("#dayWrapper input").each(function(){
        var n = fieldToInt($(this).val());
      weeklyTotal += n;
      dayValues.push(n);
    })
    $("#weeklyTotal").text(weeklyTotal);
    $("#monthlyTotal").text(weeklyTotal * 4);
    console.log(dayValues);
  })
}

function fieldToInt(v){
  if(v == "") return 0;
  else return parseInt(v);
}
@import('https://fontlibrary.org/face/glacial-indifference');

*{
  margin: 0;
  padding: 0;
  color: white;
  font-family: 'GlacialIndifferenceRegular',sans-serif;
}

html{
  height: 100%;
}

body{
  height: 100%;
  background: #222;
  background: url('https://cbsnews3.cbsistatic.com/hub/i/r/2018/02/05/a8617d9c-4d06-427e-8e86-6e39cbd36c9e/thumbnail/1200x630/bd66ca034448164d0c7c2d28ea5bde2c/istock-466073662.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

h2{
  margin-bottom: 20px;
  text-align: center;
}

#teaApp{
  padding: 30px;
  background: #000000cc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#dayWrapper{
  width: 300px;
  display: grid;
  grid-template-columns: 150px 150px;
  grid-row-gap: 10px;
  font-size: 20px;
}

#dayWrapper label{
  text-align: center;
}

input{
   background: none;
  border: none;
  border-bottom: 2px solid white;
  padding: 5px;
}

input:focus{
  border-color: #007eff;
}

#totals{
  margin-top: 20px;
}

.totalRow{
  font-size: 20px;
  display: grid;
  grid-template-columns: 150px 150px;
  text-align: center;
}

.totalRow:nth-of-type(1){
  margin-bottom: 10px;
}

functionfunctionfunctionjavascriptuser-input