title: How to call a javascript function with a css button?
body: <p>I am writing a script to color a text, the main idea is that when someone click in the button called: Change color1 then my text change its color, the code for this is the follow one:</p>
  
  <pre><code>&lt;button onclick="myFunction()"&gt;Change color1&lt;/button&gt;
  </code></pre>
  
  <p>That calls the next function:</p>
  
  <pre><code>function myFunction() {
      location.reload();
  }
  </code></pre>
  
  <p>I would like to achieve the same result with the button called: Change color2, that I created using css, the problem is that I don't know how to call the function that reload the page with this one.</p>
  
  <p>In the case of the first button its very clear how to achieve this by:</p>
  
  <pre><code>&lt;button onclick="myFunction()"&gt;Change color1&lt;/button&gt;
  </code></pre>
  
  <p>but with the second one I am not sure:</p>
  
  <pre><code>&lt;button class="button button1"&gt;Change color2&lt;/button&gt;
  </code></pre>
  
  <p>I tried:</p>
  
  <pre><code>&lt;button class="myFunction()"&gt;Change color2&lt;/button&gt;
  </code></pre>
  
  <p>But I failed, therefore I would like to fix this problem.</p>
  
  <p>my complete code looks like this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=windows-1252"&gt;&lt;script src="./code33_files/lodash.js"&gt;&lt;/script&gt; 
  &lt;/head&gt;&lt;body&gt;
  &lt;p id="demo"&gt;&lt;/p&gt;
  &lt;textarea cols="150" rows="15" id="texto" &gt;
  "RBD|X|RBD3|C|92173~GJHGWO.NAYE" "SAMBORNSiPOSSSTHRa1"
  "RBD|X|RBD|C|92173~GJHGX4.NAYE" "SAMBORNSiPOSSSTHRa"
  "RBD|X3|RBD3|C|92173~GJHGX6.NAYE" "SAMBORNSiPOSSSTHRa1"
  "RBD|X|RBD|C|92173~GJHGXA.NAYE" "SAMBORNSiPOSSSTHRa2"
  "RBD|X|RBD|C|92173~GJHGXA.NAYE" "SAMBORNSiPOSSSTHRa2"
  "RBD|X3|RBD|C|92173~GJHGXC.NAYE" "SAMBORNSiPOSSSTHRa"
  "RBD|X|RBD3|C|92173~GJHGWO.NAYE" "SAMBORNSiPOSSSTHRa1"
  "RBD|X|RBD|C|92173~GJHGX4.NAYE" "SAMBORNSiPOSSSTHRa"
  "RBD|X3|RBD3|C|92173~GJHGX6.NAYE" "SAMBORNSiPOSSSTHRa1"
  "RBD|X|RBD|C|92173~GJHGXA.NAYE" "SAMBORNSiPOSSSTHRa2"
  "RBD|X|RBD|C|92173~GJHGXA.NAYE" "SAMBORNSiPOSSSTHRa2"
  "RBD|X3|RBD|C|92173~GJHGXC.NAYE" "SAMBORNSiPOSSSTHRa"
  "RBD|X|RBD3|C|92173~GJHGWO.NAYE" "SAMBORNSiPOSSSTHRa1"
  "RBD|X|RBD|C|92173~GJHGX4.NAYE" "SAMBORNSiPOSSSTHRa"
  "RBD|X3|RBD3|C|92173~GJHGX6.NAYE" "SAMBORNSiPOSSSTHRa1"
  "RBD|X|RBD3|C|92173~GJHGWO.NAYE" "SAMBORNSiPOSSSTHRa1"
  "RBD|X|RBD|C|92173~GJHGX4.NAYE" "SAMBORNSiPOSSSTHRa"
  "RBD|X3|RBD3|C|92173~GJHGX6.NAYE" "SAMBORNSiPOSSSTHRa1"
  "RBD|X|RBD|C|92173~GJHGXA.NAYE" "SAMBORNSiPOSSSTHRa2"
  "RBD|X|RBD|C|92173~GJHGXA.NAYE" "SAMBORNSiPOSSSTHRa2"
  "RBD|X3|RBD|C|92173~GJHGXC.NAYE" "SAMBORNSiPOSSSTHRa"
  "RBD|X|RBD3|C|92173~GJHGWO.NAYE" "SAMBORNSiPOSSSTHRa1"
  "RBD|X|RBD|C|92173~GJHGX4.NAYE" "SAMBORNSiPOSSSTHRa"
  "RBD|X3|RBD3|C|92173~GJHGX6.NAYE" "SAMBORNSiPOSSSTHRa1"
  "RBD|X|RBD|C|92173~GJHGXA.NAYE" "SAMBORNSiPOSSSTHRa2"
  "RBD|X|RBD|C|92173~GJHGXA.NAYE" "SAMBORNSiPOSSSTHRa2"
  "RBD|X3|RBD|C|92173~GJHGXC.NAYE" "SAMBORNSiPOSSSTHRa"
  "RBD|X|RBD3|C|92173~GJHGWO.NAYE" "SAMBORNSiPOSSSTHRa1"
  "RBD|X|RBD|C|92173~GJHGX4.NAYE" "SAMBORNSiPOSSSTHRa"
  "RBD|X3|RBD3|C|92173~GJHGX6.NAYE" "SAMBORNSiPOSSSTHRa1"
  &lt;/textarea&gt;
  &lt;div id="out1"&gt;&lt;/div&gt;
  &lt;style&gt;
  body {background-color:blue;}
  #out1 {
    text-align: left;
    font-style: normal;
    font-weight: bold;
    font-size: 28px;
    white-space: pre;
    background-color: LightSlateGray;
    width: 1000px;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
  }
  .button {
      background-color: Green;
      border: 4px solid Cyan; 
      color: white;
      padding: 20px 60px;
      text-decoration: none;
      display: inline-block;
      font-size: 35px;
      margin: 4px 34px;
      cursor: pointer;
      border-radius: 20px;
      box-shadow: 0 8px 16px black;
  
  }
  
  &lt;/style&gt;
  
  &lt;button onclick="myFunction()"&gt;Change color1&lt;/button&gt;
  
  &lt;button class="button button1"&gt;Change color2&lt;/button&gt;
  &lt;script&gt;
  function myFunction() {
      location.reload();
  }
  var text = document.getElementById("texto").value;
  var splitWords = text.split(/[["\|~]/);
  var cleanArray  = _.remove(splitWords, function (word) {return word !== '' &amp;&amp; word !== ' ' &amp;&amp; word !== '\n'});
  var dict = cleanArray.reduce(function(p,c) {
      if (p[c] === undefined) {
          p[c] = 1;
      } else {
          p[c]++;
      }
      return p;
  },{});
  console.log(dict);
  var filtered = Object.keys(dict).reduce(function (filtered, key) {
      if (dict[key] &gt; 1) filtered[key] = dict[key];
      return filtered;
  }, {});
  var colorWords = Object.keys(filtered)
  colors = ["AliceBlue","AntiqueWhite","Aqua","Aquamarine","Azure","Beige","Bisque","Black","BlanchedAlmond","Blue","BlueViolet","Brown","BurlyWood","CadetBlue","Chartreuse","Chocolate","Coral","CornflowerBlue","Cornsilk","Crimson","Cyan","DarkBlue","DarkCyan","DarkGoldenRod","DarkGray","DarkGrey","DarkGreen","DarkKhaki","DarkMagenta","DarkOliveGreen","DarkOrange","DarkOrchid","DarkRed","DarkSalmon","DarkSeaGreen","DarkSlateBlue","DarkSlateGray","DarkSlateGrey","DarkTurquoise","DarkViolet","DeepPink","DeepSkyBlue","DimGray","DimGrey","DodgerBlue","FireBrick","FloralWhite","ForestGreen","Fuchsia","Gainsboro","GhostWhite","Gold","GoldenRod","Gray","Grey","Green","GreenYellow","HoneyDew","HotPink","IndianRed","Indigo","Ivory","Khaki","Lavender","LavenderBlush","LawnGreen","LemonChiffon","LightBlue","LightCoral","LightCyan","LightGoldenRodYellow","LightGray","LightGrey","LightGreen","LightPink","LightSalmon","LightSeaGreen","LightSkyBlue","LightSlateGray","LightSlateGrey","LightSteelBlue","LightYellow","Lime","LimeGreen","Linen","Magenta","Maroon","MediumAquaMarine","MediumBlue","MediumOrchid","MediumPurple","MediumSeaGreen","MediumSlateBlue","MediumSpringGreen","MediumTurquoise","MediumVioletRed","MidnightBlue","MintCream","MistyRose","Moccasin","NavajoWhite","Navy","OldLace","Olive","OliveDrab","Orange","OrangeRed","Orchid","PaleGoldenRod","PaleGreen","PaleTurquoise","PaleVioletRed","PapayaWhip","PeachPuff","Peru","Pink","Plum","PowderBlue","Purple","RebeccaPurple","Red","RosyBrown","RoyalBlue","SaddleBrown","Salmon","SandyBrown","SeaGreen","SeaShell","Sienna","Silver","SkyBlue","SlateBlue","SlateGray","SlateGrey","Snow","SpringGreen","SteelBlue","Tan","Teal","Thistle","Tomato","Turquoise","Violet","Wheat","White","WhiteSmoke","Yellow","YellowGreen"]
  for (i = 0; i &lt; colorWords.length; i++) { 
      word=colorWords[i];
      text = text.replace(new RegExp("\\b"+word+"\\b", 'g'), '&lt;span style="color:'+colors[Math.floor((Math.random(148) * colors.length) + 1)]+'"&gt;'+colorWords[i]+'&lt;/span&gt;');
  }
  console.log(text);
  document.getElementById("out1").innerHTML = text;
  &lt;/script&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>