How to call a javascript function with a css button? [closed]


Tags: javascript,css

Problem :

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:

<button onclick="myFunction()">Change color1</button>

That calls the next function:

function myFunction() {
    location.reload();
}

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.

In the case of the first button its very clear how to achieve this by:

<button onclick="myFunction()">Change color1</button>

but with the second one I am not sure:

<button class="button button1">Change color2</button>

I tried:

<button class="myFunction()">Change color2</button>

But I failed, therefore I would like to fix this problem.

my complete code looks like this:

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><script src="./code33_files/lodash.js"></script> 
</head><body>
<p id="demo"></p>
<textarea cols="150" rows="15" id="texto" >
"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"
</textarea>
<div id="out1"></div>
<style>
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;

}

</style>

<button onclick="myFunction()">Change color1</button>

<button class="button button1">Change color2</button>
<script>
function myFunction() {
    location.reload();
}
var text = document.getElementById("texto").value;
var splitWords = text.split(/[["\|~]/);
var cleanArray  = _.remove(splitWords, function (word) {return word !== '' && word !== ' ' && 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] > 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 < colorWords.length; i++) { 
    word=colorWords[i];
    text = text.replace(new RegExp("\\b"+word+"\\b", 'g'), '<span style="color:'+colors[Math.floor((Math.random(148) * colors.length) + 1)]+'">'+colorWords[i]+'</span>');
}
console.log(text);
document.getElementById("out1").innerHTML = text;
</script>
</body></html>


Solution :

Change:

<button class="button button1">Change color2</button>

To:

<button class="button button1" onclick="myFunction();">Change color2</button>

or you can run jQuery code to add an event listener:

<script>
 $("button.button").click(function(){
  myFunction();
 });
</script>

    CSS Howto..

    How to add a fade out at the end of this CSS animation?

    I want to override some CSS that says border:none to have border bottom. How can I do this?

    How to make pure css floating tooltips (absolutely positioned span) dynamically resize to accommodate text

    How to give a border as a background in css without using image and without adding anything to mark-up?

    CSS How to Properly use ems instead of pixels?

    How can I change the css of this when I click on anything but this?

    how to make list view of show type given below?

    In Firebug, how to tell what is overriding a style?

    How can I style this php with divs?

    how to make my horizontal css dock navigation to vertical

    How to use existing SVG symbols (in a file) as markers in highcharts?

    How can I make sure that the footer will always be on the bottom of the last page when printing out?

    How to create a pricetag shape in CSS and HTML

    How to get same effect as jQuery's slideToggle using CSS 3 transitions?

    How can i align the text in center of a row in css?

    How to have render big chunk of html inside a javascript forloop

    How to make sure my css overlay is on top at any site?

    how to animate icon fa-circle using CSS to look as recording video blinking red dot?

    How to crop an image edge

    Show Link on image at hovering in jquery

    how to make a floating div disappear for smaller screens?

    How to set this CSS arrow transparent?

    how to remove some css attributes defined by bootstrap

    How to make inline-block with CSS

    How can I add a scrollbar to a DIV that contains a table?

    How to prevent IE from loading hidden content using HTML/CSS only?

    How to wrap an image in a div, and then center the div

    How to stop all CSS overrides on a container DIV?

    I want to bring css for select option. how to write for this image, sample output like this

    How to add mouse hover properties to pie drawn on a node in d3?