ContentChange

HTML

<!-- formating for the table made using http://www.tablesgenerator.com/html_tables# -->
<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-yw4l{vertical-align:top}
</style>
<!-- START OF THE TABLE-->
<table class="tg">
  <tr>
    <th class="tg-yw4l">Yneno</th>
    <th class="tg-yw4l">Opnnnrahn</th>
    <th class="tg-yw4l">6yka</th>
    <th class="tg-yw4l">Ubisoft</th>
  </tr>
  <tr>
    <td class="tg-yw4l"><img id="0" src="http://www.coca-colaproductfacts.com/content/dam/productfacts/us/productDetails/ProductImages/Sprite_20oz_v2.png" alt="Get a new browser"></td>
    <td class="tg-yw4l"><img id="1" src="https://d2wvksc3i53c0p.cloudfront.net/media/wysiwyg/coke-zero-martin.png"></td>
    <td class="tg-yw4l" id="2">
      <ul>
        <li>I do </li>
        <li>not speak</li>
        <li>Russian</li>
      </ul>
    </td>
    <td class="tg-yw4l"><img  id="3" src="https://68.media.tumblr.com/5458c4fbda1c8416a922bd727c0d8a53/tumblr_o52smtfBmm1slwrsuo1_400.gif" alt="get a new browser"></td>
  </tr>
  <button id="myButton">Touch me</button>
  <script></script>
</table>

JavaScript

// First we store all the pictures and rescources in an array 
var rescources = new Array(3);
rescources[0] = 'http://www.coca-colaproductfacts.com/content/dam/productfacts/us/productDetails/ProductImages/Sprite_20oz_v2.png" alt="Get a new browser';
rescources[1] = 'https://d2wvksc3i53c0p.cloudfront.net/media/wysiwyg/coke-zero-martin.png' ;
rescources[2] = ' <ul><li>I do<\li><li> however speak<\li> <li>German</li></ul>';
rescources[3] = 'https://68.media.tumblr.com/5458c4fbda1c8416a922bd727c0d8a53/tumblr_o52smtfBmm1slwrsuo1_400.gif';
function changeContent()
{
  // randomly select a container and a rescource using a integer random generator. Note* inclusive of minimum exclusive of maximum
  var min = 0; 
  var max = 4;
	var randomlySelectedContainer =  Math.floor( Math.random() * (max - min) + min ); 
  var randomlySelectedRescource = Math.floor(  Math.random() * (max - min) + min );
  console.log(randomlySelectedContainer + " "+randomlySelectedRescource );
  if (randomlySelectedContainer != 2)
  {
  		document.getElementById(randomlySelectedContainer).src = rescources[randomlySelectedRescource];
  }
  else
  {
    	document.getElementById(randomlySelectedContainer). innerHTML = rescources[2];
  }
  	
 
  
}


document.getElementById('myButton').addEventListener('click', changeContent);