javascript - 无法让某些按钮工作
问题描述
下面是我需要修复的一些代码。我修复了一些错误,但我无法让 3 个按钮工作。它们是随机事实按钮、橙色粉色和绿色按钮以及增长和收缩按钮。
我在下面发布了代码,html 对我来说似乎是正确的,css 也是如此。我打赌 Javascript 对按钮来说是错误的,但我只是看不出它的哪一部分可能是不正确的。这是由于我缺乏经验,但我很确定我修复了所有 HTML 错误。
$("#factButton").on("click", function() {
var number = Math.floor((Math.random() * booFacts.length));
$("#factText").text(booFacts[number])
})
var booFacts = ["Boo is a pomeranian, Boo's best friend is another pomeranian named Buddy, Boo the Pomeranian was born on March 16, making him a Pisces, Boo's favourite food is grass, Boo has released two books"]
$("#textPink").on("click", function() {
$("#funText").css("color", pink)
})
$("#textOrange").on("click", function() {
$("#funText").css("color", "orange")
})
$("#textGreen").on("click", function() {
$("#funText").css("color", "green")
})
$("#boxGrow").on(click, function() {
$("#box").animate({
height: "+=35px",
width: "+=35px"
}, "fast");
})
$("#boxShrink").on(click, function() {
$("#box").animate({
height: "-=35px",
width: "-=35px"
}, "fast");
})
.jumbotron {
background-color: #428bca
}
.jumbotron h1 {
color: white;
}
p,
h1,
h4 {
font-family: 'Roboto Slab', serif;
}
#funText {
color: black;
font-size: 24px;
font-family: 'Roboto Slab', serif;
}
#box {
height: 100px;
width: 100px;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<title>Boo The Dog</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Linking CSS -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Linking jQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Linking Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Montserrat|Roboto+Slab|Yellowtail' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<div class="jumbotron bg-primary text-center">
<h1>Boo The Dog Fan Page!</h1>
</div>
<div class="row">
<div class="col-sm-12">
<div class="panel panel-primary">
<div class="panel-heading">Instructions</div>
<div class="panel-body text-center">
<!--<h4>Oh no! Someone has vandalized our Boo 'The Cutest Dog In The World' fanpage!</h4>
<h4>There are a bunch of errors on this page!</h4>
<h4>Try your best to find them all!</h4> -->
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">About Boo</div>
<div class="panel-body">
Boo the dog belongs to a San Francisco-based Facebook employee who created a Facebook page for the dog with a statement "My name is Boo. I am a dog. Life is good." He became popular in October 2010 after singer Ke$ha sent a tweet that she had a new boyfriend,
linking to the page. Chronicle Books, noticing that Boo had 5 million Facebook fans at the time, approached the owner to write a picture book. In August 2011, Boo: The Life of the World's Cutest Dog, written by his owner under pen name J.H.
Lee, was published. The book was eventually published in ten languages. A second book followed, Boo: Little Dog in the Big City, as well as a calendar and plans for a cut-out book and additional children's books. He also has his own stuffed
animal for kids. His merchandise includes a Gund stuffed animal. Boo was appointed a spokesdog for Virgin America airline, which featured photos of him in an airplane along with advice for people traveling with pets. In April 2012, Boo was
the subject of a death hoax after #RIPBOO appeared on Facebook. Tweets followed as Gizmodo writer Sam Biddle tweeted Boo had died. It was later confirmed by The Chronicle Book staff that Boo was alive and well. In July 2012, Boo was named
the Official Pet Liaison of Virgin America. Read more at: <a href="">https://en.wikipedia.org/wiki/Boo_(dog)</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="well text-center">
<div>
<img class="img-responsive" src="https://img.buzzfeed.com/buzzfeed-static/static/2015-04/21/16/enhanced/webdr05/enhanced-31550-1429646952-7.jpg">
</div>
</div>
</div>
</div>
<br><br>
<div class="row">
<div class="col-sm-6 text-center">
<button class="btn btn-primary form-control" id="factButton">Random Boo Fact</button>
<div class="well text-center">
<div>
<p id="factText">Click the button for a random Boo fact!</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">List Of Boo's Favorite Things</div>
<div class="panel-body">
<ol>
Dressing Up Eating Grass Sleeping Swimming Hiking
</ol>
</div>
</div>
</div>
</div>
<br><br>
<div class="row text-center">
<div class="col-sm-6 text-center">
<button class="btn" id="textOrange">Orange</button>
<button class="btn" id="textPink">Pink</button>
<button class="btn" id="textGreen">Green</button>
<div class="well text-center">
<p id="funText">Boo Rules!</p>
</div>
</div>
<div class="col-sm-6">
<div class="col-sm-6">
<button class="btn" id="boxGrow">Grow</button>
<button class="btn" id="boxShrink">Shrink</button>
<div class="well text-center">
<img id="box" src="http://petradioshow.com/wp-content/uploads/2015/05/jiff1.jpg" style="display: inline-block; height: 205px; width: 205px;">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="errors.js"></script>
</body>
</html>
解决方案
将粉红色放入“
$("#funText").css("color", "pink");
也将“点击”事件放入“
$("#boxGrow").on("click", function() {
$("#box").animate({
height: "+=35px",
width: "+=35px"
}, "fast");
})
$("#boxShrink").on("click", function() {
$("#box").animate({
height: "-=35px",
width: "-=35px"
}, "fast");
})
完整代码
$("#factButton").on("click", function() {
var number = Math.floor((Math.random() * booFacts.length));
$("#factText").text(booFacts[number])
})
var booFacts = ["Boo is a pomeranian, Boo's best friend is another pomeranian named Buddy, Boo the Pomeranian was born on March 16, making him a Pisces, Boo's favourite food is grass, Boo has released two books"]
$("#textPink").on("click", function() {
$("#funText").css("color", "pink")
})
$("#textOrange").on("click", function() {
$("#funText").css("color", "orange")
})
$("#textGreen").on("click", function() {
$("#funText").css("color", "green")
})
$("#boxGrow").on("click", function() {
$("#box").animate({
height: "+=35px",
width: "+=35px"
}, "fast");
})
$("#boxShrink").on("click", function() {
$("#box").animate({
height: "-=35px",
width: "-=35px"
}, "fast");
})
.jumbotron {
background-color: #428bca
}
.jumbotron h1 {
color: white;
}
p,
h1,
h4 {
font-family: 'Roboto Slab', serif;
}
#funText {
color: black;
font-size: 24px;
font-family: 'Roboto Slab', serif;
}
#box {
height: 100px;
width: 100px;
margin: auto;
}
<html>
<head>
<title>Boo The Dog</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Linking CSS -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Linking jQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Linking Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Montserrat|Roboto+Slab|Yellowtail' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<div class="jumbotron bg-primary text-center">
<h1>Boo The Dog Fan Page!</h1>
</div>
<div class="row">
<div class="col-sm-12">
<div class="panel panel-primary">
<div class="panel-heading">Instructions</div>
<div class="panel-body text-center">
<!--<h4>Oh no! Someone has vandalized our Boo 'The Cutest Dog In The World' fanpage!</h4>
<h4>There are a bunch of errors on this page!</h4>
<h4>Try your best to find them all!</h4> -->
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">About Boo</div>
<div class="panel-body">
Boo the dog belongs to a San Francisco-based Facebook employee who created a Facebook page for the dog with a statement "My name is Boo. I am a dog. Life is good." He became popular in October 2010 after singer Ke$ha sent a tweet that she had a new boyfriend,
linking to the page. Chronicle Books, noticing that Boo had 5 million Facebook fans at the time, approached the owner to write a picture book. In August 2011, Boo: The Life of the World's Cutest Dog, written by his owner under pen name J.H.
Lee, was published. The book was eventually published in ten languages. A second book followed, Boo: Little Dog in the Big City, as well as a calendar and plans for a cut-out book and additional children's books. He also has his own stuffed
animal for kids. His merchandise includes a Gund stuffed animal. Boo was appointed a spokesdog for Virgin America airline, which featured photos of him in an airplane along with advice for people traveling with pets. In April 2012, Boo was
the subject of a death hoax after #RIPBOO appeared on Facebook. Tweets followed as Gizmodo writer Sam Biddle tweeted Boo had died. It was later confirmed by The Chronicle Book staff that Boo was alive and well. In July 2012, Boo was named
the Official Pet Liaison of Virgin America. Read more at: <a href="">https://en.wikipedia.org/wiki/Boo_(dog)</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="well text-center">
<div>
<img class="img-responsive" src="https://img.buzzfeed.com/buzzfeed-static/static/2015-04/21/16/enhanced/webdr05/enhanced-31550-1429646952-7.jpg">
</div>
</div>
</div>
</div>
<br><br>
<div class="row">
<div class="col-sm-6 text-center">
<button class="btn btn-primary form-control" id="factButton">Random Boo Fact</button>
<div class="well text-center">
<div>
<p id="factText">Click the button for a random Boo fact!</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">List Of Boo's Favorite Things</div>
<div class="panel-body">
<ol>
Dressing Up Eating Grass Sleeping Swimming Hiking
</ol>
</div>
</div>
</div>
</div>
<br><br>
<div class="row text-center">
<div class="col-sm-6 text-center">
<button class="btn" id="textOrange">Orange</button>
<button class="btn" id="textPink">Pink</button>
<button class="btn" id="textGreen">Green</button>
<div class="well text-center">
<p id="funText">Boo Rules!</p>
</div>
</div>
<div class="col-sm-6">
<div class="col-sm-6">
<button class="btn" id="boxGrow">Grow</button>
<button class="btn" id="boxShrink">Shrink</button>
<div class="well text-center">
<img id="box" src="http://petradioshow.com/wp-content/uploads/2015/05/jiff1.jpg" style="display: inline-block; height: 205px; width: 205px;">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="errors.js"></script>
</body>
</html>
推荐阅读
- unity3d - 从图像 URL 获取纹理时,图像中的文本出现锯齿状/像素化
- java - 有没有办法在 Java 中创建内存中的 mongo 服务器?
- c++ - 通过构造函数创建的所有对象都具有相同的向量
- react-dates - airbnb/react-dates 中未显示箭头(在移动屏幕中是,不在桌面中)
- windows - 如何从 CMD 执行添加到 WSL2 内的 $PATH 的二进制文件?
- python - 比较python中的两个列表元素
- r - 当字符串带有空格时,agrep 不起作用,用于字符串匹配
- sql - 每个组的本地最大值的 SQL 排序结果
- android - java.lang.NullPointerException:尝试插入到 Telephony.Sms.Conversations 时,Uri 不能为空
- mysql - 如何在 Django 模型中声明 JSON 字段?