I am new to odoo, so please pardon if the question goes silly. I am trying to display latitude and longitude using a JS script. I'll need to fetch them for future use. I wanted them to get displayed in the text field and save them in my odoo form, But they are displayed in some random field.  If my approach is wrong please let me know the correct way, i'll surely implement that immediately.  

This is my view.xml file.

<record model="ir.ui.view" id="mobile_attendance.form">

      <field name="name">mobile_attendance form</field>

      <field name="model">mobile_attendance.mobile_attendance</field>

      <field name="arch" type="xml">

        <form id="geo_form">

          <sheet>

            <separator string="" colspan="4" col="6"/>

              <group string="Log Your Attendance">

                <field name="employee"/>

                <field name="datetime"/>

                <p id="demo1">

                  <field name="latitude"/>

                  <field name="longitude"/>

                </p>  

                <field name="google_map_partner" widget="map"/>

                <div>

                  <template id="geolocate" inherit_id="web.assets_backend" name="GeoLocation">

                    <xpath expr="." position="inside">

                      <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> -->

                      <script type="text/javascript" xmlns:h="http://www.w3.org/1999/xhtml">

                        <![CDATA[

                        "use strict";

                        alert('Hello');

                        var x = document.getElementById("demo1").onclick = function() 

                        {getLocation()};

                        function getLocation()

                        {

                          if (navigator.geolocation) 

                          {

                            navigator.geolocation.getCurrentPosition(showPosition);

                          }

                          else

                          {

                            x.innerHTML = "Geolocation is not supported by this browser.";

                          }

                        }

                        function showPosition(position)

                        {

                          x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; 

                          latitude = position.coords.latitude<br>;

                          longitude = position.coords.longitude;

                          // trying to print location.

                          document.getElementById("latitude").innerHTML = position.coords.latitude;

                          document.getElementById("longitude").innerHTML = position.coords.longitude;

                          //console.log(latitude);

                          //console.log(longitude);

                          }

                        ]]>

                      </script>

                    </xpath>

                  </template>

                  <button id="add_location" onclick="geolocate" string="Add Location" class="oe_highlight" type="object"/>

                </div>

              </group>

          </sheet>

        </form>

      </field>

    </record>

This is my python file.

import json

from odoo import models, fields, api

from odoo.tools import DEFAULT_SERVER_DATETIME_FORMAT

from datetime import datetime

class mobile_attendance(models.Model):

    _name = 'mobile_attendance.mobile_attendance'

    def _default_employee(self):

        return self.env['hr.employee'].search([('user_id', '=', self.env.uid)], limit=1)

    employee = fields.Many2one('hr.employee', string="Employee", default=_default_employee, required=True, ondelete='cascade', index=True)

    datetime = fields.Datetime('Datetime', default=lambda self: fields.Datetime.now(), readonly=True)

    latitude = fields.Char(string='Geo Latitude', digits=(16,5))

    longitude = fields.Char(string='Geo Longitude', digits=(16,5))

    google_map_partner = fields.Char(string="Map")

I see this error after the js is being loaded.

Uncaught TypeError: Cannot set property 'onclick' of null

I have added google map from now because, I also need to display those latitude and longitude on the google map.