javascript - Need help in debugging a beginners javascript code

Question

Problem 1. I have three buttons that all affect one text and each button is supposed to make the text turn a different color but its not working.

Problem 2. I have a box/image element that has to be affected by a grow button and shrink button but isn't working either.

I'm extremely new to Javascript so any help is greatly appreciated!!

$("#pinkButton").on("click", function() {
    var booRules = console.log('booRules')
    $("#funText").css("color", "pink")
})

$("#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");
})

"Boo Rules" is the one text affected by 3 different buttons labeled Pink, Green & Orange that when clicked are supposed to turn the text into that color. Second is an image/box that when you click the Grow button its grows, shrink button it shrinks.

标签： javascripthtmlcss

Answer 1

Based on previous comments I have prepared the following code:

Let me know if it helps

$("#pinkButton").on("click", function() {
  $("#funText").css("color", "pink")
})

$("#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");
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="textPink">Pink</button>
<button id="textOrange">Orange</button>
<button id="textGreen">Green</button>

<input id="funText" type="text" value="test" />

<button id="boxGrow">Grow</button>
<button id="boxShrink">Shrink</button>
<div id="box" style="width:20px; height:20px; background-color:red"></div>