我不知道为什么我遇到问题,除了这是我第一个看到html和javascript的一周,哈哈。但是......我的指示是:</ p>
&#34;添加句子:&#34;请按这个以查看有关我的更多信息。&#34;,其中的单词&#34; this&#34;是按钮上的文本(位于句子的中间)。实现必要的JavaScript代码,以便在单击按钮时出现一个段落,其中提供了一些关于您的背景信息(您出生的地方或其他)。每次单击该按钮时,它应切换该段落的显示(使其在第一次点击后可见,在第二次点击后隐藏,在第三次点击后可见,等等)。此外,当文本可见时,带有按钮的行应更改为以下内容:&#34;请按此按钮以隐藏有关我的更多信息。&#34;单词&#34;见&#34;并且&#34;隐藏&#34;单击按钮时应该交替。&#34;
我遇到的麻烦是如何在点击时显示这些段落,而不是在我再次点击时。我根据其他人的问题尝试了几种不同的东西,它只是不起作用。它最终不会切换任何东西并使一切都可见。
非常感谢你。
<!DOCTYPE html>
<html>
<body style="background-color:#ADD8E6">
<h1>my Page</h1>
<img id="myImage" onclick="changeImage()" src="hrg.jpg" width="280" height="280">
<p title="About me">
stuff about me...
<br>
<a href="http://www.w3schools.com/" target="_blank">Here is a link to learn more about HTML!</a>
<br>
<br>
</p>
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("hrgswitch")) {
image.src = "hrg.jpg";
} else {
image.src = "hrgswitch.jpg";
}
}
</script>
<script>
function myFunction(obj) {
var x = document.getElementById("me");
if(("p3").style.visibility == "visible")
("p3").style.visibility = 'hidden';
else
("p3").style.visibility = 'visible';
}
</script>
</head>
<body>
<p2> <br>
<br>
Please push this to see more information about me. <br>
</p2>
<button id = "me" onclick = "myFunction("me")">this </button>
<p3>
<br>
<br>
Please push this to see my list of courses."
<br>
<br>
<button>this </button>
<br>
more stuff about me <br>
</p3>
<br>
<br>
<br>
<br>
<table style="width:100%">
<tr>
<td>Course Name</td>
<td>Date</td>
<td>Time</td>
</tr>
<tr>
<td>Programming Paradigms</td>
<td>Tuesday / Thursday</td>
<td>11:00-12:15</td>
</tr>
<tr>
<td>Computer Organization</td>
<td>Tuesday / Thursday</td>
<td>9:30-10:45</td>
</tr>
<tr>
<td>Linear Algebra</td>
<td>Monday/Wednesday/Friday</td>
<td>11:50-12:40</td>
</tr>
<tr>
<td>Combinatorics and Discrete Math</td>
<td>Monday/Wednesday/Friday</td>
<td>8:35-9:25</td>
</tr>
</table>
</body>
</html>
答案 0 :(得分:2)
首先要做一些小事:
您不需要为不同功能使用单独的脚本块
p2和p3不是真正的标签 - 如果您需要选择单个段落,请使用带有ID的p标签
<p id="p3">Please push...</p>
在您的javascript中,您的定位方式如下:
var p3 = document.getElementById('p3');
p3.style.visibility = 'visible'; // for example
现在,在您尝试定位的内容之前,您已经执行了一些脚本。那不行。尝试将所有脚本分组到一个块中,并将其放在标记的相关部分之后(即按钮,段落等)。
正如另一位评论者指出的那样,你应该在句子里面放一个按钮,所以要解决这个问题。当你在它的时候,onclick处理程序通常不受欢迎;给它一个ID并在脚本中绑定它。这是一些伪代码;我没有填写实际更改的功能,只是注意到它们去了哪里。
<p>Please push <button id="toggle-button">this</button>
to <span id="see-hide">see</span> more info about me.</p>
<p id="p3">This is the content that hides or shows depending on click</p>
<script>
var btn = document.getElementById('toggle-button'),
image = document.getElementById('myImage'),
seeHide = document.getElementById('see-hide'),
toggleableContent = document.getElementById('p3'),
textIsShowing = false; // to keep track of whether the button has been toggled with this
/* We can write one function to change the image, the text,
and hide/show content all at once */
function toggleEverything() {
if( textIsShowing == false ) {
// change the image
// change the seeHide span from "show" to "hide"
// show the toggleableContent paragraph
textIsShowing = true; // this way, the next click will know we've already clicked once
return; // we're done here
}
/* this is what happens if textIsShowing is true,
because the block above will be skipped */
// change the image back
// change the seeHide span from "hide" to "show"
// hide the toggleableContent paragraph
textIsShowing = false; // reset this state for the next click
return; // and we're done
}
// Now we need to bind this to the button
btn.onclick = toggleEverything();
</script>
答案 1 :(得分:1)
首先,您可以使用按钮添加实际的文本行:
<p>
Please push <button onclick="toggleParagraphVisible();">this</button>
to <span id="textIsHidden">see</span> more info about me.
</p>
接下来,确保您确实有一个隐藏和取消隐藏的段落。
<p id="toggleParagraph" style="display:none;">Bio goes here.</p>
最后,只需添加javascript代码:
function toggleParagraphVisible(){
if(document.getElementById("textIsHidden").innerText == "see"){
//If the sentence says "see more info"
//First, change the sentence to read "hide more info"
document.getElementById("textIsHidden").innerText = "hide";
//Next, change the display on the paragraph to block,
//which makes it visible
document.getElementById("toggleParagraph").style.display = "block";
} else {
//If the sentence doesn't say "see more info", revert everything
document.getElementById("textIsHidden").innerText = "see";
document.getElementById("toggleParagraph").style.display = "none";
}
}
除非我做了一些愚蠢的事情(人们无疑会指出),这应该有用。祝你好运!
答案 2 :(得分:1)
好的,我已经纠正了大部分HTML代码并使您的功能正常运行:
<!DOCTYPE html>
<html>
<head>
<title>About me</title>
<style>
body {
background-color:#ADD8E6;
}
table {
width:100%;
}
#p3 {
display:none;
}
#myImage {
width:280px;
height:280px;
}
</style>
<script language="javascript">
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("hrgswitch")) {
image.src = "hrg.jpg";
} else {
image.src = "hrgswitch.jpg";
}
}
function myFunction(obj) {
if(obj == "me"){
if(document.getElementById("p3").style.display == "none" || document.getElementById("p3").style.display == ""){
document.getElementById("p3").style.display = "block";
document.getElementById("p2").innerHTML = "<br /><br />Please push this to hide more information about me.<br />";
} else {
document.getElementById("p3").style.display = "none";
document.getElementById("p2").innerHTML = "<br /><br />Please push this to see more information about me.<br />";
}
}
}
</script>
</head>
<body>
<h1>my Page</h1>
<img id="myImage" onclick="changeImage();" src="hrg.jpg" />
<p title="About me">
stuff about me...
<br />
<a href="http://www.w3schools.com/" target="_blank">Here is a link to learn more about HTML!</a>
<br />
<br />
</p>
<p id="p2">
<br />
<br />
Please push this to see more information about me. <br />
</p>
<button id="me" onclick ="myFunction('me');">this</button>
<p id="p3">
<br />
<br />
Please push this to see my list of courses."
<br>
<br>
<button>this</button>
<br>
more stuff about me <br>
</p>
<br />
<br />
<br />
<br />
<table>
<tr>
<td>Course Name</td>
<td>Date</td>
<td>Time</td>
</tr>
<tr>
<td>Programming Paradigms</td>
<td>Tuesday / Thursday</td>
<td>11:00-12:15</td>
</tr>
<tr>
<td>Computer Organization</td>
<td>Tuesday / Thursday</td>
<td>9:30-10:45</td>
</tr>
<tr>
<td>Linear Algebra</td>
<td>Monday/Wednesday/Friday</td>
<td>11:50-12:40</td>
</tr>
<tr>
<td>Combinatorics and Discrete Math</td>
<td>Monday/Wednesday/Friday</td>
<td>8:35-9:25</td>
</tr>
</table>
</body>
</html>
答案 3 :(得分:0)
就这样做
<button id = "me" onclick = "myFunction('me')">this </button>