2016-07-29 98 views
-1

但是,註釋掉的JavaScript可行,但我需要在jQuery中使用它來實現移動觸摸功能。所以我試圖轉換成jQuery,但它不能正常運行。這個程序做的是計算二次方程。對不起,變量名稱。我的錯誤是什麼?該網頁加載,但當我按下按鈕什麼也沒有發生。Jquery代碼不工作,但JavaScript是。我的錯誤是什麼?

  <!DOCTYPE html> 
    <html> 

    <head> 
     <meta charset="utf-8"> 
     <title>Quadratic Calculator</title> 
     <!-- Latest compiled and minified CSS --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
     <!-- Optional theme --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
     <!-- Latest compiled and minified JavaScript --> 
     <!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css"> --> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

     <!-- Bootstrap --> 
     <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/flatly/bootstrap.min.css" rel="stylesheet" media="screen"> 
     <style> 
     .jumbotron { 
      background-color: aliceblue; 
     } 

     body { 
      background-color: aliceblue; 
      font-family: sans-serif; 
      color: black; 
     } 

     .equation { 
      font-size: 1.75rem; 
      background-color: aliceblue; 
      text-align: center; 
      font-family: sans-serif; 
      font-weight: bold; 
      white-space: nowrap; 
      overflow: hidden; 
     } 

     h1 { 
      text-align: center; 
     } 

     button { 
      text-align: center; 
      font-size: 2em; 
      font-weight: bold; 
     } 

     input { 
      width: 5rem; 
     } 

     #or { 
      display: none; 
     } 

     #x2 { 
      display: none; 
     } 

     .button-secondary { 
      background: rgb(66, 184, 221); 
      /* this is a light blue */ 
      color: white; 
     } 
     </style> 
    </head> 

    <body> 
     <div class="container"> 
     <!-- Quadratic Equation --> 
     <div class="page-header"> 
      <h1>Quadratic Calculator</h1></div> 
     <div class="jumbotron"> <input type="number" class="equation" name="a" id="a"> <span class="equation">x<sup>2</sup>+ </span> <input type="number" class="equation" name="b" id="b"> <span class="equation">x+ </span> <input type="number" class="equation" name="c" id="c"> 
      <span class="equation">= 0</span> <br> <br> <button id='submit' class="btn btn-success">Submit</button> <br> <br> <button id='clear' class="btn button-secondary">Clear</button> 
      <h2 id='x1'>x=</h2> 
      <h2 id="or">or</h2> 
      <h2 id='x2'>x=</h2> </div> 




     </div> 





     <!--<script> 
       var submit = document.getElementById('submit'); 
       var clear = document.getElementById('clear'); 
       function quadraticFunction() { 
        var or = document.getElementById('or'); 
        var x2 = document.getElementById('x2'); 
        var a = document.getElementById("a").value; 
        var b = document.getElementById("b").value; 
        var c = document.getElementById("c").value; 
        var x1 = document.getElementById('x1'); 
        if (a === null) { 
         a = 1; 
        } 
        var d = Math.sqrt((b * b) - (4 * a * c)); 
        var answer1 = (-b - d)/(2 * a); 
        var answer2 = (-b + d)/(2 * a); 
        if (isNaN(answer1) && isNaN(answer2)) { 
         x1.innerHTML = "x = imaginary number"; 
         or.style.display = "none"; 
         x2.style.display = "none"; 
        } else { 
         if (a == 0) { 
          x1.innerHTML = "This is not a quadratic equation!"; 
         } 
         if (answer1 == answer2) { 
          x1.innerHTML = "x = " + answer1; 
          or.style.display = "none"; 
          x2.style.display = "none"; 
         } else { 
          x1.innerHTML = "x = " + answer1; 
          x2.innerHTML = "x = " + answer2; 
          or.style.display = "block"; 
          x2.style.display = "block"; 
         } 
        } 
       } 


      var clearer = function() { 
       var x1 = document.getElementById('x1'); 
       var x2 = document.getElementById('x2'); 
       var or = document.getElementById('or'); 
       x1.innerHTML = "x ="; 
       x2.style.display = "none"; 
       or.style.display = "none"; 
      } 

      ; 
      submit.addEventListener("click", quadraticFunction); 
      clear.addEventListener("click", clearer); 
       </script>--> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script> 
     <script> 
     var submit = $("#submit"); 
     var clear = $("#clear"); 

     function quadraticEquation() { 
      //Declaring variables 
      var or = $("#or"); 
      var x1 = $("#x1"); 
      var x2 = $("#x2"); 
      var a = $("#a").val(); 
      var b = $("#b").val(); 
      var c = $("#c").val(); 


      if (a == null) { 
      a = 1; 
      } 

      var d = Math.sqrt((b * b) - (4 * a * c)); 
      var answer1 = (-b - d)/(2 * a); 
      var answer2 = (-b + d)/(2 * a); 
      if (a == 0) { 
      x1.text(「This is not a quadratic equation!」); 
      or.css(「visibility」, 「hidden」); 
      x2.css(「visibility」, 「hidden」); 
      return; 
      } 

      if (isNaN(answer1) && isNaN(answer2)) { 
      x1.text(「x = imaginary number」); 
      or.css(「display」, 「none」); 
      x2.css(「display」, 「none」); 

      } else { 
      if (answer1 == answer2) { 
       x1.text(「x = 「+answer1); 
       or.css(「display」, 「none」); 
       x2.css(「display」, 「none」); 
      } else { 

       x1.text(「x = 「+answer1); 
       x2.text(「x = 「+answer2); 
       or.css(「display」, 「block」); 
       x2.css(「display」, 「block」); 

      } 

      } 
     } 

     function clearer() { 
      var or = $("#or"); 
      var x1 = $("#x1"); 
      var x2 = $("#x2"); 

      x1.text(「x = 「); 
      or.css(「display」, 「none」); 
      x2.css(「display」, 「none」); 

     } 

     submit.on(「click」, function() { 
      quadraticEquation(); 
     }); 

     clear.on(「click」, function() { 
      clearer(); 
     }); 
     </script> 
    </body> 

    </html> 
+1

你能詳細說明你的代碼「不起作用」嗎?你在期待什麼,究竟發生了什麼?如果您遇到異常/錯誤,請發佈其發生的行和異常/錯誤的詳細信息。請[編輯]這些細節或我們可能無法提供幫助。 – FrankerZ

+0

請檢查您的jQuery版本中的引號,它們看起來像是從源代碼中用「智能引號」複製的,因此它們不匹配。 – jmoerdyk

+1

你的jQuery代碼真的有非標準的引號,比如'''「」'或者是複製和粘貼的工件嗎? –

回答

0

當你從其他來源粘貼你的代碼轉移單蜱,而不是單引號: var submit = $(‘#submit’);應該var submit = $('#submit');

+0

他的雙引號也是錯誤的。 – jmoerdyk

+0

是的,我有點停在那裏。 :) – Fraccus

0

在所有選擇你有反勾,而不是報價;解決這個問題並看看你得到了什麼

+0

黑蜱和單引號有什麼區別? – peter

+0

它們是不同的字符,它們來自鍵盤上的不同按鈕 –

+1

它們具有不同的unicode值,因此瀏覽器會以不同的方式解釋它們。 ''(\ u0027)''和''(\ u2018)'不一樣。 – Fraccus

相關問題