CODEWITHSUNDEEP
javascripthtml
Irini K.
Irini K.

Reputation: 77

How to Add the results of a script in a html page?

Hello everyone and thank you for your time! I have a simple problem.. I have a javascript file and i want to embed this in a html page. Down, you will see this javascript file. At the end of this, i have this row:

console.log("percentage:",(counter/(data.length/4))*100)

This percentage i want to appear in an html file. How can i make it a script and then call it/appear it, from/in an html file?? Thank you so much in advance!My javascript file:

var t0= performance.now();
if (navigator.geolocation) {
var location_timeout = setTimeout("geolocFail()", 10000);

navigator.geolocation.getCurrentPosition(function(position) {
    clearTimeout(location_timeout);

    var lat = position.coords.latitude;
    var lng = position.coords.longitude;

    geocodeLatLng(lat, lng);
}, function(error) {
    clearTimeout(location_timeout);
    geolocFail();
   });
   } else {
   // Fallback for no geolocation
   geolocFail();
   }

   getBase64FromImageUrl("https://maps.googleapis.com/maps/api/streetview?
   location=lng,lat&size=300x300&pitch=90")

   function getBase64FromImageUrl(url) {
   var img = new Image();
   var range = 60;
   img.setAttribute('crossOrigin', 'anonymous');

   img.onload = function () {
   var canvas = document.createElement("canvas");
   canvas.width =this.width;
   canvas.height =this.height;

   var ctx = canvas.getContext("2d");
   ctx.drawImage(this, 0, 0);
   var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

   //console.log("imageData",imageData);
   //var dataURL = canvas.toDataURL("image/png");
   var index = (150*imageData.width + 150) * 4;
   var red = imageData.data[index];
   var green = imageData.data[index + 1];
   var blue = imageData.data[index + 2];
   var alpha = imageData.data[index + 3];
   console.log(red)
   console.log(green)
   console.log(blue)
   var rangedRB = red -range;
   var rangedGB = green -range;
   var rangedBB = blue -range;

    var rangedRT = red +range;
    var rangedGT = green +range;
    var rangedBT = blue +range;

    var data = imageData.data;
    var counter = 0;
    for(var i=0; i<data.length; i+=4) {
    var red = data[i];
    var green = data[i+1];
    var blue = data[i+2];
    if ((red<rangedRT && red>rangedRB) && (green<rangedGT && green>rangedGB) 
    && (blue<rangedBT && blue>rangedBB)){
    counter = counter +1;
    console.log("counter",counter)
     }
     }
     console.log("counterFinal",counter)
     console.log("data.length",data.length/4)
     console.log("percentage:",(counter/(data.length/4))*100)

     //console.log(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
     // alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
     var t1 = performance.now();
     console.log("The estimated time is:",t1-t0,"milliseconds")
      };

      img.src = url;
      }

Upvotes: 1

Views: 465

Answers (2)

Alan
Alan

Reputation: 46823

First, update your script so it's encapsulated as a function. Stylistically you can choose to break it further apart, but at the very least, a function is better than having a script that operates in the global space.

function getGeolocationResult() {
  // script code goes here.

  return (counter / (data.length/4)*100); 
}

Then to embed it into an HTML page:, the most simple solution is to use Javascript, appendChild, and createElement

//caveat, not tested!
<html>
 <body>
  <div id='mydiv'></div>

   <script src='yourscript.js'></script>
   <script type='javascript'>
     function showPercentage() {
       var result = getGeolocationResult();
       var elm = document.getElementById('mydiv');
       var d = document.createElement('div');
       d.innerText = result;
       elm.appendChild(d);
     }

     // since you don't need to wait for the entire page to load 
     // (i.e. css and/or image tags, DOMContentLoaded should suffice. 
     // If you need to wait, use window.addEventListent('load',...) instead.
     document.addEventListener("DOMContentLoaded", showPercentage);
   </script>
  </body>
</html>

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

Upvotes: 1

Federico klez Culloca
Federico klez Culloca

Reputation: 27119

Depends on where you want it to appear in the HTML. Basically you'll have an element in which you'll put the result. For example in your page you may have a span with id "result" and put it in there via its innerHTML property.

document.getElementById('result').innerHTML = "percentage: " + (counter/(data.length/4))*100

Upvotes: 0

Related Questions