我的代码在 Meteor 中不能正常工作，但在 JS fiddle 上工作答案

【问题标题】：My code doesn't work properly in Meteor but works on JS fiddle我的代码在 Meteor 中不能正常工作，但在 JS fiddle 上工作
【发布时间】：2015-10-07 12:46:00
【问题描述】：

我一直在试图弄清楚为什么 Meteor 不让我测试我的按钮，但 JSfiddle 会。我在终端中使用流星命令运行代码，它打开就好像它运行正常，我输入了我的文本但是它不会产生列表项。当我复制代码并将其粘贴到 js fiddle 上时，它工作正常。

我是编码新手，我对流星的经验很少，所以我确定我错过了一些东西，它阻碍了其他一切的进步。 http://jsfiddle.net/brendanjackson/bf7m7oao/3/

<body>
    <div class=category1>
    <h1>Wellness</h1>
    <input type="text" id = "inputtext">
    <button onClick='buttonClicked()'>Click Me!</button>
    <ul id="myText"></ul>
    </div>
</body>



function buttonClicked() {
    var myText = document.getElementById('myText');
    var inputtext = document.getElementById('inputtext').value  ;
        myText.innerHTML += "<li>"+inputtext+"</li>";

}

我知道我并没有真正按照预期的方式使用流星，但我还没有达到那个水平，我想熟悉 API 并将其用于测试。我只想让我的按钮在使用 Meteor 时像在 JS fiddle 上那样工作（并了解如何）。有没有人可以帮我解决这个问题？

PS：我正在努力提高在这个网站上提问的能力，因此除了我的问题之外的任何帮助都将不胜感激。非常感谢！

【问题讨论】：

该代码中没有任何与流星相关的内容。
我对期望的行为以及您遇到的问题或错误有点困惑。
介意展示如何在 HTML 中包含 JS 吗？控制台是否提供类似：buttonClicked is not defined？
我也不是流星专家，但您的 js 需要适当地确定范围。你的文件结构是什么样的？此外，您是否将 js 包装在 events 中，例如 Template.templateName.events({});
我没有在模板中包装任何东西。

标签： javascript meteor

【解决方案1】：

布伦丹，

您需要做的是将您的 HTML 放入 .html 文件的模板中，如下所示：

<body>
  {{brendansTemplate}}
</body>

<template name="brendansTemplate">
    <div class=category1>
      <h1>Wellness</h1>
      <input type="text" id = "inputtext">
      <button id="btnBrendan">Click Me!</button>
      <ul id="myText"></ul>
    </div>
</template>

...然后在对应的*.js文件中，创建一个：

Template.brendansTemplate.events({
  'click #btnBrendan': function() {
      var myText = document.getElementById('myText');
      var inputtext = document.getElementById('inputtext').value  ;
      myText.innerHTML += "<li>"+inputtext+"</li>";       }
});

我建议您阅读来自here 的一些 Meteor 信息。享受学习 Meteor - 我认为这是一个很棒的框架。

【讨论】：

【解决方案2】：

这与流星无关，但您可以将函数包装在脚本标签中，如下所示：

<script>
function buttonClicked() {
var myText = document.getElementById('myText');
var inputtext = document.getElementById('inputtext').value  ;
    myText.innerHTML += "<li>"+inputtext+"</li>";
}
</script>

即使您不使用流星，这也应该允许您的 javascript 运行。

【讨论】：

我对编码很陌生，我知道很多，但不能告诉你比这更进一步，所以这是一个很好的解释
布莱克，这肯定涉及流星。这不是一个真正合适的答案。

【解决方案3】：

更流星的方式：

html

将您的 html 包装在 模板中。 Meteor 将自行提供<html> 和<body> 部分。

<template name="myTemplate>
  <div class=category1>
    <h1>Wellness</h1>
    <input type="text" id="inputtext">
    <button>Click Me!</button>
    <ul id="myText"></ul>
  </div>
</template>

js:

Template.myTemplate.events({
  'click button': function(ev){
    var myText = document.getElementById('myText');
    var inputtext = document.getElementById('inputtext').value;
    myText.innerHTML += "<li>"+inputtext+"</li>";
  }
});

为了更加流畅，可以使用 Sesssion 变量和辅助函数，而不是直接操作 DOM。

【讨论】：