在调试初学者javascript代码时需要帮助

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.

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>