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

Question

我想调用一个函数来获取数字（作为数字而不是字符串）我在 输入表单 上输入计算一个月内喝的茶总量，以及一年后喝的茶的总量，+ 他只喝最便宜的咖啡和他喝的最贵的咖啡，以及两者之间的花费。然后，我想将结果信息存储为单独的变量，然后根据需要在其他地方调用该信息，因为我正在尝试制作 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>

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

有人能看出代码有什么问题吗，因为我必须获取有关用户最便宜的一杯茶的成本和他喝过的最贵的一杯茶的成本的输入信息，并使用该信息 + 平均成本说看茶叶的预计总支出一个月然后一年的时间？提前致谢！

Answer 1

你没有从你的函数中返回任何东西，如果你这样做了，你将能够存储该变量以供将来使用：

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>

Answer 2

将您的代码更改为更有状态的方法，看看：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();
  });
});

实际上没有必要在任何地方存储整个月的总和，因为它基于输入值。因此，您可以在需要 up-to-date 值时简单地调用 calculateCupsPerMonth()。

Answer 3

这里是我做的jsFiddle答案。或者，或者，下面的代码片段。答案使用 jQuery（你可以不用 jQuery 来完成所有这些，但是，作为初学者，我建议你学习 jQuery，因为它比普通的 JavaScript 强大得多) 并使用 days 和 dayValues 的数组（dayValues[0] = 星期一等 - 如果您想按日期访问它们，您可以选择将值存储在对象中，而不是一天的 int 表示（即星期一 = 0；星期日 = 6）。这些元素也是在运行时创建的（有 7 个字段，必须创建 7 个字段、7 个不同的变量来添加 7 个单独的变量有点烦人事件等...所以最好动态地创建事物。如果有 50、100 或 10000 个元素，那么，当然，除非你喜欢 self-harm，否则你将不得不动态地创建它们）。如果你让我知道看不懂代码

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='teaApp'>
  <h2>How many cups of tea<br>did you drink?</h2>
  <div id='dayWrapper'></div>
<div id='totals'>
  <div class='totalRow'>
    <p>Weekly Total:</p>
    <p id='weeklyTotal'>0</p>
  </div>
  <div class='totalRow'>
    <p>Monthly Total:</p>
    <p id='monthlyTotal'>0</p>
  </div>
  </div>
</div>

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

Is there a way to invoke a function and log the results made within as Variables for future use in Javascript?

javascript

user-input

function