我正在创建一个关于占星学的页面，并希望用户输入他们的星座。我创建了一个 if 语句，当我尝试它时，没有任何输出到我的页面。本质上，我想做的是让它在输入一个符号后打印出“you are most complic with ___”。以下是我的代码。
<!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">
<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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/index.js"></script>
</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="results"></p> <!-- not restults-->
</body>
</html>关于JavaScript 在 html pg 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43824360/