0
299
Viewscómo diseñar la variable en JS sin DOM
Estoy a punto de diseñar el "nuevo resultado" con verde si pasa y rojo si falla. Estoy confundido sobre cómo diseñarlos ya que el "nuevo resultado" no es 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 testing3 answers
Answer question0
Puede hacer uso de literales de plantilla de JavaScript, operador ternario/condicional y CSS en línea para lograr lo que está buscando.
La sintaxis puede parecer confusa a primera vista, pero cumple su función.
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; 
0
Está creando una cadena HTML, por lo que es lo suficientemente simple como para envolver newResult en un span con una clase para establecer su color usando CSS.
let msg = "Value tested: " + valueIn + " | Expected result: " + expected + " <span class='" + (result ? "pass" : "fail") + "'>" + newResult + "</span><br />"; // −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^−−−−−−−−−−−−−−−−^^^^^^^^ Luego agregue el estilo para .pass y .fail a su CSS.
0
El DOM representa un documento HTML en la memoria. La Introducción de MDN al DOM aclara:
El DOM no es parte del lenguaje JavaScript, sino que es una API web que se utiliza para crear sitios web. JavaScript también se puede utilizar en otros contextos. Por ejemplo, Node.js ejecuta programas JavaScript en una computadora, pero proporciona un conjunto diferente de API, y la API DOM no es una parte central del tiempo de ejecución de Node.js.
Las API DOM están integradas en los navegadores, mientras que los paquetes complementarios están disponibles para nodejs.
Una vez que tenga la API DOM disponible, es simplemente cuestión de crear los elementos que desee en la memoria, como document.createElement("div"); luego los agrega a su documento HTLM cuando lo desee utilizando métodos como .appendChild .