javascript - 在调试初学者 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 Rules”是受标记为粉色、绿色和橙色的 3 个不同按钮影响的文本，单击这些按钮时应该将文本变成该颜色。第二个是图像/框，当您单击“增长”按钮时它会增长，收缩按钮会收缩。

Answer 1

根据之前的评论，我准备了以下代码:

如果有帮助请告诉我

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