I have a HTML text element ex: an H1 tag called VIDEOS. Is there any way to use JS to randomly manipulate the capitalization of the text? So for instance on one instance it loads the text as viDEoS, on another it loads ViDeos and so on.

Each letter essentially randomly changes between uppercase & lowercase

I have a HTML text element ex: an H1 tag called VIDEOS. Is there any way to use JS to randomly manipulate the capitalization of the text? So for instance on one instance it loads the text as viDEoS, on another it loads ViDeos and so on.

Each letter essentially randomly changes between uppercase & lowercase

• javascript
• html

• 1 Do you at least have the code needed to get hold of the element? What part of this are you stuck on? – James Thorpe Commented Apr 24, 2017 at 10:24
• This might be a good start w3schools./jsref/jsref_touppercase.asp – kalsowerus Commented Apr 24, 2017 at 10:25

2 Answers 2

Possible solution.

var elem = document.getElementById('vid');

elem.textContent = elem.textContent.split('').map((v) =>
  Math.round(Math.random()) ? v.toUpperCase() : v.toLowerCase()
).join('');

<h1 id='vid'>videos</h1>

$('.randomize').each(function() {
  var _word = $(this).html();
  var _arr = _word.split('');
  var _store = '';
  var _style = '';
  
  $(this).html('');
  
  for (var i = 0, len = _arr.length; i < len; i++) {
    if((Math.floor(Math.random() * 2) + 1) === 1) {
      _style = 'uppercase';
    }
    else {
      _style = 'lowercase';
    }
    
    _store = _store + '<span style="text-transform: '+ _style +' ;">' + _arr[i] + '</span>';
  }
  
  $(this).html(_store);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1 class="randomize">Videos</h1>