Changing color of selected div jquery

Question

I am trying to create a function so that when user clicks on a div and then click on a button background-color of that div will change therefore value has to be saved as a variable, but I cannot seem to get it to work as all the time is says that "storage" variable is undefined. Whole page can be seen at:

<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 can be seen at:

https://jsfiddle.net/mbqzL73r/

you need to declare storage outside the click and make it global to both clicks — Pete, Jan 17 '17 at 14:42
Please provide me with an example if that's possible, I am a visual learner so by reading text it's hard for me to imagine what I need to do ;) — Przemek, Jan 17 '17 at 14:43
See answer below and have a read of this post [What is the scope of variables in javascript](http://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript) — Pete, Jan 17 '17 at 14:45

score 3 · Accepted Answer · edited May 23 '17 at 12:33

3

You need to make storage global to the scope for both click events

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

edited May 23 '17 at 12:33

Community

1
1

answered Jan 17 '17 at 14:43

Pete

57,112
28
117
166

You'll need to append `'#'` to the selector in the second click handler – Rory McCrossan Jan 17 '17 at 14:45
Why not just `storage = e.target`? Then you don't need to prefix # – Satpal Jan 17 '17 at 14:50
1

Works Perfect, @Pete you are awesome ;) I might be actually able to finish this final year project on time :D – Przemek Jan 17 '17 at 14:52
@Satpal - this may not be all the code and `storage` var may be used elsewhere so I didn't want to change original code too much – Pete Jan 17 '17 at 15:01

score 1 · Answer 2 · answered Jan 17 '17 at 14:42

1

your storage variable is within the scope of the second function, you need to declare storage as a global variable. for example:

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

answered Jan 17 '17 at 14:42

Ben Davison

713
7
15

Use `storage = e.target` otherwise prefix '#' so that it can be used as Id selector – Satpal Jan 17 '17 at 14:47

Changing color of selected div jquery

2 Answers2