javascript 无法在我的网页上运行

Question

我为我的大学项目制作了一个 T 恤设计网站。我添加了预览选项，当用户键入时，它会显示在 iframe 中的 T 恤上。当用户单击它时，我还添加了一个继续按钮，我希望文本存储在数据库中，但由于某种原因我无法让它工作。我在数据库部分使用ajax和php。但是ajax的javascript部分不起作用。甚至警报功能也不适用于onclick功能..

感谢任何帮助..

$(document).ready(function)() {    
$("#btn").click( function() {
  var tshirt-text =$('#tshirt-text').val();
           var size =$('#size').val();
    alert("tshirt-text");
          
     $.ajax ({
              type    :'POST',
              data     :{tshirt-text:tshirt-text,size:size},
               url        :"storeinfo.inc.php",
               success  :function(result)
     })    
    
});
        });
        
var $text = $( '.tshirt-text' );
var $demoText = $( '.demo-tshirt-text' );

$text.on( 'keyup', function ( e ) {
  $demoText.text( $text.val() );
} );        

body{
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding: 0px;
    overflow-x: hidden;
    font-family: sans-serif; 
}
header{                                                       
    padding: 8px;
    height:155px;
    color: white;
    background-color:#6495ED;
    clear: left;
    width:100%;
 }
footer
{   padding: 4px;
    color: white;
    background-color:#6495ED;
    width:100%;
    text-align:center;
    font-size:20px;
    font-family:Arial;
}

ul {                                                                               
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    width:100%;
}

li {
    float: left;
}

li a,.dropbtn {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: Arial;
    font-size: 20px;

}

li a:hover:not(.active), .dropdown:hover .dropbtn {
    background-color: #111;
}
li a.active {
    background-color: royalblue;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: royalblue;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

h2.tagline
{
text-align:center;
font-size:35px;
font-style:italic;
font-family: "Florence", cursive;
margin-top:-100px;
margin-left:-80px;
}

iframe {
width: 700px;
height: 700px;
margin: -590px 90px 20px 650px;
display: inline-block;
position: relative;
border:none;
}

.designcontainer {
display: inline-block;
margin:0 0 0 10px;
}

.colorbutton {
    background-color: #4CAF50; /* Green */
    border: none;
    color: black;
    padding: 15px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 14px;
    transition-duration: 0.4s;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}


.colorbutton:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.buttonw {background-color: white; color:black;} /* White */
.buttonb {background-color: blue; color:white;} /* Blue */
.buttonr {background-color: #f44336; color:white;} /* Red */ 
.buttony {background-color: yellow; } /* Yellow */




@keyframes click-wave {
  0% {
    height: 40px;
    width: 40px;
    opacity: 0.35;
    position: relative;
  }
  100% {
    height: 200px;
    width: 200px;
    margin-left: -80px;
    margin-top: -80px;
    opacity: 0;
  }
}

.option-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative;
  top: 5.33333px;
  right: 0;
  bottom:0;
  left: 0;
  height: 25px;
  width: 25px;
  transition: all 0.15s ease-out 0s;
  background: #cbd1d8;
  border: none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  margin-right: 0.5rem;
  outline: none;
  position: relative;
  z-index: 1000;
  line-height: 50px;
}
.option-input:hover {
  background: #9faab7;
}
.option-input:checked {
  background: royalblue;
}
.option-input:checked::before {
  height: 15px;
  width: 15px;
  position: absolute;
  content: '\2714';
  display: inline-block;
  font-size: 26.66667px;
  text-align: center;
  line-height: 28px;
}
.option-input:checked::after {
  -webkit-animation: click-wave 0.65s;
  -moz-animation: click-wave 0.65s;
  animation: click-wave 0.65s;
  background: royalblue;
  content: '';
  display: block;
  position: relative;
  z-index: 100;
}
.option-input.radio {
  border-radius: 50%;
}
.option-input.radio::after {
  border-radius: 50%;
}
.labelname
{
    font-size: 20px;

}

span {
    position: relative;
    display: inline-block;
    margin: 30px 10px;
  }
.gate {
  display: inline-block;
  width: 500px;
  height: 100px;
  padding: 10px 0 10px 15px;
  font-family: "Open Sans", sans;
  font-weight: 400;
  color: royalblue;
  background: #c6c6c6;
  border: 0;
  border-radius: 10px;
  outline: 0;
  text-indent: 65px;
  transition: all .3s ease-in-out;
  
}
.gate::-webkit-input-placeholder {
  color: #c6c6c6;
  text-indent: 0;
  font-weight: 300;
    font-size:18px;
}
.gate + label {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 15px;
  text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
  background: royalblue;
  transition: all .4s ease-in-out;
  border-radius:5px;
  transform-origin: left bottom;
  z-index: 99;
    color:white;
    size:18px;
}
.gate + label:before, .gate + label:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 10px;
  background: royalblue;
  transform-origin: left bottom;
  transition: all .4s ease-in-out;
  pointer-events: none;
  z-index: -1;
  font-size:18px;
}
.gate + label:before {
  background: rgba(3, 36, 41, 0.2);
  z-index: -2;
  right: 20%;
    font-size:18px;
}

span:nth-child(2) .gate {
  text-indent: 85px;
}

span:nth-child(2) .gate:focus,
span:nth-child(2) .gate:active {
  text-indent: 0;
}

.gate:focus,
.gate:active {
  color: ;
  text-indent: 0;
  background:#c6c6c6;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.gate:focus::-webkit-input-placeholder,
.gate:active::-webkit-input-placeholder {
  color: floralwhite;
}
.gate:focus + label,
.gate:active + label {
  transform: rotate(-66deg);
  border-radius: 3px;
}
.gate:focus + label:before,
.gate:active + label:before {
  transform: rotate(10deg);
}


.demo-tshirt {
  position: relative;
  width: 200px;
  height: 100px;
 margin: 0 0 0 890px;
 z-index:999;

}

.demo-tshirt-text {
  position: absolute;
  top: 30%;
  left: 45%;
  width: 60%;
  transform: translateX( -45%);
  font-size:25px;
  color: black;
  font-family: Arial, sans-serif;
}

.spacereducer101{
margin-top:-80px;
}

<!DOCTYPE html>
<html>
<head>
<title>
T-shirtinator-PERSONALIZE
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="jquery-1.5.min.js"></script>
<LINK REL="icon" HREF="image/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/pshirts.css">  
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<header>
<br>
<img src="image/logo.png" >
<h2 class=tagline>"The T-shirt you design <br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
at your doorstep"</h2>

 </header>

<ul>
  <li><a href="homepage.php">Home</a></li>
  <li><a class="active" href="#ptshirts">Personalized T-shirts</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Buy From Us</a>
    <div class="dropdown-content">
      <a href="#">Quotes printed T-shirts</a>
      <a href="#">Graphic printed T-shirts</a>
      <a href="#">Memes printed T-shirts</a>
    </div>
  </li>
  <li><a href="help.php">Help</a></li>

 <li><a href="contactus.php">Contact Us</a></li>

 <li onclick="document.getElementById('id02').style.display='block'"style="float:right"><a href="#">Sign Up</a></li>
 <li onclick="document.getElementById('id01').style.display='block'" style="float:right"><a href="#">Login</a></li>
</ul>

    <div class="designcontainer">
    <h1>Select Colour</h1>

        <a href="iframetshirtwhite.html" target="myiframe"><button class="colorbutton buttonw">White</button></a> &nbsp;&nbsp;
<a href="iframetshirtred.html" target="myiframe"><button class="colorbutton buttonr">Red</button></a> &nbsp;&nbsp;
<a href="iframetshirtblue.html" target="myiframe"><button class="colorbutton buttonb">Blue</button></a> &nbsp;&nbsp;
    <a href="iframetshirtyellow.html" target="myiframe"><button class="colorbutton buttony">Yellow</button></a> &nbsp;&nbsp;
    
    <h1>Select Size</h1>
    

        <div>
  <label class="labelname">
    <input type="radio" class="option-input radio" id="size" name="size" value="small" checked />
    Small(S)
  </label>
  <label class="labelname">
    <input type="radio" class="option-input radio" id="size" name="size" value="medium" />
    Medium(M)
  </label>
  <label class="labelname">
    <input type="radio" class="option-input radio" id="size" name="size" value="large"/>
    Large(L)
  </label>
</div>

<div class=spacereducer101> </div>

<div class="demo-tshirt">
  <div class="demo-tshirt-text"></div>
</div> 
        
        <h1>Enter the Text you want on your T-shirt</h1>
        <span>
        <input type="text" name="tshirt-text" class="tshirt-text gate" id="tshirt-text" placeholder="Max 10 letters.." />
       <label for="tshirt-text">Enter</label>
        </span>
    
        <br>
        
        <input type="button" id="btn" name="Proceed" value="Proceed" class="colorbutton" style="margin-top:20px; margin-left:200px;">
        
      



  
<iframe name="myiframe" src="iframetshirtwhite.html"></iframe>
</div>
    <footer >
Copyright &copy;  2017 www.DAJ.com
</footer>
    
    
    
    

    




</body>




</html>

PHP 代码:

<?php

$connection =mysqli_connect('localhost','root','','textstorage');

if (mysqli_connect_errno()) {
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }

if($_POST['tshirt-text']){
     $tshirt-text  =$_POST['tshirt-text'];
     $size  =$_POST['size'];

     $q = "insert into information values('','tshirt-text','size')";

      $query = mysqli_query($connection,$q);
       if ($query) {
            echo"data inserted";
          }
    }

?>

Answer 1

如果您检查控制台，您会发现问题出在 javascript click 函数内的第一行...

var tshirt-text = $('#tshirt-text').val();

...因为“-”不是 javascript 变量名称的有效字符。只需通过 tshirttext 更改它(在您的所有代码中)，您就会看到警报并且应该能够继续。

希望对你有帮助