我的代码在Meteor中无法正常工作，但可以在JS小提琴上工作
[英]My code doesn't work properly in Meteor but works on JS fiddle
问题描述
I've been trying to figure out why Meteor doesn't let me test my button but JSfiddle will.I run the code with the meteor command in terminal, it opens up as if its running properly, I input my text but it does not produce a list item. 
我一直在试图弄清为什么Meteor不让我测试按钮，但是JSfiddle会这样做。我在终端中使用meteor命令运行代码，它像打开的一样正常运行，我输入了文本但没有输入产生一个清单项目。 When I copy the code and paste it on js fiddle it works fine. 当我复制代码并将其粘贴到js小提琴上时，它工作正常。
I'm new to coding and my experience with meteor is very little so I'm sure I'm missing something and its holding up progress to everything else. 我是编码的新手，我在流星方面的经验很少，因此我确定我缺少某些东西，并且阻碍了其他所有方面的发展。 http://jsfiddle.net/brendanjackson/bf7m7oao/3/ 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>";
}
I'm aware that I don't really use meteor the way it was intended but I'm just not on that level yet and I wanted to get familiar with the API and use it for testing. 我知道我并没有真正按照预期的方式使用流星，但是我还没有达到这个水平，我想熟悉API并将其用于测试。 I just want to get my button to work the way it does on JS fiddle while using Meteor(and understand how). 我只想让我的按钮在使用Meteor时像在JS小提琴上一样工作（并了解操作方法）。 Is there anyone out there who can help me figure this out? 有没有人可以帮助我解决这个问题？
PS:I'm trying to get better at asking questions on this site so any help with that in addition to my problem would be greatly appreciated. PS：我正在努力提高在本网站上提问的能力，因此，除我的问题外，对此的任何帮助将不胜感激。 Thank you very much! 非常感谢你！
3 个解决方案
解决方案1
2 2015-10-07 03:45:41
Brendan, 布伦丹，
What you need to do is put your HTML in a template in an .html file, something like this: 您需要做的是将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>
...and then in the corresponding *.js file, create a: ...然后在相应的* .js文件中，创建一个：
Template.brendansTemplate.events({
'click #btnBrendan': function() {
var myText = document.getElementById('myText');
var inputtext = document.getElementById('inputtext').value ;
myText.innerHTML += "<li>"+inputtext+"</li>"; }
});
I recommend you read some of the Meteor info from here . 我建议您从这里阅读一些流星信息。 Enjoy learning Meteor - I think it's a great framework. 享受学习流星-我认为这是一个很好的框架。
解决方案2
0 2015-10-07 02:56:08
This has nothing to do with meteor but you can wrap your function in script tags like so: 这与流星无关，但是您可以将函数包装在脚本标签中，如下所示：
<script>
function buttonClicked() {
var myText = document.getElementById('myText');
var inputtext = document.getElementById('inputtext').value ;
myText.innerHTML += "<li>"+inputtext+"</li>";
}
</script>
That should allow your javascript to function even if you don't use meteor. 即使您不使用流星，这也应该允许您的JavaScript正常运行。
解决方案3
0 2015-10-07 03:51:22
A more Meteoric way: 更流星的方式：
html HTML
Wrap your html in a template . 将html包装在模板中 。 Meteor will provide the <html> and <body> sections by itself. 流星将单独提供<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: JS：
Template.myTemplate.events({
'click button': function(ev){
var myText = document.getElementById('myText');
var inputtext = document.getElementById('inputtext').value;
myText.innerHTML += "<li>"+inputtext+"</li>";
}
});
To be even more meteoric one could use Sesssion variables and helper functions instead of manipulating the DOM directly. 要变得更加Sesssion ，可以使用Sesssion变量和辅助函数，而不是直接操作DOM。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.