Apply user input changes using jQuery

Question

I've been set a task at uni as an introduction to jQuery and cannot for the LIFE of me, figure out how to execute what I need to do...

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

The HTML and CSS code I'm given is below alongwith the JS that I've attempted to put together. At the moment, the change triggers when you put the text into the box, and then click back into the box, but I can't figure out how to make this action occur when using the Apply button.

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;
}

My current 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());
});

Really cannot get my head around this, so any help would be amazing! The task was set in Codepen, which is why the "document ready" element was not used.

Link to task CodePen Thanks

Kinglish · Accepted Answer · 2022-02-27 21:11:07Z

1

You have the listener on the wrong thing. It needs to be on the button

$('.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>

answered Feb 27, 2022 at 21:11

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tom Over a year ago

Thanks a tonne, that's sorted it. I think I need to brush up on the syntax structure of jQuery from scratch!

Collectives™ on Stack Overflow

Apply user input changes using jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related