Apply user input changes using jQuery-CodePudding

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 >
  <input type="text"  placeholder="Type colour here">
  <button>Apply</button>
</div>
<div >
</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

CodePudding user response：

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 >
  <input type="text"  placeholder="Type colour here">
  <button>Apply</button>
</div>
<div >
</div>

CodePudding user response：

You're simply looking at the wrong event. You're focused on a click event to the text box and not the button. Target 'button' instead of '.colourInput'.

jQuery

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