How to make the output of multiple JavaScript functions display in HTML?

507 Views Asked by At

So I'm trying to display the results of a few function calls in a JavaScript file that uses benchmark.js in a separate HTML file. My js file looks something like this (disregard the names of methods and classes):

class.init(function(context) {

    Benchmark("function description", {
        'defer': true,

         fn': function(deferred) {
         var x = context.ones([100, 100]);
         var y = x.repeat(2, 0);
         context.barrier(function (){
             deferred.resolve();
          });
    },
    'onComplete': function(event) {
    //This is what I'd like to print out
    console.log(this.name + ": " + (this.stats.mean * 1000).toFixed(2) + " ms");
    //
    } 
}).run();

There are multiple function calls similar to this.

My HTML just looks something lile:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <title> Sublime Webpage </title>

    </head>
    <body>
        <div class="main">
          <div class="head">
             <h1>Hello</h1>

          </div>
          <script src="filename.js"></script>
        </div>
    </body>
</html>

At the moment, it just prints the results to the console, which is better than nothing, but obviously not what I want. I talked to someone briefly and they suggested I use jQuery. I looked into it, and tried using document.write(this.name + ": " + (this.stats.mean * 1000).toFixed(2) + " ms") in the place of console.log(), but this didn't seem to work. Does anyone have suggestions?

1

There are 1 best solutions below

1
On

Use document.createTextNode:

// add an output div to your html
<div id='output'></div>

// in your benchmark code
var output = document.getElementById('output');
output.appendChild(document.createTextNode('some result'));

Fiddle