CODEWITHSUNDEEP
javascripthtml
LeslieKnowsBest
LeslieKnowsBest

Reputation: 43

Displaying Javascript function variable to HTML using a button

I'm trying to create a button that, when clicked, calls a Javascript function that will calculate the Wifi speed and then return that value in a text box below. I've been following this example code:

  Current Location: <BR>
  <button onclick="getLocation()">Locate</button>
  <p id="demo">
      Latitude: <input type="text" id="lat">
      Longitude: <input type="text" id="lon">
  </p>
 <script>
      function getLocation() {
          if (navigator.geolocation) {
              navigator.geolocation.getCurrentPosition(showPosition);
          } else { 
              x.innerHTML = "Geolocation is not supported by this browser.";
          }
  }

      function showPosition(position) {
          document.getElementById("lat").value = position.coords.latitude;
          document.getElementById("lon").value = position.coords.longitude;

  }
  </script>

And created this code for the wifi speed collection:

Current Wifi Speed: <BR>
  <button onclick="calculateWifiSpeed()">Calculate</button>
  <p id="demo">
      Wifi Speed: <input type="text" id="wifiSpeed">
  </p>
<script>
calculateWifiSpeed(){
 var imageAddr = "http://www.kenrockwell.com/contax/images/g2/examples/31120037-5mb.jpg"; 
    var downloadSize = 4995374; //bytes

    window.onload = function() {
        var oProgress = document.getElementById("progress");
        oProgress.innerHTML = "Loading the image, please wait...";
        window.setTimeout(MeasureConnectionSpeed, 1);
    };

    function MeasureConnectionSpeed() {
        var oProgress = document.getElementById("progress");
        var startTime, endTime;
        var download = new Image();
        download.onload = function () {
            endTime = (new Date()).getTime();
            showResults();
        }

        download.onerror = function (err, msg) {
            oProgress.innerHTML = "Invalid image, or error downloading";
        }

        startTime = (new Date()).getTime();
        var cacheBuster = "?nnn=" + startTime;
        download.src = imageAddr + cacheBuster;

        function showResults() {
            var duration = (endTime - startTime) / 1000;
            var bitsLoaded = downloadSize * 8;
            var speedMbps = (speedKbps / 1024).toFixed(2);
            document.getElementById("wifiSpeed").value = speedMbps;
            oProgress.innerHTML = "Your connection speed is: <br />" + speedMbps + " Mbps<br />";
        }
    }
 }

However, this button doesn't work and doesn't return anything.

Upvotes: 1

Views: 514

Answers (4)

skazska
skazska

Reputation: 421

Ok. you set onclick="getLocation()" in button, so, when clicked function getLocation will be executed which will try to detect location and then show coords or show message "geoloc is not supported" in x element (x should be defined somewhere to work) - here is no speed measurement and display of it's results is involved and so will not occur.

may be you try to run MeasureConnectionSpeed repeatedly so you should use setInterval instead of setTimeout, but there will be no any connection between button click and speed measurement, because button click try to locate position but speed measurement ocurs repeatedly unconditionally over some time interval.

In showResults seems like

     var speedKbps = bitsLoaded / duration

code line missing

Upvotes: 0

tonesforchris
tonesforchris

Reputation: 303

I went and fixed the issues stopping it running, I haven't double checked your logic though - i'll let you solve the rest!

<p id="progress"></p>

Current Wifi Speed: <BR>
<button onclick="calculateWifiSpeed()">Calculate</button>
<p id="demo">
  Wifi Speed: <input type="text" id="wifiSpeed">
</p>

<script>

var pageReady = false;

 window.onload = function() {
    pageReady = true;
 };

function calculateWifiSpeed() {
    var imageAddr = "http://www.kenrockwell.com/contax/images/g2/examples/31120037-5mb.jpg";
    var downloadSize = 4995374; //bytes

    function WaitForPageLoad() {
     if(pageReady) {
        setTimeout(MeasureConnectionSpeed, 1);
     }else{
        setTimeout(WaitForPageLoad, 500);
     }
    }

    function MeasureConnectionSpeed() {

        var oProgress = document.getElementById("progress");

        oProgress.innerHTML = "Loading the image, please wait...";

        var startTime, endTime;
        var download = new Image();
        download.onload = function () {
            endTime = (new Date()).getTime();
            showResults();
        }

        download.onerror = function (err, msg) {
            oProgress.innerHTML = "Invalid image, or error downloading";
        }

        startTime = (new Date()).getTime();
        var cacheBuster = "?nnn=" + startTime;
        download.src = imageAddr + cacheBuster;

        function showResults() {
            var duration = (endTime - startTime) / 1000;
            var bitsLoaded = downloadSize * 8;
            var speedKbps = (1 / duration) * bitsLoaded;
            var speedMbps = (speedKbps / 1024).toFixed(2);
            document.getElementById("wifiSpeed").value = speedMbps;
            oProgress.innerHTML = "Your connection speed is: <br />" + speedMbps + " Mbps<br />";
        }
    }

    setTimeout(WaitForPageLoad, 500);
 }

</script>

Upvotes: 1

iceraj
iceraj

Reputation: 359

Your script is missing: function calculateWifiSpeed().

The way you wrote it, you will get JS error.

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

Because you have the call to MeasureConnectionSpeed inside a onload handler, which is inside the button click handler, so by the time the button is clicked the window onload could be completed and your handler method may never get called.

Since you are initializing the test in a button click I think you can ignore the onload

function calculateWifiSpeed() {
    var imageAddr = "http://www.kenrockwell.com/contax/images/g2/examples/31120037-5mb.jpg";
    var downloadSize = 4995374; //bytes

    var oProgress = document.getElementById("progress");
    oProgress.innerHTML = "Loading the image, please wait...";
    window.setTimeout(MeasureConnectionSpeed, 1);

    function MeasureConnectionSpeed() {
        var oProgress = document.getElementById("progress");
        var startTime, endTime;
        var download = new Image();
        download.onload = function () {
            endTime = (new Date()).getTime();
            showResults();
        }

        download.onerror = function (err, msg) {
            oProgress.innerHTML = "Invalid image, or error downloading";
        }

        startTime = (new Date()).getTime();
        var cacheBuster = "?nnn=" + startTime;
        download.src = imageAddr + cacheBuster;

        function showResults() {
            var duration = (endTime - startTime) / 1000;
            var bitsLoaded = downloadSize * 8;
            var speedMbps = (speedKbps / 1024).toFixed(2);
            document.getElementById("wifiSpeed").value = speedMbps;
            oProgress.innerHTML = "Your connection speed is: <br />" + speedMbps + " Mbps<br />";
        }
    }
}

Upvotes: 0

Related Questions