使用jQuery应用用户输入更改

Question

我在大学里被设定了一项任务，作为jQuery的入门，但在我的一生中，我无法弄清楚如何执行我需要做的事情…

因此，任务是："使用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中设置的；文档就绪"；元素未被使用。

链接到任务CodePen感谢

Answer 1

您让侦听器处理了错误的事情。它需要在按钮上

$('.form-container button').on('click', function() {
$('.box').css("background-color", $('.form-container input').val());
});

$('.form-container button').on('click', function() {
$('.box').css("background-color", $('.form-container input').val());
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- DO NOT MODIFY --->
<div class="form-container">
<input type="text" class="colourInput" placeholder="Type colour here">
<button>Apply</button>
</div>
<div class="box">
</div>