javascript无法在我的网页上运行

时间：2017-10-01 05:35:11

标签： javascript jquery html ajax

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

感谢任何帮助.. 

$(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";
          }
    }

?>

2 个答案:

答案 0 :(得分：2)

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

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

...因为＆＃39; - ＆＃39;不是javascript变量名的有效字符。只需按tshirttext（在您的所有代码中）更改它，您就会看到alert并且应该可以继续。

我希望它有所帮助

答案 1 :(得分：1)

你的JavaScript有些错误。尝试通过验证程序运行JavaScript（例如，http://beautifytools.com/javascript-validator.php）以查看错误的位置。除了发现的一个A. Iglesias之外，第1行还有一个额外的衣服括号，第9行重复第3行的tshirt-text错误，以及在线成功的事件处理程序的语法13是不对的，但我不知道你要做什么。

你也有一个概念性的问题。第17行到第22行应位于$(document).ready处理程序中。 ready事件在初始HTML加载到浏览器并准备就绪后运行，因此对该事件处理程序的 之外的HTML元素的任何引用都可能在它们准备好之前引用它们

我想对你的问题发表评论，但这太长了，所以希望答案是可以的。也许一旦你修复了一些这些JavaScript问题，以编辑的形式发布你的问题的更新，然后我们可以看看如果它不起作用还会发生什么。

编辑：我重新格式化了您的JavaScript并尝试解决任何语法错误。如果您打开浏览器开发人员工具并运行此JS Fiddle（with comments和without comments），您将看到控制台中没有语法错误。这并不意味着它有效，只是它在语法上有效。实际上，这应该不起作用，因为我编写的AJAX success处理程序只是记录响应。

$(document).ready ( // When function parameters and code blocks are big, I like to
                    // put the opening ( or { at the end of line and put the the
                    // closing } or ) in the same column way at the end. I find it
                    // is easier to keep track of openings and closings.

    function() { // no extra close parenthesis right after "function"
        $("#btn").click(
            function()
            {
                var tshirtText = $('#tshirt-text').val(); // Variable names can only be
                                                          // letters, numbers, dollar symbols,
                                                          // and underscores. They cannot start
                                                          // with numbers.
                var size = $('#size').val();
                alert("tshirt-text");

                $.ajax(
                    { // For clarity, I'll separate out the opening ( and opening {
                      // and the closing } and closing ) when they are one after the other.
                        type:    'POST'
                        // I like to put my commas on the next line rather than the previous line.
                        // I think it makes it more clear that you're moving on to the next thing.
                      , data:    { "tshirt-text": tshirtText, size: size } // You can specify names in
                                                                           // this JSON-style syntax that
                                                                           // aren't valid JavaScript
                                                                           // identifiers, but you have
                                                                           // to put them in quotes.
                      , url:     "storeinfo.inc.php"
                      , success: function(data, textStatus, jqXhr)
                        {
                            console.log(data);
                        }
                    }
                );
            }
        );

        var $text = $('.tshirt-text');
        var $demoText = $('.demo-tshirt-text');

        $text.on(
            'keyup'
          , function (e) {
                $demoText.text($text.val());
            }
        );
    }
);
相关问题
最新问题