Javascript 如何通过单击输入按钮触发函数_Javascript_Button_Input_Meteor

Javascript 如何通过单击输入按钮触发函数

javascript button input meteor

Javascript 如何通过单击输入按钮触发函数,javascript,button,input,meteor,Javascript,Button,Input,Meteor,我想知道如何让我的输入字段在点击输入按钮后提交它们的数据，我现在已经设置好了，这样当你输入enter时它就可以工作了 js Messages = new Meteor.Collection('messages'); if (Meteor.is_client){ ////////// Helpers for in-place editing ////////// // Returns an event_map key for attaching "ok/cancel" events

我想知道如何让我的输入字段在点击输入按钮后提交它们的数据，我现在已经设置好了，这样当你输入enter时它就可以工作了

Messages = new Meteor.Collection('messages');

if (Meteor.is_client){

   ////////// Helpers for in-place editing //////////

  // Returns an event_map key for attaching "ok/cancel" events to
  // a text input (given by selector)
  var okcancel_events = function (selector) {
    return 'keyup '+selector+', keydown '+selector+', focusout '+selector;
  };

  // Creates an event handler for interpreting "escape", "return", and "blur"
  // on a text field and calling "ok" or "cancel" callbacks.
  var make_okcancel_handler = function (options) {
    var ok = options.ok || function () {};
    var cancel = options.cancel || function () {};

    return function (evt) {
      if (evt.type === "keydown" && evt.which === 27) {
        // escape = cancel
        cancel.call(this, evt);
      } else if (evt.type === "keyup" && evt.which === 13) {
        // blur/return/enter = ok/submit if non-empty
        var value = String(evt.target.value || "");
        if (value)
          ok.call(this, value, evt);
        else
          cancel.call(this, evt);
      }
    };
  };//added as test

    Template.entry.events = {};

    Template.entry.events[okcancel_events('#messageBox')] = make_okcancel_handler({
      ok:function(text, event){
        var nameEntry = document.getElementById('name');
        if(nameEntry.value != ""){
          var ts = Date.now() / 1000;
          Messages.insert({name: nameEntry.value, message: text, time: ts});
          event.target.value = "";
        }//if statment ends
      }
    });


  Template.messages.messages = function () {
    return Messages.find({}, { sort: {time: -1} });
  };
}

html

<head>
  <title>tutorial</title>
</head>

<body>
 {{> entry}}

 {{> messages}}
</body>

<template name="entry">
    <p>
    <input type="text" id="name" placeholder="your name">
    <input type="text" id="messageBox" placeholder="your message">
    <input type="button" id="submit">
    </p>
</template>

<template name="messages">
    {{#each messages}}
        {{> message}} <!--echo of message template-->
    {{/each}}
</template>

<template name="message">
    <p><strong>{{name}}:</strong>{{message}}</p>
</template>

我做了以下操作，但仍然得到一个错误

 if (Meteor.isServer) {
  Template.entry.events({
    'click #submit': function() {
        var nameEntry = document.getElementById('name');
        if(nameEntry.value != ""){
            var ts = Date.now() / 1000;
            Messages.insert({name: nameEntry.value, message: $('#messageBox').val(), time: ts});
        }
    }
}
}

错误

这是整个js文件

Messages = new Meteor.Collection('messages');

if (Meteor.is_client){

   ////////// Helpers for in-place editing //////////

  // Returns an event_map key for attaching "ok/cancel" events to
  // a text input (given by selector)
  var okcancel_events = function (selector) {
    return 'keyup '+selector+', keydown '+selector+', focusout '+selector;
  };

  // Creates an event handler for interpreting "escape", "return", and "blur"
  // on a text field and calling "ok" or "cancel" callbacks.
  var make_okcancel_handler = function (options) {
    var ok = options.ok || function () {};
    var cancel = options.cancel || function () {};

    return function (evt) {
      if (evt.type === "keydown" && evt.which === 27) {
        // escape = cancel
        cancel.call(this, evt);
      } else if (evt.type === "keyup" && evt.which === 13) {
        // blur/return/enter = ok/submit if non-empty
        var value = String(evt.target.value || "");
        if (value)
          ok.call(this, value, evt);
        else
          cancel.call(this, evt);
      }
    };
  };//added as test

    Template.entry.events = {};

    Template.entry.events[okcancel_events('#messageBox')] = make_okcancel_handler({
      ok:function(text, event){
        var nameEntry = document.getElementById('name');
        if(nameEntry.value != ""){
          var ts = Date.now() / 1000;
          Messages.insert({name: nameEntry.value, message: text, time: ts});
          event.target.value = "";
        }//if statment ends
      }
    });

    if (Meteor.isServer) {
  Template.entry.events({
    'click #submit': function() {
        var nameEntry = document.getElementById('name');
        if(nameEntry.value != ""){
            var ts = Date.now() / 1000;
            Messages.insert({name: nameEntry.value, message: $('#messageBox').val(), time: ts});
        }
    }
});
}




  Template.messages.messages = function () {
    return Messages.find({}, { sort: {time: -1} });
  };
}

这是整个html文件 辅导的


{{>条目}
{{>消息}


{{{#每条消息}
{{>消息}
{{/每个}}
{{name}}:{{message}

只需为单击添加一个事件处理程序（在Meteor.isClient之间）

写这篇文章最干净的方法（如果你没有使用coffeescript，你应该这样做），是

在JavascScript中

Template.entry.events({
 'click #submit' : function(event) {
        var nameEntry = document.getElementById('name');
        if(nameEntry.value != ""){
            var ts = Date.now() / 1000;
            Messages.insert({name: nameEntry.value, message: $('#messageBox').val(), time: ts});
        }
    }
})

咖啡脚本

Template.entry.events 
    "click #submit": (event) ->
      nameEntry = document.getElementById("name")
      unless nameEntry.value is ""
        ts = Date.now() / 1000
        Messages.insert
          name: nameEntry.value
          message: $("#messageBox").val()
          time: ts

写这篇文章最干净的方法（如果你没有使用coffeescript，你应该这样做），是

在JavascScript中

Template.entry.events({
 'click #submit' : function(event) {
        var nameEntry = document.getElementById('name');
        if(nameEntry.value != ""){
            var ts = Date.now() / 1000;
            Messages.insert({name: nameEntry.value, message: $('#messageBox').val(), time: ts});
        }
    }
})

咖啡脚本

Template.entry.events 
    "click #submit": (event) ->
      nameEntry = document.getElementById("name")
      unless nameEntry.value is ""
        ts = Date.now() / 1000
        Messages.insert
          name: nameEntry.value
          message: $("#messageBox").val()
          time: ts

当我尝试使用您的代码时，我在上面遇到了以下错误。我将其包装在Meteor.is_client（）中，但我仍然遇到了一个错误，现在是另一个错误。您上面的代码在Meteor.isServer中显示了它？很抱歉，我忘了关闭括号，现在更正了。好的，现在它的功能与以前相同，但单击按钮没有任何作用。很抱歉，文档中有一个轻微的语法更改，我已经更新了它并自己测试了它，请确保您在

Template.entry.events={}之后添加它在您的代码中我在尝试使用您的代码时遇到以下错误。我将其包装在Meteor.is_client（）中，但我仍然遇到一个错误，现在是另一个错误。您上面的代码在Meteor.isServer
中显示了它？很抱歉，我忘了关闭括号，现在更正了。好的，现在它的功能与以前相同，但单击按钮没有任何作用。很抱歉，文档中有一个轻微的语法更改，我已经更新了它并自己测试了它，请确保您在Template.entry.events={}之后添加它在您的code@CodefendatCoffeeScript肯定在我的待办事项列表中，但我想先熟悉javascript。代码行数较少，但CoffeeScript编译器在出现错误时提供了非常基本的诊断信息。@Codefendat CoffeeScript肯定在我的待办事项列表中，但是我想让自己先熟悉javascript更多。更少的代码行，但是CoffeeScript编译器在出现错误时提供了非常基本的诊断信息。
Template.entry.events({
 'click #submit' : function(event) {
        var nameEntry = document.getElementById('name');
        if(nameEntry.value != ""){
            var ts = Date.now() / 1000;
            Messages.insert({name: nameEntry.value, message: $('#messageBox').val(), time: ts});
        }
    }
})

Template.entry.events 
    "click #submit": (event) ->
      nameEntry = document.getElementById("name")
      unless nameEntry.value is ""
        ts = Date.now() / 1000
        Messages.insert
          name: nameEntry.value
          message: $("#messageBox").val()
          time: ts