Adding javascript causing divs not getting displayed on website

Question

I have a select field ('5f01264e722ae') with which I would like to change the color of a text print ('.sw_poster_text2'). With a little help from another member, I uploaded the script below. However, as soon as I undo the // from the .change function my website no longer displays the print, image on which to print, and then select options. Any idea how to fix this? Here is a link of the working page: https://www.horseglamour.com/product/pagony-concours-zadeldek/

Thank you for your help.

<script>
  jQuery(document).ready(function() {

    var fieldId = "5f0124e773aa8"; // Change this
    var defaultText = "my name"; // Change this

    if (!jQuery('input[data-field-id="' + fieldId + '"]').length)
      return;

    var $el = jQuery('<div class="sw_poster_text2">').html(defaultText);
    $el.appendTo(jQuery('.woocommerce-product-gallery--with-images'));

    jQuery(document).on('change keyup', 'input[data-field-id="' + fieldId + '"]', function() {
      var v = jQuery(this).val() || defaultText;
      jQuery('.sw_poster_text2').html(v);

    }).trigger('change');
    //$("select[data-field-id='5f01264e722ae']").change(function() {
    //var color = $(this).find('option:selected').data('wapf-label')
    //$(".sw_poster_text2").css("color", color);
    //});

  });
</script>

Petr Savchenko · Accepted Answer · 2020-07-07 13:31:46Z

You can alter commented out part of your script to following:

jQuery("select[data-field-id='5f01264e722ae']").change(function() {
    var color = jQuery(this).find('option:selected').data('wapf-label')
    jQuery(".sw_poster_text2").css("color", color);
});

or if you perfer $ to access jQuery you can reference to it in callback https://api.jquery.com/jquery.noconflict/

jQuery(document).ready(function($) {
    
    var fieldId = "5f0124e773aa8"; // Change this
    var defaultText = "my name"; // Change this
    
    if(!jQuery('input[data-field-id="'+fieldId+'"]').length)
        return;
        
    var $el = jQuery('<div class="sw_poster_text2">').html(defaultText);
    $el.appendTo(jQuery('.woocommerce-product-gallery--with-images'));
    
    jQuery(document).on('change keyup','input[data-field-id="'+fieldId+'"]',function(){
        var v = jQuery(this).val() || defaultText;
        jQuery('.sw_poster_text2').html(v);
        
    }).trigger('change');
    $("select[data-field-id='5f01264e722ae']").change(function() {
        var color = $(this).find('option:selected').data('wapf-label')
        $(".sw_poster_text2").css("color", color);
    });  
});

Collectives™ on Stack Overflow

Adding javascript causing divs not getting displayed on website

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related