How can I use mongo data in javascript

0

Code:

html:

<template name="teams">
<head>
        <title> CastleWars </title>
        <link rel="icon" href="https://img00.deviantart.net/4b4c/i/2014/272/6/1/3d_fantasy_castle_stock_parts__28_palace_kingdom_by_madetobeunique-d80t3bo.png">
       </head>

       <body>


        <!-- musica de fundo -->
          {{showChat}}

        <!-- Barra Topo -->

        <div class="top">
          <!--slidebar -->
            <div id="mySidenav" class="sidenav">
                <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                {{#if currentUser}}  <a href="{{pathFor 'play'}}">Jogar</a>
                <a href="{{pathFor 'userstatus'}}">Dados</a>{{/if}}
                <a href="{{pathFor 'main'}}">Início</a>
              </div>

              <!-- Use any element to open the sidenav --><span onclick="openNav()"><img class= "img1" src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-256.png"width="50px" height="50px"/></span>
              <script>

                  function openNav() {
                    document.getElementById("mySidenav").style.width = "250px";
                  }

                  function closeNav() {
                    document.getElementById("mySidenav").style.width = "0";
                  }
              </script>

            <div class="login">
               {{> loginButtons align="right"}} &nbsp; &nbsp;
            </div>
        </div>


       <!-- Corpo -->
        <div class="center" id="center">

       <!-- Galeria -->


          <div class="teams">
              <center>

              <h1>Equipas</h1>

              </center><br>
              <img class= "imgline" src="https://www.freeiconspng.com/uploads/line-png-32.png"width="100%" height="100px"/>
          </div>

          <div class= "logos">
            <center>
                <img class= "logo1" src="https://vignette.wikia.nocookie.net/gems-of-war/images/a/a3/Banner_Pridelands.png/revision/latest?cb=20180227112123"alt="White Village" width="15%" height="20%"/>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; 
                <img class= "logo2" src="https://vignette.wikia.nocookie.net/gems-of-war/images/1/19/Banner_Whitehelm.png/revision/latest?cb=20180226222906"alt="Forestvile" width="15%" height="20%"/>
              <br><br><br>
              {{#each redteam}} <label class="textoazul"> Membros: {{membros}} | Pontos: {{pontos}} </label> <input type="text" value={{pontos}} name="rget"> {{/each}} &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;
              {{#each yellowteam}} <label class="textoazul"> Membros: {{membros}} | Pontos: {{pontos}} </label> <input type="text" value={{pontos}} name="yget">{{/each}}

            </center>
          </div>
          <br><br><br><input type="button" class= "buttonmap" value="Verificar território"><br><br><br>

          {{#if showmap}}
          <center>
            <h1>Mapa das Conquistas</h1>
          </center><br><br>
            <img class= "imgline" src="https://www.freeiconspng.com/uploads/line-png-32.png"width="100%" height="100px"/>

            {{calcmap}}
          <form class="red" id="redmap"><h1></h1></form>
          <div class="map">
              <center><img class= "imgmap" src="https://data.whicdn.com/images/134220427/large.jpg"alt="Forestvile" width="600px" height="500px"/></center>
            </div>
            <form class="yellow" id="yellowmap"><h1></h1></form>
          <br><br><br><br><br><br>
          {{/if}}
        </div>

        <br><br><br>

       </body>
      </template>

js:

Template.teams.helpers({
  redteam: function () {
    return Collections.find({  nome: "Forestville"});
  },

  yellowteam: function () {
    return Collections.find({  nome: "White Vilage"});
  },


  showmap: function () {
    return Session.get('showmap')
  },


 })

 Template.teams.events({
 'click .buttonmap': function(event) {
  Session.set('showmap', true )
  event.preventDefault(); 
  var red = document.getElementById("redmap");
  var yellow = document.getElementById("yellowmap");
  var yget = event.target.yget.value;
  var rget = event.target.rget.value;

   console.log(yget)

   var totalr = (600*200) / 100
   var totaly = (600*100) / 200

   console.log("jdhajdfhjdshfjhsfjshfjdsfhjshfhdjf")
   console.log(totalr)

   red.style.width  = totalr;
   yellow.style.width  = totaly;

},
 });
    
asked by anonymous 17.05.2018 / 17:26

0 answers