使用jQuery应用用户输入更改

作为jQuery的入门,我在uni被安排了一项任务,但在我的一生中,我都无法弄清楚如何执行我需要做的事情。。。

因此,任务是: 使用jQuery允许用户输入颜色,然后单击“应用”按钮,将用户输入的颜色应用到框中

下面是我给出的HTML和CSS代码,以及我试图组合的JS。目前,当您将文本放入框中,然后单击返回框时,会触发更改,但我不知道如何在使用“应用”按钮时执行此操作。

HTML:

<!-- DO NOT MODIFY --->
<div class="form-container">
  <input type="text" class="colourInput" placeholder="Type colour here">
  <button>Apply</button>
</div>
<div class="box">
</div>

CSS:

/* DO NOT MODIFY */

.form-container {
  margin: 0 auto;
  width: 235px;
  margin-bottom: 20px;
  margin-top: 20px;
}
.box {
  height: 200px;
  width: 200px;
  margin: 0 auto;
  background-color: #000;
}

我现在的JS:

// Using jQuery allow users to enter a colour then on click of the "Apply" button apply the user entered colour to the box.

$('.colourInput').on('click', function(){
$('.box').css("background-color", $(this).val());
});

我真的想不起来,所以任何帮助都会很棒!该任务是在Codepen中设置的,这就是为什么没有使用“document ready”元素的原因。

Link to task CodePen 谢谢