作为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
谢谢
