我正在编写一个脚本来为文本着色，主要的想法是，当有人点击名为“更改color1”的按钮时，我的文本会改变其颜色，其代码如下：
<button onclick="myFunction()">Change color1</button>
调用下一个函数：
function myFunction() {
location.reload();
}
我想用名为：Change color2的按钮实现相同的结果，我使用css创建，问题是我不知道如何调用用这个重新加载页面的函数。
在第一个按钮的情况下，它非常清楚如何通过以下方式实现：
<button onclick="myFunction()">Change color1</button>
但是第二个我不确定：
<button class="button button1">Change color2</button>
我试过了：
<button class="myFunction()">Change color2</button>
但我失败了，因此我想解决这个问题。
我的完整代码如下所示：
<!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>
答案 0 :(得分：1)
变化：
<button class="button button1">Change color2</button>
要：
<button class="button button1" onclick="myFunction();">Change color2</button>
或者你可以运行jQuery代码来添加一个事件监听器：
<script>
$("button.button").click(function(){
myFunction();
});
</script>
答案 1 :(得分：1)
您尝试在类<button class="myFunction()">Change color2</button>中添加无效的函数，更改它并将函数添加到on {<button class="button button1" onclick="myFunction()">Change color2</button>等onclick，这应该可以解决问题。
答案 2 :(得分：0)
更改第二个按钮：
<button class="myFunction()">Change color2</button>
到
<button OnClick="myFunction()">Change color2</button>