CODEWITHSUNDEEP
javascripthtmlmeteor
ignite-me
ignite-me

Reputation: 778

Why my function is not defined with Meteor?

I have the following line in my site.html file. 

 <input type="text" name="income" id="income" onkeydown="myFunction(this.value)">

I have a separate site.js file that looks like this: 

    if (Meteor.isClient) {
      function myFunction(val) {
        var income = document.getElementById("income").value;
      }
      var total = total + income;
    }

    if (Meteor.isServer) {
      Meteor.startup(function () {
        // code to run on server at startup
      });
    }

So essentially I need to obtain the value from the input field either with blur or as-typed (onkeydown) and add it to local variable "total" that is being displayed someplace else on the page. For some reason my function is not working when I type I get "myFunction is not defined" in the console. Where do I need to define it exactly (no JavaScript should be used in my .html file).

Upvotes: 2

Views: 526

Answers (1)

JeremyK
JeremyK

Reputation: 3240

Here is a version that works with the blur event. Markup:

<body>
  {{> hello}}
</body>

<template name="hello">
  <input type="text" name="income" id="income">
  <h2>{{Total}}</h2>
</template>

And the javascript:

if (Meteor.isClient) {
  // counter starts at 0
  Session.set('total', 0);

  Template.hello.helpers({
    Total: function() {
      return Session.get('total');
    },
  });

  Template.hello.events({
    'blur #income': function (event, template) {
      // increment the counter when button is clicked
      Session.set('total', Session.get('total') + Number(event.target.value));
      event.target.value = '';
    },
  });
}

Upvotes: 1

Related Questions