CODEWITHSUNDEEP
javascript
Michie
Michie

Reputation: 81

how to style the variable on JS without DOM

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 + "<br />";

 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

Upvotes: 1

Views: 274

Answers (3)

Ashish Pradhan
Ashish Pradhan

Reputation: 80

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==" ? "<span style='color:green ;font-weight:bold'>==PASSED==</span>":"<span style='color:red ;font-weight:bold'>XXFAILEDXX</span>"} <br>` ;
                                                                                                         
document.getElementById("data").innerHTML+=msg;

OutPut

VS code picture

Upvotes: 1

Ronnie Smith
Ronnie Smith

Reputation: 18595

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.

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1075199

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 + " <span class='" + (result ? "pass" : "fail") + "'>" + newResult + "</span><br />";
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^−−−−−−−−−−−−−−−−^^^^^^^^

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

Upvotes: 0

Related Questions