但是,註釋掉的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>
你能詳細說明你的代碼「不起作用」嗎?你在期待什麼,究竟發生了什麼?如果您遇到異常/錯誤,請發佈其發生的行和異常/錯誤的詳細信息。請[編輯]這些細節或我們可能無法提供幫助。 – FrankerZ
請檢查您的jQuery版本中的引號,它們看起來像是從源代碼中用「智能引號」複製的,因此它們不匹配。 – jmoerdyk
你的jQuery代碼真的有非標準的引號,比如'''「」'或者是複製和粘貼的工件嗎? –