Why is my code that displays stars on button click not working?-CodePudding

I have this code. When you press a button it's supposed to display some stars but it's not working. I don't know why. can anyone help me?

// Options
var stars = 15;
var starSize = 96;
var starDistance = 200;
var starSpeed = 1.25;
var colors = [
   "#ff0000", "#ff7f00", "#80ff00", "#00ff80", "#00ffff",
  "#0080ff", "#0000ff", "#8000ff", "#ff00ff", "#fe007f"
];
function buildStars() 
{
    for (i = 0; i < stars; i  ) {
        var id = 'gStar'   i;
        var sz = Math.floor((Math.random() * (starSize))   (starSize / 3));
        var createStar = {
            id: id,
            class: "gStar",
            html: '<i ></i>',
            css: {
                position: 'absolute',
                zIndex: 510,
                fontSize: sz   'px',
        opacity: 0
            }
        };
        $("body").append($("<div>", createStar));
    }
}

function fireStars() 
{
    var target = $("body");
  
  theme_color = colors[Math.floor(Math.random() * colors.length)];
    do { theme_color_secondary = colors[Math.floor(Math.random() * colors.length)]; } 
  while ( theme_color_secondary === theme_color )
  
    for (i = 0; i < stars; i  ) {
        var sz = $("#gStar"   i).css("font-size").substr(0, ($("#gStar"   i).css("font-size").length - 2));
        var dist = Math.floor((Math.random() * (starDistance))   (starDistance / 4));
        var angle = Math.floor((Math.random() * (i   1 * (360 / stars)))   (i * (360 / stars)));
    
        $("#gStar"   i).offset({top: target.offset().top   (target.height() / 2) - (sz / 2), left: target.offset().left   (target.width() / 2) - (sz / 2) });

        var tl = gsap.timeline();
        tl.set('#gStar'   i, { x: 0, y: 0, rotation: 0, scale: 0.35, left: target.offset().left   (target.width() / 2) - (sz / 2), top: target.offset().top   (target.height() / 2) - (sz / 2), color: ((i % 2 === 0) ? theme_color : theme_color_secondary) })
        .to('#gStar'   i, 0.35, { autoAlpha: .7 })
        .to('#gStar'   i, (Math.floor((Math.random() * (starSpeed * 100))   ((starSpeed * 100) / 3)) / 100), {
            x: Math.cos(angle * Math.PI / -180) * Math.floor((Math.random() * (starDistance))   (starDistance / 4)), 
      y: Math.sin(angle * Math.PI / -180) * Math.floor((Math.random() * (starDistance))   (starDistance / 4)), 
            rotation: 280, scale: 1,
            ease: Power0.easenone,
            z: 0.01, force3D: true
        }, '<')
        .to('#gStar'   i, 0.35, { 
            autoAlpha: 0,
            z: 0.01,
            force3D: true
        }, ">-.25");
    }
}

buildStars();
$("body").click(fireStars);

html, body {
    overflow: hidden;
    margin: 0;
    width: 100%;
    height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

span {
  font-size: 48px; 
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
  font-weight: 100;
  opacity: .85;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>Good Job</span>

CodePudding user response：

You were missing fontAwesome AND GSAP

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/gsap.min.js" integrity="sha512-6zTDRWNxo8vI6JZYDCwhrJpg5icK3P4HNnW3czsO5Scb3lAoPDam /wF3eog4hxcl0h44d0XlIcFkuoSaWHQ2g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

// Options
var stars = 15;
var starSize = 96;
var starDistance = 200;
var starSpeed = 1.25;
var colors = [
   "#ff0000", "#ff7f00", "#80ff00", "#00ff80", "#00ffff",
  "#0080ff", "#0000ff", "#8000ff", "#ff00ff", "#fe007f"
];
function buildStars() 
{
    for (i = 0; i < stars; i  ) {
        var id = 'gStar'   i;
        var sz = Math.floor((Math.random() * (starSize))   (starSize / 3));
        var createStar = {
            id: id,
            class: "gStar",
            html: '<i ></i>',
            css: {
                position: 'absolute',
                zIndex: 510,
                fontSize: sz   'px',
        opacity: 0
            }
        };
        $("body").append($("<div>", createStar));
    }
}

function fireStars() 
{
    var target = $("body");
  
  theme_color = colors[Math.floor(Math.random() * colors.length)];
    do { theme_color_secondary = colors[Math.floor(Math.random() * colors.length)]; } 
  while ( theme_color_secondary === theme_color )
  
    for (i = 0; i < stars; i  ) {
        var sz = $("#gStar"   i).css("font-size").substr(0, ($("#gStar"   i).css("font-size").length - 2));
        var dist = Math.floor((Math.random() * (starDistance))   (starDistance / 4));
        var angle = Math.floor((Math.random() * (i   1 * (360 / stars)))   (i * (360 / stars)));
    
        $("#gStar"   i).offset({top: target.offset().top   (target.height() / 2) - (sz / 2), left: target.offset().left   (target.width() / 2) - (sz / 2) });

        var tl = gsap.timeline();
        tl.set('#gStar'   i, { x: 0, y: 0, rotation: 0, scale: 0.35, left: target.offset().left   (target.width() / 2) - (sz / 2), top: target.offset().top   (target.height() / 2) - (sz / 2), color: ((i % 2 === 0) ? theme_color : theme_color_secondary) })
        .to('#gStar'   i, 0.35, { autoAlpha: .7 })
        .to('#gStar'   i, (Math.floor((Math.random() * (starSpeed * 100))   ((starSpeed * 100) / 3)) / 100), {
            x: Math.cos(angle * Math.PI / -180) * Math.floor((Math.random() * (starDistance))   (starDistance / 4)), 
      y: Math.sin(angle * Math.PI / -180) * Math.floor((Math.random() * (starDistance))   (starDistance / 4)), 
            rotation: 280, scale: 1,
            ease: Power0.easenone,
            z: 0.01, force3D: true
        }, '<')
        .to('#gStar'   i, 0.35, { 
            autoAlpha: 0,
            z: 0.01,
            force3D: true
        }, ">-.25");
    }
}

buildStars();
$("body").on("click",fireStars);

html, body {
    overflow: hidden;
    margin: 0;
    width: 100%;
    height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

span {
  font-size: 48px; 
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
  font-weight: 100;
  opacity: .85;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/gsap.min.js" integrity="sha512-6zTDRWNxo8vI6JZYDCwhrJpg5icK3P4HNnW3czsO5Scb3lAoPDam /wF3eog4hxcl0h44d0XlIcFkuoSaWHQ2g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<span>Good Job</span>

CodePudding user response：

The function gsap is not defined. Maybe the AJAX library is the problem.

I've an other code for you.

<button onclick='this.value=