Почему моя переменная jQuery не работает?

Question

Я пытаюсь превратить свой выбор цвета по умолчанию в переменную, поскольку он используется дважды в двух разных функциях. Это то, что я пробовал (между прочим), но он просто не работает? Вот JSFiddle моего кода для тех, кто может попытаться сыграть с ним? Я просто не могу заставить его работать, но кажется, что это должно быть так просто? https://jsfiddle.net/q7bLwt8n/

var defaultcolor = $(this).css("background-color", "#7fffd4"); 
 

 
$(document).ready(function() { 
 
    for (var i = 0; i < 16; i++) { 
 
    for (var j = 0; j < 16; j++) { 
 
     $('#grid').append('<div class= square></div>'); 
 
    }; 
 
    }; 
 
    $(".square").mouseenter(function() { 
 
    defaultcolor; 
 
    }); 
 

 
    //clears the canvas and resets the color on hover back to #7fffd4// 
 
    $("#clear").click(function() { 
 
    $("#grid").effect("shake"); 
 
    $(".square").css("background-color", "white"); 
 
    $(".square").mouseenter(function() { 
 
     defaultcolor; 
 
    }); 
 
    }); 
 
    //creates a random color for each square when button is clicked// 
 
    $("#randomcolor").click(function() { 
 
    $(".square").mouseenter(function() { 
 
     var randomColorChange = '#' + (Math.random() * 0xFFFFFF << 0).toString(16); 
 
     $(this).css('background-color', randomColorChange); 
 
    }); 
 
    }); 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    font-family: Arial, sans-serif; 
 
    background-color: white; 
 
} 
 

 
h1 { 
 
    color: white; 
 
    padding-top: 8px; 
 
    padding-bottom: 8px; 
 
    text-align: center; 
 
    background-color: #191919; 
 
} 
 

 
span { 
 
    text-decoration: underline; 
 
    color: #7fffd4; 
 
} 
 

 
.buttons { 
 
    padding-top: 10px; 
 
    text-align: center; 
 
    width: 480px; 
 
    margin: 0 auto; 
 
} 
 

 
#clear, 
 
#randomcolor, 
 
#usersquares { 
 
    margin: 5px; 
 
    padding: 8px; 
 
    border-radius: 1px; 
 
    background-color: #191919; 
 
    color: white; 
 
} 
 

 
.container { 
 
    margin-top: 20px; 
 
} 
 

 
#grid { 
 
    width: 484px; 
 
    height: 484px; 
 
    margin: 10px auto; 
 
    border: 2px solid #191919; 
 
    box-shadow: 2px 2px 30px 10px #b2b2b2; 
 
} 
 

 
.square { 
 
    width: 30px; 
 
    height: 30px; 
 
    margin: 0; 
 
    float: left; 
 
    outline: 1px solid black; 
 
    background: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> 
 
</script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 
<h1>Etch A <span>Sketch</span></h1> 
 
<div class="buttons"> 
 
    <button id="clear">Clear Canvas</button> 
 
    <button id="randomcolor">Random Colors</button> 
 
    <button id="usersquares">Squares Per Side</button> 
 
</div> 
 
<div class="container"> 
 
    <div id="grid"></div> 
 
</div>

Answer 1

Значение this вычисляется, когда интерпретатор анализирует сценарий. Из-за этого значение в defaultcolor не является this, на которое вы ссылаетесь в событиях мыши.

Вместо этого вы могли бы сделать что-то вроде этого:

function set_default_color() { 
    $(this).css("background-color", "#7fffd4"); 
} 

$(".square").mouseenter(set_default_color);