Hello, on a web app I am making, I am taking values from input fields (range and date) and then doing calculations and want to display some results.
I know my calculations and inputs are all fine because if I log it out to the console it displays the correct numbers, however I am unclear how to display this on the page.
if it is was in a helper function then I would just bind it like {{test}} correct? but what do I do if the variables are made in response to an event such as:
Template.ccinfo.events({
'input input[type=range]': function(event){
...
numDisplay= x * y * z;
I added reactive-var and put in the code that you gave.
However this gives me the following error in the console
Uncaught ReferenceError: templateInstance is not defined
This reference error refers to the line in the events where templateInstance is set. This happens even if I remove the “const” and put templateInstance as a global
Template.ccinfo.onCreated(function () {
this.answer = new ReactiveVar();
});
Template.ccinfo.helpers({
showResults() {
templateInstance = Template.instance();
return templateInstance.answer.get();
}
});
Template.ccinfo.events({
'input input[type=range]': function (event) {
numSpeeches = event.currentTarget.value
numSpeechesleft = 10 - numSpeeches;
Session.set('sliderValueIs', numSpeeches)
//The Session var will be set as you drag the slider across its range of values.
//later, you can get this session and return it in a helper to display on your page
},
'submit #dates': function (event) {
event.preventDefault();
let joinDate = $('.joinCC').val();
let finDate = $('.finishCC').val();
let [joinYear, joinMonth, joinDay] = joinDate.split('-');
let [finYear, finMonth, finDay] = finDate.split('-');
let finishDateFormat = new Date(finDate)
let joinDateFormat = new Date(joinDate);
let now = new Date();
function diff(past, future) {
return (future - past) / (1000 * 60 * 60 * 24);
}
function speechRate(numLeft, time) {
return parseInt(time / numLeft);
}
let nowDays = diff(joinDateFormat, finishDateFormat)
let goalDays = diff(now, finishDateFormat);
let finalGoalDate = speechRate(numSpeechesleft, goalDays);
let currentRate = speechRate(numSpeeches, nowDays) * numSpeechesleft;
console.log("To finish your CC by your goal date you will have to do a speech every " + finalGoalDate + " days");
console.log("At your current rate you will finish your CC in " + currentRate + " days");
templateInstance.answer.set(currentRate);
}
});
sidenote: use eslint on your editor. That will help with issues like these. Also you are missing a lot of variable declarations. (const or let). It’s best to always use const if you introduce a new variable.