Fatal编程技术网
  • javascript/
  • 如何使用css按钮调用javascript函数？

如何使用css按钮调用javascript函数？

javascript css

如何使用css按钮调用javascript函数？,javascript,css,Javascript,Css,我正在编写一个脚本给文本上色，其主要思想是，当有人单击名为：Change color1的按钮时，我的文本就会改变颜色，代码如下： <button onclick="myFunction()">Change color1</button> 我希望通过使用css创建的名为：Change color2的按钮获得相同的结果，问题是我不知道如何调用用这个按钮重新加载页面的函数 在第一个按钮的情况下，很清楚如何通过以下方式实现： <button onclick="myFunc

我正在编写一个脚本给文本上色，其主要思想是，当有人单击名为：Change color1的按钮时，我的文本就会改变颜色，代码如下：

<button onclick="myFunction()">Change color1</button>
我希望通过使用css创建的名为：Change color2的按钮获得相同的结果，问题是我不知道如何调用用这个按钮重新加载页面的函数

在第一个按钮的情况下，很清楚如何通过以下方式实现：

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

更改颜色1
但对于第二个，我不确定：

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

更改颜色2
我试过：

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

更改颜色2
但是我失败了，所以我想解决这个问题

我的完整代码如下所示：

<!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>




“RBD | X | RBD3 | C | 92173~GJHGWO.NAYE”“Samborniposssthra1”
“RBD | X | RBD | C | 92173~GJHGX4.NAYE”“Samborniposssthra”
“RBD | X3 | RBD3 | C | 92173~GJHGX6.NAYE”“Samborniposssthra1”
“RBD | X | RBD | C | 92173~GJHGXA.NAYE”“Samborniposssthra2”
“RBD | X | RBD | C | 92173~GJHGXA.NAYE”“Samborniposssthra2”
“RBD | X3 | RBD | C | 92173~GJHGXC.NAYE”“Samborniposssthra”
“RBD | X | RBD3 | C | 92173~GJHGWO.NAYE”“Samborniposssthra1”
“RBD | X | RBD | C | 92173~GJHGX4.NAYE”“Samborniposssthra”
“RBD | X3 | RBD3 | C | 92173~GJHGX6.NAYE”“Samborniposssthra1”
“RBD | X | RBD | C | 92173~GJHGXA.NAYE”“Samborniposssthra2”
“RBD | X | RBD | C | 92173~GJHGXA.NAYE”“Samborniposssthra2”
“RBD | X3 | RBD | C | 92173~GJHGXC.NAYE”“Samborniposssthra”
“RBD | X | RBD3 | C | 92173~GJHGWO.NAYE”“Samborniposssthra1”
“RBD | X | RBD | C | 92173~GJHGX4.NAYE”“Samborniposssthra”
“RBD | X3 | RBD3 | C | 92173~GJHGX6.NAYE”“Samborniposssthra1”
“RBD | X | RBD3 | C | 92173~GJHGWO.NAYE”“Samborniposssthra1”
“RBD | X | RBD | C | 92173~GJHGX4.NAYE”“Samborniposssthra”
“RBD | X3 | RBD3 | C | 92173~GJHGX6.NAYE”“Samborniposssthra1”
“RBD | X | RBD | C | 92173~GJHGXA.NAYE”“Samborniposssthra2”
“RBD | X | RBD | C | 92173~GJHGXA.NAYE”“Samborniposssthra2”
“RBD | X3 | RBD | C | 92173~GJHGXC.NAYE”“Samborniposssthra”
“RBD | X | RBD3 | C | 92173~GJHGWO.NAYE”“Samborniposssthra1”
“RBD | X | RBD | C | 92173~GJHGX4.NAYE”“Samborniposssthra”
“RBD | X3 | RBD3 | C | 92173~GJHGX6.NAYE”“Samborniposssthra1”
“RBD | X | RBD | C | 92173~GJHGXA.NAYE”“Samborniposssthra2”
“RBD | X | RBD | C | 92173~GJHGXA.NAYE”“Samborniposssthra2”
“RBD | X3 | RBD | C | 92173~GJHGXC.NAYE”“Samborniposssthra”
“RBD | X | RBD3 | C | 92173~GJHGWO.NAYE”“Samborniposssthra1”
“RBD | X | RBD | C | 92173~GJHGX4.NAYE”“Samborniposssthra”
“RBD | X3 | RBD3 | C | 92173~GJHGX6.NAYE”“Samborniposssthra1”
正文{背景色：蓝色；}
#out1{
文本对齐：左对齐；
字体风格：普通；
字体大小：粗体；
字号：28px；
空白：预处理；
背景颜色：浅灰色；
宽度：1000px；
填充：25px；
边界：25像素固体海军；
利润率：25px；
}
.按钮{
背景颜色：绿色；
边框：4倍纯青色；
颜色：白色；
填充：20px 60px；
文字装饰：无；
显示：内联块；
字体大小：35px；
利润率：4px4px；
光标：指针；
边界半径：20px；
盒影：0 8px 16px黑色；
}
换颜色1
换颜色2
函数myFunction（）{
location.reload（）；
}
var text=document.getElementById（“texto”）.value；
var splitWords=text.split（/[\\\\；~]/）；
var cleanArray=\.remove（拆分字，函数（字）{返回字！='&&word！='&&word！='&&word！='='\n'}）；
var dict=cleanArray.reduce（函数（p，c）{
if（p[c]==未定义）{
p[c]=1；
}否则{
p[c]++；
}
返回p；
},{});
控制台日志（dict）；
var filtered=Object.keys（dict）.reduce（函数（filtered，key）{
如果（dict[key]>1）过滤的[key]=dict[key]；
返回过滤；
}, {});
var colorWords=Object.keys（已过滤）
颜色=[“爱丽丝蓝”、“古董白”、“水蓝”、“海蓝蓝”、“天蓝”、“米色”、“浅色”、“黑色”、“白杏仁色”、“蓝色”、“蓝紫罗兰色”、“棕色”、“白肋木”、“卡德蓝”、“黄绿色”、“巧克力色”、“珊瑚色”、“矢车菊蓝”、“矢车菊色”、“深蓝色”、“深蓝色”、“深蓝色”、“深黄色”、“深灰色”、“深灰色”、“深灰色”、“深绿色”、“深灰色”、“深绿色”、“深红色”、“深绿色”、“深红色”、“深绿色”、“深红色”、“深绿色”、“深绿色”、“黑色”深绿色、深绿色、深绿色、深绿色、深绿色、深绿色、深蓝色、深灰色、深蓝色、深蓝色、深蓝色、深蓝色、深蓝色、深蓝色、深蓝色、深蓝色、深蓝色、深灰色、深蓝色、浅灰色、浅灰色、道奇蓝、耐火砖、花白、森林绿、紫红色、盖恩斯伯罗、鬼影白、金色、黄花、灰色、灰色、绿色、绿黄色“蜜露”、“火红”、“印度红”、“靛蓝”、“象牙”、“卡其色”、“薰衣草”、“薰衣草红”、“草坪”、“柠檬红”、“浅蓝色”、“浅珊瑚”、“浅青色”、“浅黄花黄”、“浅灰色”、“浅绿色”、“浅粉色”、“浅鲑鱼”、“浅海绿”、“浅天蓝”、“浅石板灰”、“浅石板灰”、“浅钢蓝”、“浅黄色”、“石灰”、“柠檬黄””亚麻布、洋红、栗色、地中海红、地中海蓝、地中海蓝、地中海兰、地中海绿、地中海蓝、地中海绿、地中海蓝、地中海绿、地中海蓝、地中海绿、地中海蓝、地中海紫、地中海蓝、薄荷奶油、迷迭香、摩卡鞋、纳瓦霍白、海军蓝、旧花边、橄榄色、橄榄色、橙色、橘色、兰花、黄花、淡绿色蓝绿色、紫罗兰色、木瓜花、桃花、秘鲁、粉色、李子色、粉蓝色、紫色、丽贝卡紫色、红色、玫瑰色、皇家蓝、马鞍色、鲑鱼色、山鸟色、海绿、贝壳色、锡耶纳色、银色、天蓝、石板蓝、石板灰、雪、春绿、钢蓝、棕褐色、水鸭色、蓟色、番茄色、绿松石色“紫罗兰色、小麦色、白色、白烟色、黄色、黄绿色]
对于（i=0；i
将第二个按钮更改为：

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

更改颜色2
到

更改颜色2
将第二个按钮更改为：

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

更改颜色2
到

更改颜色2
更改：

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

更改颜色2
致：

更改颜色2
或者，您可以运行jQuery代码来添加事件侦听器：

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


$（“button.button”）。单击（f

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



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