Category: JavaScript Dev Tools

//dynamically add 20 years from this year to drop-down

      var select = document.getElementById(“ccexp”);

      var startYear = new Date().getFullYear();

      var option, currentYear, currentYearString, currentYearTwoDigit;

      for (var i = 0; i <= 20; i++) {

          currentYear = startYear + i;

          currentYearString = currentYear.toString();

          currentYearTwoDigit = currentYearString.substring(2);

          option = document.createElement(“option”);

          option.setAttribute(“value”, currentYearTwoDigit);

          option.appendChild(document.createTextNode(currentYear));

          select.appendChild(option);

      }

Javascript to append options to a select element

I have a table with elements in it. I need to target them and change the css class.

<div class="dwtooltip"><img src="note_icon.png" /><span class="dwtooltiptext">my tooltip text here.</span></div>

const items = document.querySelectorAll(‘.dwtooltip’);
if(items){

}
for (var i=0; i < items.length; i++) {
console.log(i);
items.forEach(function(el){
el.classList.add(“notooltip”);
el.classList.remove(“dwtooltip”);
});
}

To change all classes for an element:

To replace all existing classes with one or more new classes, set the className attribute:

document.getElementById("MyElement").className = "MyClass";

(You can use a space-delimited list to apply multiple classes.)

To add an additional class to an element:

To add a class to an element, without removing/affecting existing values, append a space and the new classname, like so:

document.getElementById("MyElement").className += " MyClass";

To remove a class from an element:

To remove a single class to an element, without affecting other potential classes, a simple regex replace is required:

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* code wrapped for readability - above is all one statement */

An explanation of this regex is as follows:

(?:^|\s) # match the start of the string, or any single whitespace character

MyClass  # the literal text for the classname to remove

(?!\S)   # negative lookahead to verify the above is the whole classname
         # ensures there is no non-space character following
         # (i.e. must be end of string or a space)

The g flag tells the replace to repeat as required, in case the class name has been added multiple times.

To check if a class is already applied to an element:

The same regex used above for removing a class can also be used as a check as to whether a particular class exists:

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )

Here is a regular expression that will match the numbers at the end of the string and return an array with the match it made.

var mystringwithnumbersatend="mycoolname32";

var thenumbersmatch = mystringwithnumbersatend.match(/\d+$/);

if(thenumbersmatch){number=thenumbersmatch [0];}

To use the number in a calculation, make sure to parse it:

number=parseInt(number, 10);

If you ever need to strip out quotes from a string, here is a handy Regular Expression. This will remove any single or double quotes from the var str.

function delquote(str){return (str=str.replace(/[“‘]{1}/gi,””));}

 

Example:

str=”My string’s really “quoted”, eh?;

delquote(str); // returns My strings really quoted, eh?