javascript - Stumped on how to make local variables (colorSelect1, colorSelect2) global so that I can execute the logic statement -
i'm having difficulty determining why fails execute. when consoloe.log colorselect variables, return correct value. however, believe disconnect variables created within function , therefore not recognized global negates logic statement. suggestions on how circumvent issue?
var colorselect1 = null; var colorselect2 = null; //selecting first color $(function() { $(".color1").click(function() { $(".color1").removeclass('active'); $(this).addclass('active'); var colorselect1 = $(this).css("background-color"); console.log(colorselect1); return colorselect1; }); }) //selecting second color $(function() { $(".color2").click(function() { $(".color2").removeclass('active'); $(this).addclass('active'); var colorselect2 = $(this).css("background-color"); console.log(colorselect2); return colorselect2; }); }) // making new color based upon 2 color selections if (colorselect1 === "red" && colorselect2 === "yellow") { console.log("we have orange!"); $(".colorcombo").css('background-color', 'orange'); }.all-divs { display: block; float: left; } .active { border: 2px solid; } .colorcombo { float: left; border: 2px solid; width: 150px; height: 150px; margin-left: 393px; } .group1 { display: block; float: left; margin: 10px; } .group2 { display: block; float: left; margin: 10px; } #red1 { width: 150px; height: 150px; background-color: red; display: block; float: left; } #blue1 { width: 150px; height: 150px; background-color: blue; display: block; float: left; } #yellow1 { width: 150px; height: 150px; background-color: yellow; display: block; float: left; } #red2 { width: 150px; height: 150px; background-color: red; display: block; float: left; } #blue2 { width: 150px; height: 150px; background-color: blue; display: block; float: left; } #yellow2 { width: 150px; height: 150px; background-color: yellow; display: block; float: left; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> please select color. </div> <div class="all-divs"> <div class="group1"> <div class="color1" id="red1"> </div> <div class="color1" id="blue1"> </div> <div class="color1" id="yellow1"> </div> </div> <div class="group2"> <div class="color2" id="red2"> </div> <div class="color2" id="blue2"> </div> <div class="color2" id="yellow2"> </div> </div> </div> <div class="colorcombo"> </div>
you have two 3 problems here , code work if 3 fixed.
problem 1: have correctly surmised, affecting variables within functions.
to remedy this, remove var before these variables inside these functions:
colorselect1 = $(this).css("background-color"); colorselect2 = $(this).css("background-color"); this cause these variable names reference variables in outer scope instead of within functions.
problem 2: if statement executes long before of these events takes place. not continually evaluated variables' values change.
to fix this, can put if statement inside function of own:
function checkcolors() { if(colorselect1 === "red" && colorselect2 === "yellow"){ console.log("we have orange!"); $(".colorcombo").css('background-color', 'orange'); } } and call in each of events:
$(".color1").click(function() { $(".color1").removeclass('active'); $(this).addclass('active'); colorselect1 = $(this).css("background-color"); checkcolors(); }); problem 3: using .css('background-color') not give same value specified in css. example, in chrome, calling on element red background result in value rgb(255, 0, 0).
one way remedy use data- on elements specify values need, , retrieve them .data():
<div class="color1" id="red1" data-color="red"> colorselect1 = $(this).data('color'); lastly, while not related problem having, using header , footer incorrectly. tag have named header should named head, , should remove footer, since footers should appear inside body element, , there's no point in having 1 if it's empty.
full solution, other improvements:
var colorselect1 = null; var colorselect2 = null; $(function() { //selecting first color $(".color1").click(function() { $(".color1").removeclass('active'); $(this).addclass('active'); colorselect1 = $(this).data("color"); console.log(colorselect1); checkcolors(); }); //selecting second color $(".color2").click(function() { $(".color2").removeclass('active'); $(this).addclass('active'); colorselect2 = $(this).data("color"); console.log(colorselect2); checkcolors(); }); }); // making new color based upon 2 color selections function checkcolors() { if(colorselect1 === "red" && colorselect2 === "yellow"){ console.log("we have orange!"); $(".colorcombo").css('background-color', 'orange'); } }.all-divs { display: block; float: left; } .active { border: 2px solid; } .colorcombo { float: left; border: 2px solid; width: 150px; height: 150px; margin-left: 393px; } .group1 { display: block; float: left; margin: 10px; } .group2 { display: block; float: left; margin: 10px; } .color1, .color2 { width: 150px; height: 150px; display: block; float: left; } [data-color=red] { background-color: red; } [data-color=blue] { background-color: blue; } [data-color=yellow] { background-color: yellow; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> please select color. </div> <div class="all-divs"> <div class="group1"> <div class="color1" id="red1" data-color="red"> </div> <div class="color1" id="blue1" data-color="blue"> </div> <div class="color1" id="yellow1" data-color="yellow"> </div> </div> <div class="group2"> <div class="color2" id="red2" data-color="red"> </div> <div class="color2" id="blue2" data-color="blue"> </div> <div class="color2" id="yellow2" data-color="yellow"> </div> </div> </div> <div class="colorcombo"> </div>
Comments
Post a Comment