JavaScript在html中無法正常工作

我正在創建一個關於占星術的頁面，並希望用戶輸入他們的標誌。我創建了一個if語句，當我嘗試它時，沒有任何輸出到我的頁面。基本上我所要做的就是在輸入一個符號後打印出「您與___最兼容」。以下是我的代碼。JavaScript在html中無法正常工作

<!doctype html> 
<html class="no-js" lang="en"> 

<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<title>Astrology</title> 
<meta name="description" content=""> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" href="css/style.css"> 
</head> 

<body> 

<div class="row header"> 

<a href="index.html"> <img src="header.png" alt="logo" /> </a> 
<nav> 
<ul> 
<li><a href="index.html">Home</a></li> 
<li><a href="horoscope.html">Horoscope</a></li> 
<li><a href="Compatability.html">Compatability</a></li> 
<li><a href="signs.html">Signs</a></li> 
<li><a href="aboutus.html">Contact</a></li> 
</ul> 
</nav> 
</div> 

<h1><center>Type your Sign </center></h1> 
<input id="sign" type="text"> 
<button id="submit" type="button">Submit!</button> 
<p id="restults"></p> 


<script> 
document.getElementById("submit").onclick = function() { 
var sign = document.getElementById("sign").value; 
var results = document.getElementById("results"); 

if (sign == taurus) 
{ 
results.innerHTML = " you are most compatible with cancer " ; 
} 
else { 
results.innerHTML= "please enter a valid sign"; 

} 




} 

</script> 





<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
</script> 
<script src="js/index.js"></script> 



</body> 
</html>

來源

2017-05-06 chris2656

1.您需要先添加庫，然後再添加script代碼。

2. <p id="restults"></p>需要是<p id="results"></p>。

3. taurus需要被'taurus'

工作例如： -

document.getElementById("submit").onclick = function() { 
 
    var sign = document.getElementById("sign").value; 
 
    var results = document.getElementById("results"); 
 

 
    if (sign == 'taurus') 
 
    { 
 
    results.innerHTML = " you are most compatible with cancer " ; 
 
    } 
 
    else { 
 
    results.innerHTML= "please enter a valid sign"; 
 

 
    } 
 
}

<!doctype html> 
 
    <html class="no-js" lang="en"> 
 
    \t <head> 
 
    \t \t <meta charset="utf-8"> 
 
    \t \t <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    \t \t <title>Astrology</title> 
 
    \t \t <meta name="description" content=""> 
 
    \t \t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    
 
    \t \t <link rel="stylesheet" href="css/style.css"> 
 
    
 
    \t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    \t \t <script src="js/index.js"></script> 
 
    \t </head> 
 
    
 
    \t <body> 
 
    
 
    \t \t <div class="row header"> 
 
    
 
    \t \t <a href="index.html"> <img src="header.png" alt="logo" /> </a> 
 
    \t \t <nav> 
 
    \t \t <ul> 
 
    \t \t <li><a href="index.html">Home</a></li> 
 
    \t \t <li><a href="horoscope.html">Horoscope</a></li> 
 
    \t \t <li><a href="Compatability.html">Compatability</a></li> 
 
    \t \t <li><a href="signs.html">Signs</a></li> 
 
    \t \t <li><a href="aboutus.html">Contact</a></li> 
 
    \t \t </ul> 
 
    \t \t </nav> 
 
    \t \t </div> 
 
    
 
    \t \t <h1><center>Type your Sign </center></h1> 
 
    \t \t <input id="sign" type="text"> 
 
    \t \t <button id="submit" type="button">Submit!</button> 
 
    \t \t <p id="results"></p> <!-- not restults--> 
 
    \t </body> 
 
    </html>

來源

2017-05-06 19:09:29

哦，我肯定看到這可能是錯誤的，但不幸的是，「你是最適合的」的部分仍然沒有出現 – chris2656

它現在！非常感謝你有一個美好的一天:) – chris2656

@Christine很樂意幫助你，祝你有美好的一天:) :) –

嘗試的jQuery的的onclick聽衆。在您的頁面標題中輸入以下內容：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

並將腳本更改爲;

$('submit').click(function(event) { 
    var sign = document.getElementById("sign").value; 
    var results = document.getElementById("results"); 

    if (sign == 'taurus') 
    { 
     results.innerHTML = " you are most compatible with cancer " ; 
    } 
    else { 
     results.innerHTML= "please enter a valid sign"; 
    } 
});

來源

2017-05-06 19:31:10

JavaScript在html中無法正常工作

回答

相關問題