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

Question

问题 1. 我有三个按钮都影响一个文本，每个按钮都应该使文本变成不同的颜色，但它不起作用。

问题 2。我有一个框/图像元素，它必须受到增长按钮和缩小按钮的影响，但也不起作用。

我对 Javascript 非常陌生，因此非常感谢任何帮助！

$("#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 规则”是受 3 个不同按钮影响的文本，分别标记为粉色、绿色和橙色，单击该按钮时应该将文本变为该颜色。 其次是一个图像/框，当您单击“增长”按钮时，它会增长，收缩按钮会缩小。

Answer 1

根据之前的cmets我准备了如下代码：

如果有帮助请告诉我

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