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

Share Improve this question Follow asked Apr 24, 2017 at 10:23 user3886632user3886632 8733 silver badges99 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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>