petey

Onclick Javascript Function Not Working in Webviewer

Discussion created by petey on Feb 19, 2018
Latest reply on Feb 28, 2018 by sam_oda

Environment

Mac OS High Sierra 10.12.6

Filemaker Pro Advanced 16.0.4.403

 

Goal
1. Webviewer using Javascript to run a stopwatch.
2. Grab the total time once complete.

 

Details

When I link to a local text file, it works fine. When I paste the html below in webviewer, the javascript doesn't work.

 

Any ideas?

 

HTML

 

data:text/html,

<head>

 

<style>

body {

  color: #FFFFFF;

  background: #343434;

  text-align: center ;

  font-size: 10pt;

}

#start {

  margin: 20px auto;

  text-align: center;

  font-size: 10pt;

  color: #FFFFFF;

  background: #66B132;

  border:solid 0px #66B132;

  border-radius:5px;

  padding:10px 20px 10px;

  letter-spacing: 1px;

  cursor:pointer;

}

#stop {

  margin: 20px 5px auto;

  text-align: center;

  font-size: 10pt;

  color: #FFFFFF;

  background: #FF2712;

  border:solid 0px #FF2712;

  border-radius:5px;

  padding:10px 20px 10px;

  letter-spacing: 1px;

  cursor:pointer;

}

#reset {

  margin: 20px auto;

  text-align: center;

  font-size: 10pt;

  color: #000000;

  background: #FFFFFF;

  border:solid 0px #FFFFFF;

  border-radius:5px;

  padding:10px 20px 10px;

  letter-spacing: 1px;

  cursor:pointer;

}

h2

{

  font-size: 46px;

  letter-spacing: 2px;

  margin: 200px 0 0 ;

}

</style>

 

</head>

 

<body>

 

<h1><time>00:00:00</time></h1>

<button id='start'>start</button>

<button id='stop'>stop</button>

<button id='reset'>reset</button>

 

<script type='text/javascript'>

 

start.onclick = function () {

 

var h1 = document.getElementsByTagName('h1')[0],

    start = document.getElementById('start'),

    stop = document.getElementById('stop'),

    reset = document.getElementById('reset'),

    seconds = 0, minutes = 0, hours = 0,

    t;

 

function add() {

    seconds++;

    if (seconds >= 60) {

        seconds = 0;

        minutes++;

        if (minutes >= 60) {

            minutes = 0;

            hours++;

        }

    }

   

    h1.textContent = (hours ? (hours > 9 ? hours : '0' + hours) : '00') + ':' + (minutes ? (minutes > 9 ? minutes : '0' + minutes) : '00') + ':' + (seconds > 9 ? seconds : '0' + seconds);

 

    timer();

}

function timer() {

    t = setTimeout(add, 1000);

}

timer();

 

/* Start button */

start.onclick = timer;

 

/* Stop button */

stop.onclick = function() {

    clearTimeout(t);

}

 

/* Reset button */

reset.onclick = function() {

    h1.textContent = '00:00:00';

    seconds = 0; minutes = 0; hours = 0;

}

}

</script>

 

</body>

 

</html>

Outcomes