时间戳

首页 > 解决方案 > why is My jquery code not working though i have the scripts intact?

javascript - why is My jquery code not working though i have the scripts intact?

问题描述

let playing = false
let score

$(function() {
  // start smash
  $('startgame').click(function() {
    if (playing == true) {
      location.reload()
    } else {
      playing = true
     score = 0
      $('#scorevalue').html(score)
      $('life').show()
    }
  })
})
html {
  height: 100%;
  background: skyblue;
}

#container {
  height: 640px;
  width: 700px;
  background-color: white;
  margin: 70px auto;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0px 4px 3px 0px;
  position: relative;
}
#scorebox {
  height: 30px;
  width: 90px;
  background-color: powderblue;
  text-align: center;
  border-radius: 5px;
  box-shadow: 0px 2.5px 4px 0px;
  padding: 4px;
  position: absolute;
  left: 600px;
  top: 10px;
}
#fruitsdisp {
  height: 460px;
  width: 560px;
  background-color: ghostwhite;
  padding: 10px;
  border-radius: 15px;
  position: relative;
  left: 60px;
  top: 60px;
  box-shadow: 0px 1px 2px 0px;
}

#startgame {
  height: 35px;
  width: 200px;
  background-color: powderblue;
  border-radius: 5px;
  box-shadow: 0px 2.5px 4px 0px;
  font-family: fantasy;
  font-size: 20px;
  padding-top: 5px;
  text-align: center;
  position: absolute;
  left: 280px;
  top: 610px;
}
#gameover {
  height: 260px;
  width: 480px;
  background-color: gainsboro;
  padding: 10px;
  border-radius: 15px;
  position: absolute;
  left: 120px;
  top: 170px;
  box-shadow: 0px 1px 2px 0px;
  text-align: center;
  font-size: 5em;
  z-index: 2;
  font-family: monospace;
  display: none;
}
#life {
  height: 35px;
  width: 130px;
  background-color: powderblue;
  border-radius: 5px;
  box-shadow: 0px 2.5px 4px 0px;
  font-family: serif;
  font-size: 20px;
  padding-top: 5px;
  text-align: center;
  position: absolute;
  top: 10px;
  display: none;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Fruit Smash</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1,user-scalable=yes"
    />
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"
    />
  </head>
  <body>
    <div id="container">
      <div id="scorebox">score: <span id="scorevalue">0</span></div>

      <div id="fruitsdisp"></div>

      <div id="startgame">SMASH</div>

      <div id="gameover">GAME OVER! YOUR SCORE IS <span>0</span></div>

      <div id="life">life</div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="jquery.js"></script>
  </body>
</html>

I'm stuck here as my jquery code is not running. Here is my html, css and jquery code.

As soon as I click the smash button, it should show the <div id="life">life</div> element But this is not happening and I don't know why.

I have been using brackets to run my code. Html and css are running ok but jquery isn't. I would like to know where I went wrong in this.

标签： javascriptjqueryhtml

解决方案

您使用了错误的选择器，id 选择器应以“#”为前缀

var playing = false;
var score;

$(function() {
    
    //start smash
    $("#startgame").click(function(){
       
        if(playing == true){
            location.reload();
        }else{
            
            playing=true;
            score=0;
            $("#scorevalue").html(score);
            
            $("#life").show();
            
        }
        
    });
    
    



});
html{
    height: 100%;
    background: skyblue;
}


#container{
    height: 640px;
    width: 700px;
    background-color: white;
    margin:  70px auto ;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0px 4px 3px 0px;
    position: relative;
}
#scorebox{
    height: 30px;
    width: 90px;
    background-color: powderblue;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0px 2.5px 4px 0px;
    padding: 4px;
    position: absolute;
    left: 600px;
    top: 10px;
    
}
#fruitsdisp{
    height:460px;
    width: 560px;
    background-color: ghostwhite;
    padding: 10px;
    border-radius: 15px;
    position: relative;
    left: 60px;
    top: 60px;
    box-shadow: 0px 1px 2px 0px;
}

#startgame{
    height: 35px;
    width: 200px;
    background-color: powderblue;
    border-radius: 5px;
    box-shadow: 0px 2.5px 4px 0px;
    font-family: fantasy;
    font-size: 20px;
    padding-top: 5px;
    text-align: center;
    position: absolute;
    left: 280px;
    top: 610px;
}
#gameover{
     height:260px;
    width: 480px;
    background-color: gainsboro;
    padding: 10px;
    border-radius: 15px;
    position: absolute;
    left: 120px;
    top: 170px;
    box-shadow: 0px 1px 2px 0px;
    text-align: center;
   font-size: 5em;
    z-index:2;
    font-family: monospace;
    display: none;
}
#life{
     height: 35px;
    width: 130px;
    background-color: powderblue;
    border-radius: 5px;
    box-shadow: 0px 2.5px 4px 0px;
    font-family:serif;
    font-size: 20px;
    padding-top: 5px;
    text-align: center;
    position: absolute;
    top: 10px;
    display: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
        <title>Fruit Smash</title>    
        <meta charset="utf-8">
        <meta name = "viewport"
              content = "width=device-width, initial-scale=1,user-scalable=yes">
    <link rel="stylesheet"
          href = "style.css">
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    

</head>

<body>
    
    <div id ="container">
        
        <div id = "scorebox">
    score: <span id="scorevalue">0</span>
    </div>
        
    <div id="fruitsdisp">
        </div>
        
        <div id="startgame">SMASH
        </div>
        
        <div id="gameover">GAME OVER! 
        YOUR SCORE IS <span>0</span></div>
        
        <div id="life">life
        </div>
    
    
    
    </div>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">
    </script>
    
    <script src="jquery.js">
    </script>

    
</body>








</html>

推荐阅读