JQuery/JS script not running in html (works in Codepen)

I’m trying to make a decoding effect and I have found useful stack overflow questions to help with that but I am facing a weird problem. I have an example that I got from a stack overflow link(answer by Flambino) and it works perfectly fine. However, when I put it in my html files and test it locally, it doesn’t do anything(no decoding effect). My local code from these html files are below.

html,
head,
body {
  width: 100%;
  margin: 0;
  background-color: rgb(38, 64, 185);
}

* {
  font-family: 'Whitney', sans-serif;
  box-sizing: border-box;
}

div.mainContent {
  margin-top: 100px;
}

span.morphText {
  color: white;
}

.code {
  color: red;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="css/mainStyles.css">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <meta charset="utf-8">

  <script type="text/javascript">
    jQuery.fn.decodeEffect = (function($) {
      var defaultOptions = {
        duration: 3000,
        stepsPerGlyph: 10,
        codeGlyphs: "ABCDEFGHIJKLMNOPQRSTUWVXYZ1234567890",
        className: "code"
      };

      // get a random string from the given set,
      // or from the 33 - 125 ASCII range
      function randomString(set, length) {
        console.log("ues");
        var string = "",
          i, glyph;
        for (i = 0; i < length; i++) {
          console.log("ues");
          glyph = Math.random() * set.length;
          string += set[glyph | 0];
        }
        return string;
      }

      // this function starts the animation. Basically a closure
      // over the relevant vars. It creates a new separate span
      // for the code text, and a stepper function that performs
      // the animation itself
      function animate(element, options) {
        var text = element.text(),
          span = $("<span/>").addClass(options.className).insertAfter(element),
          interval = options.duration / (text.length * options.stepsPerGlyph),
          step = 0,
          length = 0,
          stepper = function() {
            if (++step % options.stepsPerGlyph === 0) {
              length++;
              element.text(text.slice(0, length));
            }
            if (length <= text.length) {
              span.text(randomString(options.codeGlyphs, text.length - length));
              setTimeout(stepper, interval);
            } else {
              span.remove();
            }
          };
        element.text("");
        stepper();
      }

      // Basic jQuery plugin pattern
      return function(options) {
        options = $.extend({}, defaultOptions, (options || {}));
        return this.each(function() {
          animate($(this), options);
        });
      };
    }(jQuery));

    $("#sometext").decodeEffect();
  </script>
</head>

<body>
  <div class="mainContent">
    <span id="sometext" class="morphText">
            Hello, world
        </span>
  </div>
</body>

</html>

133 thoughts on “JQuery/JS script not running in html (works in Codepen)”

  1. Pingback: modified keto diet
  2. Pingback: wales gay dating
  3. Pingback: clomid for sale
  4. Pingback: aralen 100mg
  5. Pingback: molnupiravir order
  6. Pingback: tamoxifen 50 mg
  7. Pingback: latisse lashes

Leave a Comment