Изменение цвета выбранного div jquery

Question

Я пытаюсь создать функцию, чтобы при нажатии пользователем на div и нажатии кнопки фонового цвета этот div изменился, поэтому значение должно быть сохранено как переменная, но я не может заставить его работать, поскольку все время говорит, что переменная «storage» не определена. Целая страница можно увидеть по адресу:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="content-link2"> 
    <title>Template 1</title> 
    <link href="http://localhost/fyproject/public/templates/css.css" rel="stylesheet" type="text/css"> 

      <button class="btn btn-default form-control margin color" value="yellow">Background</button> 
      <button class="btn btn-default form-control margin color" value="red">Background</button> 
    <div class="logo"> 
    <img class="images" id="image" src="#" alt="Your Logo"> 
    </div> 
    <div contenteditable="true" id="content" class="draggable ui-widget-content refresh ui-draggable ui-draggable-handle" style="position: relative;"> 
    <p>hlo</p> 
    </div> 
    <div id="comments"> 
    <form name="forma"> 
     <textarea name="commentUser" id="commentUser" class="refresh" cols="40" rows="5">Comments here... 
     </textarea> 
     <br> 
     <input type="submit" value="Ready!" id="send-data"> 
     <!--onClick="writeComment(e);"--> 
     <div id="editTxt" class="refresh" contenteditable="true"> 
     <p>This text can be by the user.</p> 
     </div> 
    </form> 
    </div> 


    </div> 

$(document).ready(function() { 
    $('.color').click(function() { 
    $(storage).css("background-color", $(this).attr("value")); 
    }); 
}); 

$('#content-link2').on('click', 'div', function(e) { 
    var storage = ($(e.target).attr("id")); 
}); 

Page можно увидеть по адресу:

https://jsfiddle.net/mbqzL73r/

Answer 1

Вы должны сделать хранение глобального к области как для событий щелчка

$(document).ready(function() { 
 
    var storage; 
 
    $('.color').click(function() { 
 
    $('#' + storage).css("background-color", $(this).attr("value")); 
 
    }); 
 

 
    $('#content-link2').on('click', 'div', function(e) { 
 
    storage = ($(e.target).attr("id")); 
 
    }); 
 
});

More information about js variable scope

Answer 2

переменная хранения в пределах второй функции, вам нужно объявить хранение в качестве глобальной переменной , например:

var storage = ""; 
$(document).ready(function() { 
    $('.color').click(function() { 
    $(storage).css("background-color", $(this).attr("value")); 
    }); 
}); 

$('#content-link2').on('click', 'div', function(e) { 
    storage = ($(e.target).attr("id")); 
});