Блог

Главная - Вопросы по программированию - Есть ли способ вызвать функцию и записать результаты, сделанные внутри, в виде переменных для будущего использования в Javascript?

Есть ли способ вызвать функцию и записать результаты, сделанные внутри, в виде переменных для будущего использования в Javascript?

#javascript #function #user-input

#javascript #функция #пользовательский ввод

Вопрос:

Я хочу вызвать функцию, используемую для захвата чисел (в виде чисел, а не строк) Я ввел в форму ввода, чтобы рассчитать общее количество чая, выпитого за месяц, а позже за год, сумму, которую он потратил бы на выпивку только самого дешевого кофе, доступного против самого дорогого кофе, доступного для него, и промежуточное. Затем я хочу сохранить полученную информацию в виде отдельных переменных, а затем вызвать информацию по мере необходимости в другом месте, поскольку я пытаюсь создать приложение для оценки.

Однако для запуска вычислений, необходимых для работы каждой переменной, требовалась кнопка. Вот что я получил, когда попытался устранить неполадки в одной функции, необходимой для выпивания чашек чая за месяц на основе пользовательского ввода:

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

Я хотел использовать вызванную функцию в качестве переменной, которая заменила бы содержимое пустого абзаца patch (к которому можно было бы получить доступ через тег get Element by Id, когда все становится хаотичным), а затем сохранить эту новую информацию для будущего использования, например, когда я получу приложение для расчета количества выпитого чая за год и сколько денег он бы потратил. Но до сих пор я мог получить эти данные только тогда, когда я вызвал назначенную переменную внутри самой функции. В противном случае я бы получил NaN вместо этого.

Может ли кто-нибудь увидеть, что не так с кодом, поскольку мне пришлось бы собирать входную информацию о стоимости самой дешевой чашки чая пользователя и стоимости его самой дорогой выпитой чашки чая и использовать эту информацию среднюю стоимость указанного чая, чтобы увидеть общие прогнозируемые расходы за месяц, а затем за год? Заранее спасибо!

Ответ №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>

Ответ №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();
  });
});

На самом деле нет необходимости хранить сумму за весь месяц где угодно, поскольку она основана на входных значениях. Таким образом, вы могли бы просто позвонить calculateCupsPerMonth() , когда вам нужно актуальное значение.

Ответ №3:

Вот jsFiddle, который я сделал из ответа. Или, в качестве альтернативы, приведенный ниже фрагмент кода. В ответе используется jQuery (вы можете сделать все это без jQuery, но, как новичок, я рекомендую вам изучить jQuery, поскольку он намного мощнее обычного JavaScript) и использует массив days и dayValues ( dayValues[0] = понедельник и т.д. — Вы могли бы альтернативно сохранить значения в объекте, если хотите получить к ним доступ по названию дня, а не по представлению дня int (т. Е. Понедельник = 0; воскресенье = 6). Элементы также создаются во время выполнения (с 7 полями, немного раздражает необходимость создавать 7 полей, 7 разных переменных, чтобы добавить 7 отдельных событий etc…so лучше просто создавать вещи динамически. С 50, 100 или 10000 элементами, тогда, конечно, если вам не нравилось причинять себе вред, вам пришлось бы создавать их динамически). Дайте мне знать, если вы не понимаете код

 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>

Комментарии:

1. Как именно jQuery помогает в этом? И почему весь этот несвязанный CSS-хлам?