如何让我的验证码生成验证码？

Question

The captcha code is not generating a captcha I have js, and php and css and html code written in I just can't Figure out why the captcha is not generating. Any help will be greatly appreciated, thanks!

The captcha code is not generating a captcha I have js, and php and css and html code written in I just can't Figure out why the captcha is not generating. Any help will be greatly appreciated, thanks!

function captchaCode() {
  var Numb1, Numb2, Numb3, Numb4, Code;
  Numb1 = (Math.ceil(Math.random() * 10) - 1).toString();
  Numb2 = (Math.ceil(Math.random() * 10) - 1).toString();
  Numb3 = (Math.ceil(Math.random() * 10) - 1).toString();
  Numb4 = (Math.ceil(Math.random() * 10) - 1).toString();

  Code = Numb1 + Numb2 + Numb3 + Numb4;
  $("#captcha span").remove();
  $("#captcha input").remove();
  $("#captcha").append("<span id='code'>" + Code + "</span><input type='button' onclick='captchaCode();'>");
}

$(function() {
  captchaCode();

  $('#contactForm').submit(function() {
    var captchaVal = $("#code").text();
    var captchaCode = $(".captcha").val();
    if (captchaVal == captchaCode) {
      $(".captcha").css({
        "color": "#609D29"
      });
    } else {
      $(".captcha").css({
        "color": "#CE3B46"
      });
    }

    var emailFilter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,10})+$/;
    var emailText = $(".email").val();
    if (emailFilter.test(emailText)) {
      $(".email").css({
        "color": "#609D29"
      });
    } else {
      $(".email").css({
        "color": "#CE3B46"
      });
    }

    var nameFilter = /^([a-zA-Z \t]{3,15})+$/;
    var nameText = $(".name").val();
    if (nameFilter.test(nameText)) {
      $(".name").css({
        "color": "#609D29"
      });
    } else {
      $(".name").css({
        "color": "#CE3B46"
      });
    }

    var messageText = $(".message").val().length;
    if (messageText > 50) {
      $(".message").css({
        "color": "#609D29"
      });
    } else {
      $(".message").css({
        "color": "#CE3B46"
      });
    }

    if ((captchaVal !== captchaCode) || (!emailFilter.test(emailText)) || (!nameFilter.test(nameText)) || (messageText < 50)) {
      return false;
    }
    if ((captchaVal == captchaCode) && (emailFilter.test(emailText)) && (nameFilter.test(nameText)) && (messageText > 50)) {
      $("#contactForm").css("display", "none");
      $("#forma").append("<h2>Message sent!</h2>");
      return false;
    }
  });
});

* {
  margin: 100;
  padding: 0
}

bodya {
  display: flex;
  justify-content: center;
  text-align: center;
  width: 60%;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  padding: 10px;
  margin: auto;
  position: relative;
  color: white;
  color: #B1B1B1;
  margin: 15px auto 0;
  margin-top: 50px;
  margin-left: auto;
  width: 410px;
}

#contacta {
  overflow: auto;
}

#contacta #forma {
  width: 410px;
  float: left;
}

#contacta #forma h2a {
  font: 48px 'Montserrat', Raleway, serif;
}

#contacta #forma span {
  display: flex;
  float: left;
  width: 100px;
  padding-top: 5px;
  font: 18px/20px'Montserrat', Raleway, serif;
}

#contacta #forma input {
  float: left;
  width: 255px;
  border: 0px;
  color: #F1F1F1;
  padding: 10px 10px 10px 30px;
  font: 18px/20px 'Montserrat', Raleway, sans-serif;
  margin-bottom: 10px;
}

#contacta #forma textarea {
  float: left;
  border: 0px;
  width: 255px;
  height: 140px;
  padding: 10px 10px 10px 30px;
  font: 18px/20px'Montserrat', Raleway, sans-serif;
  color: #F1F1F1;
  resize: none;
}

#contacta #forma input.name {
  background: #B1B1B1 url(http://img7.uploadhouse.com/fileuploads/17737/177370145f09fe433945815665aa214f80dbc6af.png) no-repeat 10px 8px;
}

#contacta #forma input.email {
  background: #B1B1B1 url(http://img6.uploadhouse.com/fileuploads/17737/177370138cc63992182149e9befabff3eafa6d23.png) no-repeat 10px 9px;
}

#contacta #forma input.captcha {
  background: #B1B1B1 url(http://img3.uploadhouse.com/fileuploads/17737/17737011310213e71805ecf2292144cbbecf42ad.png) no-repeat 10px 9px;
}

#contacta #forma textarea.message {
  background: #B1B1B1 url(http://img3.uploadhouse.com/fileuploads/17737/1773701229ed8c2f465a8274623ca8976adaf196.png) no-repeat 10px 8px;
}

#contacta #forma input.submit {
  cursor: pointer;
  width: 150px;
  height: 30px;
  float: center;
  padding: 0px 0px 5px 0px;
  margin: 50px 160px 10px 100px;
  background: #B1B1B1;
  color: #F1F1F1;
  font: 18px/20px'Montserrat', Raleway, serif;
}

#contacta #captcha span {
  width: 44px;
}

#contacta #captcha input {
  background: url(http://img3.uploadhouse.com/fileuploads/17737/17737011310213e71805ecf2292144cbbecf42ad.png) no-repeat scroll 0 0 transparent;
  margin: 5px 0 0;
  padding: 0;
  border: medium none;
  cursor: pointer;
  width: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="contacta">
  <div class="contenta">
    <div id="forma">
      <form action="php/send_form_email.php" id="contactForm" method="post" />
      <span>Name</span>
      <input type="text" name="name" class="name" placeholder="Enter your name" tabindex="1" />
      <span class="error"><?= $name_error ?></f></for>Email</span>
      <input type="text" name="email" class="email" placeholder="Enter your email" tabindex="2" />
      <span onload="captcha();" id="captcha"></span>

      <input type="text" name="captcha" class="captcha" maxlength="4" size="4" placeholder="Enter captcha code" tabindex="3" />
      <span class="error"><?= $captcha_error ?>Message</span>
      <textarea class="message" name="message" placeholder="Enter your message" tabindex="4"></textarea>
      <input type="submit" name="submit" value="Send e-mail" class="submit" tabindex="5" />
      </form>
    </div>
  </div>
</section>

</div>