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>

答

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>

哦，我肯定看到这可能是错误的，但不幸的是，“你是最适合的”的部分仍然没有出现 – 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"; 
    } 
});

JavaScript在html中无法正常工作

相关推荐