CODEWITHSUNDEEP
javascriptmeteor
Brendan Jackson
Brendan Jackson

Reputation: 315

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. When I copy the code and paste it on js fiddle it works fine.

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/

<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. I just want to get my button to work the way it does on JS fiddle while using Meteor(and understand how). 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. Thank you very much!

Upvotes: 1

Views: 132

Answers (3)

Michel Floyd
Michel Floyd

Reputation: 20226

A more Meteoric way:

html

Wrap your html in a template. Meteor will provide the <html> and <body> sections by itself.

<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>";
  }
});

To be even more meteoric one could use Sesssion variables and helper functions instead of manipulating the DOM directly.

Upvotes: 0

B. Clay Shannon-B. Crow Raven
B. Clay Shannon-B. Crow Raven

Reputation: 10247

Brendan,

What you need to do is put your HTML in a template in an .html file, something like this:

<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:

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.

Upvotes: 2

Blake
Blake

Reputation: 641

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.

Upvotes: 0

Related Questions