当我使用JavaScript和jQuery键入输入框时，在预览区域中获取颜色

Question

我编写了一个代码，当我在输入框中输入名称时，我应该看到预览区域会改变颜色。我需要在事件处理程序中调用setPreviewColour并将输入框的当前值传递给它。

以下是我的代码：

function setPreviewColor(item){
    $('.preview').css('background-color', item);
}

$(document).on('keyup', '#add-to-favorite', function() {

    setPreviewColor($('#color').val());
//  $('#items').append('<li>' + $('#color').val() + '</li>');
//  $('.preview').css('background-color', $('#color').val());


} );

HTML代码

    <div id="container">
     <h1>Color picker</h1>
     <input id="color" type="text"/>
     <button id="add-to-favorite">Add to favorites</button>
     <div class="row">
       <div class="column">
         <div class="preview">
         </div>
       </div>
       <div class="column">
         <div id="colors">

         </div>
       </div>
       <br/>
      <div class="color-code"></div>
     </div>
   </div>

broswer的截图

单击“添加到收藏夹”按钮时，它不会更改。它只会在我按CTRL + SHIFT + J转到控制台时更改。谢谢你的帮助

Answer 1

更改

$(document).on('keyup', '#add-to-favorite', function() {

到

$('#add-to-favorite').on('click', function() {

Answer 2

您正尝试在带有ID（添加到收藏夹）的按钮上使用onkeyup，您需要将onkeyup事件附加到文本框中：

//Change what you have to the following, now as a user types in the textbox
//with id of color, it will send the value of the textbox to setPreviewColor()
$(document).on('keyup', '#color', function() {

    setPreviewColor($('#color').val());
    //OR
    //setPreviewColor($(this).val());

} );