LogToDiv

Develop class for logging the messages into div element

First let us consider only writing into div. Here we create the file on disc (e.g. div01.html) and open it with browser (in address we enter: file:///home/.../div01.html):

<!DOCTYPE html>

<meta charset=utf-8>

<html>

<head>

<title>Log into html div element</title>

</head>

<div id="print1">Test text A</div>

</body>

</html>

Preview should be like seen here (notice three slashes in address file:/// ):

The text could be added by function innerHtml in javascript:

<!DOCTYPE html>

<meta charset=utf-8>

<html>

<head>

<title>Log into html div element</title>

</head>

<div id="print1">Test text A</div>

<script type="text/javascript">

"use strict"; // in order to use clasess

var divElement = document.getElementById("print1"); // variable for div object where the values will be printed (logged)

divElement.innerHTML += "<div>" + "Test text B" + "</div>"; // we print it to div

</script>

</body>

</html>

By adding additional line:

divElement.innerHTML += "<div>" + "Test text C" + "</div>"; // we print it to div

One would get:

Adding an input field to see the logging (enter some text into the field):

<!DOCTYPE html>

<meta charset=utf-8>

<html>

<head>

<title>Log into html div element</title>

</head>

Enter text for log:

<input type="text" id="inputvalue" onkeypress="if(event.keyCode == 13){printToDiv()}" />

<br>

<br>

Print out:

<br>

<div id="print1"></div>

<script type="text/javascript">

"use strict"; // in order to use clasess

var divElement = document.getElementById("print1"); // variable for div object where the values will be printed (logged)

function log(msg) {

    divElement.innerHTML += "<div>" + msg + "</div>"; // we print it to div

function printToDiv () {

    var valueFromTheInputField = document.getElementById("inputvalue").value;

    log(valueFromTheInputField);

    document.getElementById("inputvalue").value = ""; // clear the value in the input field

</script>

</body>

</html>

Adding additional line to start with the focus in the input field (after line "strict"):1

document.getElementById("inputvalue").focus(); // set focus on input field at start

Instead of inputting the values by hand the loop could be used:

<!DOCTYPE html>

<meta charset=utf-8>

<html>

<head>

<title>Log into html div element</title>

</head>

Print out:

<br>

<div id="print1"></div>

<script type="text/javascript">

"use strict"; // in order to use clasess

var time = 0;

var stopTime = 1000;

var divElement = document.getElementById("print1"); // variable for div object where the values will be printed (logged)

function log(msg) {

    divElement.innerHTML += "<div>" + msg + "</div>"; // we print it to div

function loop() {

    time++;

    log(Math.random().toFixed(5));

    var timerVar = setTimeout(loop, 300); // on 300ms we perform the function loop

    if (time >= stopTime) {clearTimeout (timerVar)};

loop(); // start function loop

</script>

</body>

</html>

This time the scroll function is implemented which scrolls the values; the latest value is always printed at top:

<!DOCTYPE html>

<meta charset=utf-8>

<html>

<head>

<title>Log into html div element</title>

</head>

Print out:

<br>

<div id="print1"></div>

<script type="text/javascript">

"use strict"; // in order to use clasess

var time = 0;

var stopTime = 1000;

var divId = "print1";

var divElement = document.getElementById(divId); // variable for div object where the values will be printed (logged)

var numberOfLinesBeforeScroll = 10; // number of lines which print before scroll

var linesPrintCounter = 0;

function log(msg) { // function for printout of the messages with scroll functionality

    var node=document.createElement("tr"); // we create the variable node as the a table row (tr)

    var textnode=document.createTextNode(msg); // we create element with the text

    node.appendChild(textnode); // adding text to "node", i.e. table row

    divElement.insertBefore(node, divElement.childNodes[0]); // inserting into variable node

    if (linesPrintCounter > numberOfLinesBeforeScroll-1) { // if the lines are more than limit -> start with scroll

        divElement.removeChild(divElement.childNodes[numberOfLinesBeforeScroll]); // we remove the oldest printout

    linesPrintCounter++; // increasing the number of printouts

function loop() {

    time++;

    log(Math.random().toFixed(5));

    var timerVar = setTimeout(loop, 300); // on 300ms we perform the function loop

    if (time >= stopTime) {clearTimeout (timerVar)};

loop(); // start function loop

</script>

</body>

</html>

The counter is added to the left:

<!DOCTYPE html>

<meta charset=utf-8>

<html>

<head>

<title>Log into html div element</title>

</head>

Print out:

<br>

<div id="print1"></div>

<script type="text/javascript">

"use strict"; // in order to use clasess

var time = 0;

var stopTime = 1000;

var divId = "print1";

var divElement = document.getElementById(divId); // variable for div object where the values will be printed (logged)

var numberOfLinesBeforeScroll = 10; // number of lines which print before scroll

var linesPrintCounter = 0;

function log(msg) { // function for printout of the messages with scroll functionality

    var node=document.createElement("tr"); // we create the variable node as the a table row (tr)

    var textnode=document.createTextNode(linesPrintCounter + " | " + msg); // we create element with the text adding the counter

    node.appendChild(textnode); // adding text to "node", i.e. table row

    divElement.insertBefore(node, divElement.childNodes[0]); // inserting into variable node

    if (linesPrintCounter > numberOfLinesBeforeScroll-1) { // if the lines are more than limit -> start with scroll

        divElement.removeChild(divElement.childNodes[numberOfLinesBeforeScroll]); // we remove the oldest printout

    linesPrintCounter++; // increasing the number of printouts

function loop() {

    time++;

    log(Math.random().toFixed(5));

    var timerVar = setTimeout(loop, 300); // on 300ms we perform the function loop

    if (time >= stopTime) {clearTimeout (timerVar)};

loop(); // start function loop

</script>

</body>

</html>

This time the code is realised with the LogDiv class:

<!DOCTYPE html>

<meta charset=utf-8>

<!-- University of Maribor -->

<!-- Cybernetics & Decision Support Systems Laboratory -->

<!-- Faculty of Organizational Sciences -->

<!-- Andrej Škraba -->

<!-- 2019 -->

<html>

<head>

<title>Log into html div element</title>

</head>

Print out:

<br>

<div id="print1"></div>

<script type="text/javascript">

"use strict"; // in order to use clasess

var time = 0;

var stopTime = 1000;

var divPrint1; // variable for div object where the values will be printed (logged)

class LogDiv {

    constructor(divId, numberOfLinesBeforeScroll) {

        this.divElement = document.getElementById(divId); // name of div where values will be printed

        this.numberOfLinesBeforeScroll = numberOfLinesBeforeScroll; // number of lines which print before scroll

        this.linesPrintCounter = 0;

    log(msg) { // function for printout of the messages with scroll functionality

        var node=document.createElement("tr"); // we create the variable node as the a table row (tr)

        var textnode=document.createTextNode(this.linesPrintCounter + " | " + msg); // we create element with the text adding the counter

        node.appendChild(textnode); // adding text to "node", i.e. table row

        this.divElement.insertBefore(node, this.divElement.childNodes[0]); // inserting into variable node

        if (this.linesPrintCounter > this.numberOfLinesBeforeScroll-1) { // if the lines are more than limit -> start with scroll

            this.divElement.removeChild(this.divElement.childNodes[this.numberOfLinesBeforeScroll]); // we remove the oldest printout

        this.linesPrintCounter++; // increasing the number of printouts

function loop() {

    time++;

    divPrint1.log(Math.random().toFixed(5));

    var timerVar = setTimeout(loop, 300); // on 300ms we perform the function loop

    if (time >= stopTime) {clearTimeout (timerVar)};

divPrint1 = new LogDiv("print1", 10); // as the argument at the creation of the new object we declare the div name into which the printout of the log will be performed and the number of lines before the scroll

loop(); // start function loop

</script>

</body>

</html>

Which is convenient, if we have several printouts:

<!DOCTYPE html>

<meta charset=utf-8>

<!-- University of Maribor -->

<!-- Cybernetics & Decision Support Systems Laboratory -->

<!-- Faculty of Organizational Sciences -->

<!-- Andrej Škraba -->

<!-- 2019 -->

<html>

<head>

<title>Log into html div element</title>

</head>

First print (10 lines):

<div id="print1" style="border:1px dashed gray;"></div>

Second print (5 lines):

<div id="print2" style="border:1px dashed gray;"></div>

Third print (15 lines):

<div id="print3" style="border:1px dashed gray;"></div>

<script type="text/javascript">

"use strict"; // in order to use clasess

var time = 0;

var stopTime = 1000;

var divPrint1; // variable for div object where the values will be printed (logged)

var divPrint2; // variable for div object where the values will be printed (logged)

var divPrint3; // variable for div object where the values will be printed (logged)

class LogDiv {

    constructor(divId, numberOfLinesBeforeScroll) {

        this.divElement = document.getElementById(divId); // name of div where values will be printed

        this.numberOfLinesBeforeScroll = numberOfLinesBeforeScroll; // number of lines which print before scroll

        this.linesPrintCounter = 0;

    log(msg) { // function for printout of the messages with scroll functionality

        var node=document.createElement("tr"); // we create the variable node as the a table row (tr)

        var textnode=document.createTextNode(this.linesPrintCounter + " | " + msg); // we create element with the text adding the counter

        node.appendChild(textnode); // adding text to "node", i.e. table row

        this.divElement.insertBefore(node, this.divElement.childNodes[0]); // inserting into variable node

        if (this.linesPrintCounter > this.numberOfLinesBeforeScroll-1) { // if the lines are more than limit -> start with scroll

            this.divElement.removeChild(this.divElement.childNodes[this.numberOfLinesBeforeScroll]); // we remove the oldest printout

        this.linesPrintCounter++; // increasing the number of printouts

function loop() {

    time++;

    divPrint1.log(Math.random().toFixed(5));

    divPrint2.log((Math.random()*20).toFixed(5));

    divPrint3.log((Math.random()*100).toFixed(5));

    var timerVar = setTimeout(loop, 300); // on 300ms we perform the function loop

    if (time >= stopTime) {clearTimeout (timerVar)};

divPrint1 = new LogDiv("print1", 10); // as the argument at the creation of the new object we declare the div name into which the printout of the log will be performed and the number of lines before the scroll

divPrint2 = new LogDiv("print2", 5); // as the argument at the creation of the new object we declare the div name into which the printout of the log will be performed and the number of lines before the scroll

divPrint3 = new LogDiv("print3", 15); // as the argument at the creation of the new object we declare the div name into which the printout of the log will be performed and the number of lines before the scroll

loop(); // start function loop

</script>

</body>

</html>

As shown in the results of the above code (three divs logged at the same time; note application of class and objects; each object has different number of rows for logging):

Developed class will be applicable in further examples for interactive logging of different values from the server and Arduino.

Page updated

Google Sites

Report abuse