|
/* DOM manipulation methods */ |
|
|
|
/** |
|
* Set the html/text of a DOM element by paassing an id and string to the method |
|
* |
|
* id - string - The id of the dome element |
|
* html - string - The text and or html string to add the DOM |
|
*/ |
|
function setDomText(id, html){ |
|
try { |
|
let el = document.getElementById(id); |
|
el.innerHTML = html; |
|
} catch(err){ |
|
throw err; |
|
} |
|
} |
|
/** |
|
* Add a click listener to a DOM element by ID string |
|
* |
|
* id - string - The id of the dome element |
|
* func - function - A function to attach to the DOM element |
|
*/ |
|
function setOnClick(id, func){ |
|
try { |
|
let el = document.getElementById(id); |
|
el.addEventListener("click", func, false); |
|
} catch(err){ |
|
throw err; |
|
} |
|
} |
|
|
|
/* |
|
Functional code that can be separated and unit tested. The methods above can stubbed |
|
or mocked in the unit test for the code below. |
|
*/ |
|
|
|
/** |
|
* Reset the the DOM element to the previous text |
|
*/ |
|
function resetTextArea(){ |
|
setDomText("js-text-area","Add Text Here"); |
|
} |
|
/** |
|
* Add new test to the DOM element |
|
*/ |
|
function addTextToDomHandler(){ |
|
setDomText("js-text-area", "<span style='color: darkred;'>Test adding text and html to the dom!</span>"); |
|
} |
|
|
|
/* These are the method that you might add to a main.js file or the stript tag */ |
|
|
|
/** |
|
* Add click listener to the add text button |
|
*/ |
|
setOnClick("js-add-text", addTextToDomHandler); |
|
/** |
|
* Add click listener to the reset button |
|
*/ |
|
setOnClick("js-reset-text", resetTextArea); |