Displaying Javascript function variable to HTML using a button

Question

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.

you should avoid inline JavaScript; instead, attach an event handler: document.getElementById("buttonId").onclick = yourFunction — royhowie
– royhowie, Commented Apr 28, 2015 at 4:11

tonesforchris · Accepted Answer · 2015-04-28 04:03:06Z

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>

iceraj · Accepted Answer · 2015-04-28 03:54:55Z

1

Your script is missing: function calculateWifiSpeed().

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

answered Apr 28, 2015 at 3:54

iceraj

3591 silver badge5 bronze badges

Comments

Arun P Johny · Accepted Answer · 2015-04-28 03:46:51Z

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 />";
        }
    }
}

skazska · Accepted Answer · 2015-04-28 04:12:57Z

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

Collectives™ on Stack Overflow

Displaying Javascript function variable to HTML using a button

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related