How to return javascript code result to the polymer custom element's <template>?

Question

SOLVED

I took the answer that @akc42 posted below and I added var self = this; before getViews function definition and changed this to self in code (and added self to the ytr like that 100 / self.ytr as well)

/SOLVED

I'm trying to get view count from my youtube channel. All I want to do is to return calculated results back to the <p id="views"></p> and <p id="youtubeRequest"></p>.

I have this code:

<template>
   ...   
  <div>                      
      <p id="views" style="display:inline; ">100/Amount of views:</p>
      <p id="youtubeRequest" style="display:inline">Amount of views:</p>
  </div>
  ... 
</template>

 <script>
   Polymer({
     is: 'my-view1',

     ready: function()
     {
       function getViews(params) {
         $.ajax({
           url: "https://www.googleapis.com/youtube/v3/channels?part=statistics&key=MyAPIkeyHere",
           jsonp: "callback",
           dataType: "jsonp",
           success: function(response) {
             this.ytr = this.$.youtubeRequest.innerHTML = response.items[0].statistics.viewCount;
             var ytr2 = this.$.views.innerHTML = 100 / ytr;
             this.ytr3 = ytr2.toPrecision(1);
             },
         });
       }
       getViews()
    }
 </script>
</dom-module>

I'm using this.$.id instead of document.getElementById("youtubeRequest") since it is only used for accessing items outside of a Polymer element.

I need to bind calculated values to corresponding <p> tags

Answer 1

Your code above shows a closing </dom-module> but not the beginning. Are you trying to define a Polymer element.

If so you just use databinding. You can also use to do the ajax call, but lets get the other bit working first. Something like this

<dom-module id="my-view1">
<template>
   ...  

  <div>                      
      <p id="views" style="display:inline; ">Amount of views: [[ytr]]</p>
      <p id="youtubeRequest" style="display:inline">[[ytr3]]</p>
  </div>
  ... 
</template>

 <script>
   Polymer({
     is: 'my-view1',
    properties: {
        ytr: {
            type: Number,
            value: 0
        },
        ytr3: {
            type: Number,
            value: 0
        }
    },
     ready: function()
     {
       function getViews(params) {
         $.ajax({
           url: "https://www.googleapis.com/youtube/v3/channels?part=statistics&key=MyAPIkeyHere",
           jsonp: "callback",
           dataType: "jsonp",
           success: function(response) {
             this. ytr = this.$.youtubeRequest.innerHTML = response.items[0].statistics.viewCount;
             var ytr2 = this.$.views.innerHTML = 100 / ytr;
             this.ytr3 = ytr2.toPrecision(1);
             },
         });
       }
       getViews()
    }
 </script>
</dom-module>