how to style the variable on JS without DOM

Question

I'm about to style the "newResult" with green if passed and red if failed. I'm confused how to style them since the "newResult" is not DOM.

@param {string} idIn

function checkId(idIn) { 
  let isIDin = false;
  let regexID = /^n|N[0-9]{8}$/i;

  if (regexID.test(idIn)) {
      isIDin = true;
  }
   return isIDin;
}

function test__checkId(valueIn, expected){
   let result = checkId(valueIn);
   var newResult;

//Print out value we are testing, and result of the function, and our expectation.
   if (result){
    newResult="==PASSED==";
   } else {
    newResult="XXFAILEDXX";
   }

let msg = "Value tested: " + valueIn + " | Expected result: " + expected + " " + newResult + "
";

 document.getElementById("data").innerHTML+=msg;
} 

//TIME TO RUN OUR UNIT TEST FUNCTION ON OUR checkHumberID FUNCTION...
test__checkId("n99999999",true); //boundary testing
test__checkId("n00000000",true); //boundary testing
test__checkId("ASFASDF",true); //boundary testing

user_14672005 · Answer

You can make use of JavaScript template literals, ternary/conditional operator and inline CSS to accomplish what you're looking for.

The syntax might look confusing at first look, but it does the job.

let msg = "" ;
msg+=`Value tested:"${valueIn}" | Expected result:"${expected}" "${newResult == "==PASSED==" ? "==PASSED==":"XXFAILEDXX"} 
` ;
                                                                                                         
document.getElementById("data").innerHTML+=msg;

user_157247 · Answer

You're building an HTML string, so it's simple enough to wrap newResult in a span with a class to set its color using CSS.

let msg = "Value tested: " + valueIn + " | Expected result: " + expected + " " + newResult + "
";
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^−−−−−−−−−−−−−−−−^^^^^^^^

Then add the styling for .pass and .fail to your CSS.

user_4797603 · Answer

The DOM represents an HTML document in memory. MDN's Introduction to the DOM clarifies:

The DOM is not part of the JavaScript language, but is instead a Web API used to build websites. JavaScript can also be used in other contexts. For example, Node.js runs JavaScript programs on a computer, but provides a different set of APIs, and the DOM API is not a core part of the Node.js runtime.

The DOM APIs are baked in to browsers whereas add-on packages are available for nodejs.

Once you have the DOM API's available, it's simply a matter of creating whatever elements you want in memory like document.createElement("div"); then you add them to your HTLM document whenever you want using methods like .appendChild.

how to style the variable on JS without DOM

3 Answers