JSFiddle - React, Tailwind, and code Playground

by Angeli Schwartz

HTML

<b>Open your console to see the output from this code!</b>
<p>By using logMessage() to log messages throughout our code, we will only have to change the value of loggingPreference in one place to change the logging behavior everywhere in our application. </p>
<p>Here, on line 9, I've assigned the string <i>PAGE</i> to the <code>loggingPreference</code> variable.  If you assign any other value, the logging will go to the console, instead.</p>
<div id="output"></div>

JavaScript

"use strict";

// We'll set a logging preference here

// By default we log to the console, but if we set loggingPreference to PAGE, we log to the #output element. 
// If you set it to anything else, the logging will go to the console.
var loggingPreference = 'PAGE';

//simple fuction to log messages to the console or the web page
// accepts the message to log
// returns nothing
function logMessage(myMessage){
    if (loggingPreference == 'PAGE'){
        document.getElementById("output").innerHTML += "<br>" + myMessage;
    } else {
        console.log(myMessage);
    }
}

//call my function
logMessage("I am Sam");
logMessage("I am Bob");