每次运行jQuery函数时重置变量值

Question

I want to run my function when the page first loads, and again when certain elements are clicked. Each time this function is ran I need it to update the variables, but as it sits right now it is keeping the values that it found the first time the function ran.

I tried searching for this issue and found people saying to just set it to null, or undefined. So I tried doing this by adding var price = null;, var x = null;, etc. at the end of the function. That didn't do anything. So I tried adding an if statement at the top to see if price has a value greater than 0, and then changing every variable to null if it is. This didn't change anything. Now I'm not sure if I need to just re-write the entire thing, or maybe there is some other detail that I am missing?

Thanks in advance for your help.

    jQuery(document).ready(function(){

    var bessie = function(){

        //remove or reset value of variables for next time function runs
        if(price > 0){
        var qtyCode = null;
        var qty = null;
        var price = null;
        var total = null;
        var newContent = null;
        };

        //Pull html code for plus/minus qty selector
        var qtyCode = jQuery('.qtyswitcher-qty').html();

        //Get value of qty that is currently selected
        var qty = jQuery('#qtyswitcher-qty').val(); 

        //Pull the current price and change the string to a number
        var price = jQuery('.price').first().text().replace(/[^0-9\.]+/g,""); 

        //multiply price by qty to get the total for the users current selection
        var total = price * qty;

        //New html that will be inserted into the page
        var newContent = '<p class="multiply">' + '$' + price + '/ea</p>' + '<p class="multiply2">x</p>' + '<div id="qty">' + qtyCode + '</div>' + '<p class="multiply3">=</p> <p class="multiply">' + '$' + total.toFixed(2) + '</p>';

        //New html being inserted
        jQuery(".qtyswitcher-qty").replaceWith(newContent);
    };

    bessie();
    jQuery('.switcher-label').click(bessie);
    jQuery('#qtyswitcher-oneless').click(bessie);
    jQuery('#qtyswitcher-onemore').click(bessie);    

});

Moved some things around and added some new code based on Data's comments. I'm not sure I did this correctly. I had also tried it with and without the parenthesis as was mentioned below. It's still staying as $9.00 even though you can see that the .price element is changing on the page when the items are clicked.

Link to page with the html I am messing with

<script type="text/javascript">

    var bessie = function(){

        //Pull html code for plus/minus qty selector
        var qtyCode = jQuery('.qtyswitcher-qty').html();

        //Get value of qty that is currently selected
        var qty = jQuery('#qtyswitcher-qty').val(); 

        //Pull the current price and change the string to a number
        var price = jQuery('.price').first().text().replace(/[^0-9\.]+/g,""); 

        //multiply price by qty to get the total for the users current selection
        var total = price * qty;

        //New html that will be inserted into the page
        var newContent = '<p class="multiply">' + '$' + price + '/ea</p>' + '<p class="multiply2">x</p>' + '<div id="qty">' + qtyCode + '</div>' + '<p class="multiply3">=</p> <p class="multiply">' + '$' + total.toFixed(2) + '</p>';

        //New html being inserted
        jQuery(".qtyswitcher-qty").replaceWith(newContent);
    }; 


    bessie();

    $('.switcher-label, #qtyswitcher-oneless, #qtyswitcher-onemore' ).on('dblclick click', function(e) { 
        bessie(e);
        e.stopImmediatePropagation();  
    });   


</script>

Found the problem now, but still working on a complete solution. The .replaceWith(); was replacing the html in a way that made it not able to display updated info. The code below is working, but the problem now is that I need to find a way replace the html each time without breaking it. The way it sits now it is adding more html to the page when an element is clicked. My code is still a bit messy.

<script type="text/javascript">
jQuery(document).ready(function() {

    var bessie = function(){

        //Pull html code for plus/minus qty selector
        var qtyCode = jQuery('.qtyswitcher-qty').html();

        //Get value of qty that is currently selected
        var qty = jQuery('#qtyswitcher-qty').val(); 

        //Pull the current price and change the string to a number
        var price = jQuery('.price').first().text().replace(/[^0-9\.]+/g,""); 

        //multiply price by qty to get the total for the users current selection
        var total = price * qty;

        //New html being inserted

        jQuery(".qtyswitcher-add-to-cart-box").append('<p class="multiply">' + '$' + price + '/ea</p>' + '<p class="multiply2">x</p>' + '<div id="qty">');

        jQuery(".qtyswitcher-qty").append('</div>' + '<p class="multiply3">=</p> <p class="multiply">' + '$' + total.toFixed(2) + '</p>');

    }; 

    bessie();
    jQuery('.switcher-label').click(bessie);
    jQuery('.input-box').click(bessie);
    jQuery('#qtyswitcher-oneless').click(bessie);
    jQuery('#qtyswitcher-onemore').click(bessie);

});
</script>

Answer 1

It's easier to separate html from javascript, so I recommend using handlebars. You pass an object and it returns html you can then use in jQuery. Notice the html string uses back-ticks to concatenate multi-line strings.

<script>

    var html = `<p class="multiply">${{price}}/ea</p>
                <p class="multiply2">x</p><div id="qty">{{qtyCode}}</div>
                <p class="multiply3">=</p><p class="multiply">'$'{{total}}</p>`;

    function bessie(){

        var obj = { 'qtyCode' : $('.qtyswitcher-qty').html(),
                    'qty'     : $('#qtyswitcher-qty').val(),
                    'price'   : $('.price').first().text().replace(/[^0-9\.]+/g,"") };

        obj.total = obj.price * obj.qty;

        var template = handlebars.compile(html),
            compiled = template(obj);

        $(".qtyswitcher-qty").replaceWith(compiled);

    };

    function addListeners(){
        $('.switcher-label').click(bessie());
        $('#qtyswitcher-oneless').click(bessie());
        $('#qtyswitcher-onemore').click(bessie()); 
    }

    $(document).ready( addListeners(); bessie(); );

</script>

Answer 2

Fixed it! Used insertBefore() and insertAfter() to add the html content where I wanted it. Also added a div with the class remove me that will have .remove(); used on it each time an element is clicked.

<script type="text/javascript">
jQuery(document).ready(function() {

    var bessie = function(){

        //Pull html code for plus/minus qty selector
        var qtyCode = jQuery('.qtyswitcher-qty').html();

        //Get value of qty that is currently selected
        var qty = jQuery('#qtyswitcher-qty').val(); 

        //Pull the current price and change the string to a number
        var price = jQuery('.price').first().text().replace(/[^0-9\.]+/g,""); 

        //multiply price by qty to get the total for the users current selection
        var total = price * qty;

        //New html being inserted

        jQuery( '<div class="removeMe"><p class="multiply">' + '$' + price + '/ea</p>' + '<p class="multiply2">x</p>' + '</div><div id="qty">' ).insertBefore( '.qtyswitcher-qty');
        jQuery( '</div>' + '<div class="removeMe"><p class="multiply3">=</p> <p class="multiply">' + '$' + total.toFixed(2) + '</p></div>' ).insertAfter( '.qtyswitcher-qty' );
    }; 

    bessie();
    jQuery('.switcher-label, .input-box, #qtyswitcher-oneless, #qtyswitcher-onemore' ).click(function() {
        jQuery( '.removeMe' ).remove();
        bessie();
});

});
</script>