使用 Intellij 上的教程创建了一个按钮，代码出了什么问题
Created a button using a Tutorial on Intellij what is wrong with the code?
正如标题所暗示的那样。 我试图做的是通过单击按钮来显示或隐藏上面的文本（在我的教程测验页面上）。所以发生的事情是文本显示的。但是当我单击按钮时，它不会隐藏。
这是我的"教程测验"页面的 html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial Quiz</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<script src="quizconfig.js">
</script>
<script>
var actualchoices=new Array()
document.cookie="ready=yes"
</script>
</head>
<body>
<header>
<a href="Tutorial Quiz.html" id="logo">
<h1>Webprograming Quiz</h1>
<h2>by Chris Moore</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Tutorial.html">Tutorial</a></li>
<li><a href="Tutorial Quiz.html"class="selected">Quiz</a></li>
<li><a href="Feedback.html">Feedback</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<p align="center">
<form method="POST" name="myquiz">
<font face="Arial"><big><big>General Knowledge Quiz</big></big></font></p>
<div class="qheader">1) What is the colour of Irn-Bru</div>
<div class="qselections">
<input type="radio" value="a" name="question1">a) Orange.<br>
<input type="radio" value="b" name="question1">b) Red.<br>
<input type="radio" value="c" name="question1">c) Green.<br>
<input type="radio" value="d" name="question1">d) Purple.<br>
</div>
<div id="target"> This is the hint you want to hide</div>
<button type="button" id="toggle">Get Hint</button>
<script>
var button = document.getElementById ("toggle");
var target = document.getElementById("target");
var bool = true;
function displayToggle() {
if (bool) {
target.setAttribute("class", "hide");
bool = false;
} else {
target.setAttribute("class", "show");
bool = true;
}
}
button.addEventListener("click",displayToggle, false);
</script>
<br>
<div class="qheader">
2) What is the world's most common religion?</div>
<div class="qselections">
<input type="radio" value="a" name="question2">a) Christianity<br>
<input type="radio" value="b" name="question2">b) Buddhism<br>
<input type="radio" value="c" name="question2">c) Hinduism<br>
<input type="radio" value="d" name="question2">d) Muslim<br>
</div>
<br>
<div class="qheader">
3) Which city ranks as the world's most populous city (2002)?</div>
<div class="qselections">
<input type="radio" value="a" name="question3">a) New York (US)<br>
<input type="radio" value="b" name="question3">b) Mexico City (Mexico)<br>
<input type="radio" value="c" name="question3">c) Tokyo (Japan)<br>
<input type="radio" value="d" name="question3">d) Shanghai (China)<br>
</div>
<br>
<div class="qheader">
4) What is the second largest country (in size) in the world?</div>
<div class="qselections">
<input type="radio" value="a" name="question4">a) USA<br>
<input type="radio" value="b" name="question4">b) China<br>
<input type="radio" value="c" name="question4">c) Canada<br>
<input type="radio" value="d" name="question4">d) Russia<br>
</div>
<br>
<div class="qheader">
5) As of January 2003, how much is Microsoft Chairman Bill Gates's net worth?</div>
<div class="qselections">
<input type="radio" value="a" name="question5">a) 10 million US<br>
<input type="radio" value="b" name="question5">b) 10 billion US<br>
<input type="radio" value="c" name="question5">c) 35 billion US<br>
<input type="radio" value="d" name="question5">d) 50 billion US<br>
</div>
<br>
<div class="qheader">
6) Which country below is not one of the members of the UN security council (Jan 2003)?</div>
<div class="qselections">
<input type="radio" value="a" name="question6">a) USA<br>
<input type="radio" value="b" name="question6">b) China<br>
<input type="radio" value="c" name="question6">c) Germany<br>
<input type="radio" value="d" name="question6">d) France<br>
</div>
<br>
<form>
<div align="center">
<input type="button" value="Grade Me!" name="B1" onClick="gradeit()"> <input type="button" value="Reset" name="B2" onClick="document.myquiz.reset()"></div>
</form>
<footer>
<a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<p>© 2014 Chris Moore.</p>
</footer>
</div>
</body>
</html>
这是我的Javascript，用于制作反馈页面
//Enter total number of questions:
var totalquestions=6
//Enter the solutions corresponding to each question:
var correctchoices=new Array()
correctchoices[1]='c' //question 1 solution
correctchoices[2]='a' //question 2 solution, and so on.
correctchoices[3]='c'
correctchoices[4]='c'
correctchoices[5]='c'
correctchoices[6]='c'
/////Don't edit beyond here//////////////////////////
function gradeit(){
var incorrect=null
for (q=1;q<=totalquestions;q++){
var thequestion=eval("document.myquiz.question"+q)
for (c=0;c<thequestion.length;c++){
if (thequestion[c].checked==true)
actualchoices[q]=thequestion[c].value
}
if (actualchoices[q]!=correctchoices[q]){ //process an incorrect choice
if (incorrect==null)
incorrect=q
else
incorrect+="/"+q
}
}
if (incorrect==null)
incorrect="a/b"
document.cookie='q='+incorrect
if (document.cookie=='')
alert("Your browser does not accept cookies. Please adjust your browser settings.")
else
window.location="Feedback.html"
}
function showsolution(){
var win2=window.open("","win2","width=200,height=350, scrollbars")
win2.focus()
win2.document.open()
win2.document.write('<title>Solution</title>')
win2.document.write('<body bgcolor="#FFFFFF">')
win2.document.write('<center><h3>Solution to Quiz</h3></center>')
win2.document.write('<center><font face="Arial">')
for (i=1;i<=totalquestions;i++){
for (temp=0;temp<incorrect.length;temp++){
if (i==incorrect[temp])
wrong=1
}
if (wrong==1){
win2.document.write("Question "+i+"="+correctchoices[i].fontcolor("red")+"<br>")
wrong=0
}
else
win2.document.write("Question "+i+"="+correctchoices[i]+"<br>")
}
win2.document.write('</center></font>')
win2.document.write("<h5>Note: The solutions in red are the ones to the questions you had incorrectly answered.</h5><p align='center'><small><a href='http://www.javascriptkit.com' target='_new'>JavaScript Kit quiz script</a></small>")
win2.document.close()
}
这是我的主要.css
/*************************
GENERAL
**************************/
body {
font-family: 'Open Sans' , sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
#img {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
/*************************
HEADING
**************************/
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Changa One', sans-serif;
margin: 15px 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-size: 0.75em;
margin: -5px 0 0;
font-weight: normal;
}
/*************************
Navigation
**************************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0 ;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
/*************************
FOOTER
**************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top:50px;
color:#F5F5F5;
}
.social-icon {
width: 30px;
height: 30px;
margin: 0 5px;
}
/*************************
PAGE: Images
**************************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 28%;
margin:2.5%;
background-color: #f5f5f5;
color:#bdc3c7;
}
#gallery li a p {
margin: 0;
padding: 0.5%;
font-size: 1em;
color: #bdc3c7
}
#gallery1 {
margin: 0;
padding: 0;
list-style: none;
}
#gallery1 li {
float: center;
width: 50%;
margin:2.5%;
background-color: #f5f5f5;
color:#bdc3c7;
}
#gallery1 li a p {
margin: 0;
padding: 0.5%;
font-size: 1em;
color: #000
}
#gallery2 {
margin: 0;
padding-left: 330px;
list-style: none;
}
#gallery2 li {
float: left;
width: 28%;
margin:1%;
background-color: #A0A8A8;
color:#bdc3c7;
}
#gallery2 li a {
margin: 0%;
padding: 0.5%;
font-size: 1em;
color: #000
}
#gallery3 {
margin: 0;
padding-left: 210px;
list-style: none;
}
#gallery3 li {
float: left;
width: 28%;
margin:1%;
background-color: #A0A8A8;
color:#bdc3c7;
}
#gallery3 li a {
margin: 0%;
padding: 0.5%;
font-size: 1em;
color: #000
}
/*************************
COLORS
**************************/
/* site body */
body {
background-color:#A0A8A8;
color: #000000;
}
/* green header */
header {
background: #959E9E;
border-color: #A6B4B5;
}
/* nav background on mobile devices */
nav{
background: #959E9E;
}
/* logo text */
h1, h2 {
color:#F5F5F5;
}
/* links */
a {
color: #6ab47b;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color:#4D4D4D;
}
/*HINT SHOW/HIDE*/
.hide{
display: hidden;
}
.show {
display: block;
}
这是我的反馈页面（按预期工作）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial Feedback</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="Feedback.html" id="logo">
<h1>Feedback</h1>
<h2>by Chris Moore</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Tutorial.html">Tutorial</a></li>
<li><a href="Tutorial Quiz.html">Quiz</a></li>
<li><a href="Feedback.html"class="selected">Feedback</a></li>
</ul>
</nav>
</header>
<p align="center"><strong><font face="Arial">
<script src="quizconfig.js">
</script>
<big>Instant Quiz Results</big></font></strong></p>
<div align="center"><center>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form method="POST" name="result"><table border="0" width="100%" cellpadding="0" height="116">
<tr>
<td height="25" bgcolor="#A0A8A8"><strong><font face="Arial"># of questions you got right:</font></strong></td>
<td height="25"><p><input type="text" name="p" size="24"></td>
</tr>
<tr>
<td height="17" bgcolor="#B2B9B9"><strong><font face="Arial">The questions you got wrong:</font></strong></td>
<td height="17"><p><textarea name="T2" rows="3" cols="24" wrap="virtual"></textarea></td>
</tr>
<tr>
<td height="25" bgcolor="#B2B9B9"><strong><font face="Arial">Grade in percentage:</font></strong></td>
<td height="25"><input type="text" name="q" size="8"></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</center></div>
<form method="POST"><div
align="center"><center><p>
<script>
var wrong=0
for (e=0;e<=2;e++)
document.result[e].value=""
var feedback=document.cookie.split(";")
for (n=0;n<=feedback.length-1;n++){
if (feedback[n].charAt(1)=='q')
parse=n
}
var incorrect=feedback[parse].split("=")
incorrect=incorrect[1].split("/")
if (incorrect[incorrect.length-1]=='b')
incorrect=""
document.result[0].value=totalquestions-incorrect.length+" out of "+totalquestions
document.result[2].value=(totalquestions-incorrect.length)/totalquestions*100+"%"
for (temp=0;temp<incorrect.length;temp++)
document.result[1].value+=incorrect[temp]+", "
</script>
<input type="button" value="Take the quiz again" name="B1"
onClick="location.href='Tutorial Quiz.html'"> <input type="button" value="View solution" name="B2"
onClick="showsolution()"></p>
</center></div>
</form>
<footer>
<a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<p>© 2014 Chris Moore.</p>
</footer>
</body>
</html>
看起来您的函数定义上缺少大括号：
<script>
var button = document.getElementById ("toggle")
var target = document.getElementById("target")
var bool = true;
function displayToggle() { // Added '{' here
if (bool) {
target.setAttribute("class", "hide");
bool = false;
} else {
target.setAttribute("class", "show");
bool = true;
}
} // Added this line
button.addEventListener("click",displayToggle, false);
</script>
看起来您的 css 可能与您最初发布的内容也不同。尝试更新您的 .hide 类：
/*HINT SHOW/HIDE*/
.hide{
display: none;
}
相关文章：
- 禁用旋转木马中的下一个按钮和上一个按钮
- 如何在用户返回和上一个按钮时刷新下拉列表
- 简单的垂直上一个和下一个按钮代码点击上下移动jQuery
- 如何使用一个按钮编辑和保存使用Javascript
- 在单击下一个按钮之前，在JavaScript代码中添加5秒的延迟
- 正如我所能做的引导提醒，按下一个按钮可以更改语言
- 当我的所有 Ng-from 都有效时启用一个按钮
- 一个按钮，点击后会生成一个新的文本框?-Javascript
- 我想在我的准备列表项上创建一个按钮
- JavaScript幻灯片显示，每个幻灯片的下一个按钮都有不同的位置
- 当我单击下一个或上一个按钮时，datatable显示旧值
- 制作一个按钮倒计时计时器，该计时器将在5分钟后永久禁用，即使在页面刷新时也应保持禁用状态
- 一个具有两个图像按钮的表单在只能按下一个按钮的情况下发送两个按钮值
- Jquery:如果选中了另一个按钮，则为未选中按钮
- 使文本在它之后再次可见'It’s被一个按钮隐藏了
- 传递来自<输入类型＝“;文件“;id＝“;文件“/>尽管还有一个按钮点击
- 为缩略图库和较大图像库添加下一个和上一个按钮
- 当滑块只有一个图像时，如何禁用下一个/上一个按钮
- 图像缩略图库中的“下一个”和“上一个”按钮中的“问题”
- 点击一个按钮，有没有一种方法可以检查Div内部的图像
