无法使用某些按钮

时间：2018-05-27 19:00:47

标签： javascript html css

下面是我需要解决的一些代码。我修正了一些错误，但我不能让3个按钮工作。它们是随机事实按钮，颜色橙色粉红色和绿色按钮，以及增长和缩小按钮。

我发布了下面的代码，html似乎对我来说，也是css。我打赌Javascript错误的按钮，但我不知道它的哪一部分可能是不正确的。这是由于我的经验不足，但我很确定我修复了所有的HTML错误。

＆＃13;
＆＃13; 
$("#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");
})
＆＃13; 
.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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

将粉红色放在“

中 
$("#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>

相关问题
最新问题