-1

I am trying to create a function(see itemClicked() function below) that takes as parameter(the id of the 'ShopFrame' element's child)- a selector so I don't have to repeat code all over again.

The result is the .click() function firing up automatically, and it looks like the parameter i pass in to the function is recognized or something else is wrong even though there are not any errors in the console. Also I can see the 'p' value I passed the .itemClicked() function in the console log shown without calling the function. Seeing that I supposed it is firing outside the .click() function that was used to call the function itself

What am I doing wrong? Here is my full code: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Menu">
    <ul>
        <li id="WindowShopButon" ><span class="VMenu">Windows</span></li>
        <li id="DoorShopButon"  title="#DoorShopCode"> <span class="VMenu">Doors</span></li>
        <li id ="BlindsShopButon"><span class="VMenu">Blinds</span></li>
        <li id="OptionsShopButon"> <span class="VMenu">Options</span></li>
    </ul>
</div>

<div id="ShopFrame">
    <p class="shop activeShop" id="MainShop">I am MainShop</p>
    <p class="shop" id="WindowsShopCode" >  I am WindowsShopCode</p>
    <p class="shop" id="DoorShopCode">I am DoorShopCode</p>
    <p class="shop" id="BlindsShopCode">I am BlindsShopCode</p>
    <p class="shop" id="OptionsShopCode">I am OptionsShopCode</p>
</div>


<script type="text/javascript">

    function hoverItem() {
        $(this).toggleClass("hover")
        };
 var p = '';
    function itemClicked(p){
        $('.VMenu').removeClass("active");
        $(this).addClass("active");
        $("#MainShop").remove();
        $('.shop').removeClass("activeShop");
        $(p).addClass("activeShop");
        console.log(p);
    }


$( document ).ready(function() {
    console.log( "ready!" );
        $("#WindowShopButon span.VMenu")
        .click(function() {
            $('.VMenu').removeClass("active");
            $(this).addClass("active");

            $("#MainShop").remove();
            $('.shop').removeClass("activeShop");
            $("#WindowsShopCode").addClass("activeShop");
        })

        .hover(hoverItem); 

    $("#DoorShopButon span.VMenu").hover(hoverItem).click(itemClicked('#DoorShopCod')); 


$("#BlindsShopButon span.VMenu").click(function() {

$('.VMenu').removeClass("active");
$(this).addClass("active");

$("#MainShop").remove();
$('.shop').removeClass("activeShop");
$("#BlindsShopCode").addClass("activeShop");

})
    .hover(hoverItem); 


$("#OptionsShopButon span.VMenu").click(function() {

$('.VMenu').removeClass("active");
$(this).addClass("active");

$("#MainShop").remove();
$('.shop').removeClass("activeShop");
$("#OptionsShopCode").addClass("activeShop");
})
    .hover(hoverItem); 
});

</script>
<style>
    .activeShop{display: block
        !important;}
    .inactiveShop{display: none!important;}
    .active, .hover{
    border-bottom: #6ba1b2 1.5px solid;
    padding-bottom: 5px;
    cursor: pointer;
    }
</style>

Thanks!

ISS
  • 406
  • 6
  • 24
  • Possible duplicate of [Passing a function with parameters as a parameter?](https://stackoverflow.com/questions/1300242/passing-a-function-with-parameters-as-a-parameter) – JJJ Jan 27 '18 at 11:23
  • Not at all. while passing a parameter to a function.I want to pass a selector as parameter. Thanks anyway @JJJ ! – ISS Jan 27 '18 at 11:25
  • ... there is nothing special about selectors. The duplicate answers your question. – JJJ Jan 27 '18 at 11:28
  • I would like a specific answer not a general one. I am a newbie. – ISS Jan 27 '18 at 11:30
  • Christ on a bike. Read the duplicate, replace `myvar` with your selector and it's exactly the same as your code. – JJJ Jan 27 '18 at 11:31
  • @JulioPérez you can see it in the console log. The p value I passed the function appears in the console log, even though it sould have only fired up upon click. It's like the function calls all by itself instead of calling only on click. – ISS Jan 27 '18 at 11:35
  • @JulioPérez Yeah I know. I just don't have any idea how to fix this... – ISS Jan 27 '18 at 11:42

1 Answers1

1

I figured it out: I had to wrap the itemClicked() into an anonymous function like this:

  $("#DoorShopButon span.VMenu").hover(hoverItem).click(function(){
        itemClicked('#DoorShopCode');
    });

as opposed to: 

$("#DoorShopButon span.VMenu").hover(hoverItem).click(itemClicked('#DoorShopCode'));

At least appearently the code change prevented the .click() function form firing up automatically on Document Load.

Thanks everyone for tips and questions, without whose comments I would have not reached to a successful solution. Special thanks to @JJJ and @JulioPérez. I wish I could have given you a vote, but my reputation doesn't allow me to do that. Or at least it appears to me like that.

Cheers guys!

ISS
  • 406
  • 6
  • 24