我的代码不能在Meteor中正常工作，但可以在JS小提琴上工作

My code doesn't work properly in Meteor but works on JS fiddle

本文关键字：工作 但可以 JS 小提琴 不能 代码 Meteor 常工作 我的      更新时间：2023-09-26

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

我是编码新手，我对流星的经验很少，所以我确信我错过了一些东西，它阻碍了其他一切的进展。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>";
}

我知道我并没有真正按照预期的方式使用meteor，但我只是还没有达到那个水平，我想熟悉API并将其用于测试。我只是想让我的按钮工作的方式，它在JS小提琴上使用流星(并了解如何)。有没有人能帮我解决这个问题?

PS:我正在努力在这个网站上更好地提问，所以除了我的问题之外，任何帮助都会非常感激。非常感谢!

Brendan，

你需要做的是把你的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>";       }
});

我建议你从这里阅读一些Meteor信息。喜欢学习Meteor——我认为它是一个很棒的框架。

这与meteor无关，但您可以像这样将函数包装在脚本标签中:

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

这应该允许你的javascript功能，即使你不使用流星

更快速的方式:

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

相关文章：