Fatal编程技术网

Javascript 切换段落的可见性

javascript html

Javascript 切换段落的可见性,javascript,html,visibility,Javascript,Html,Visibility,我不知道为什么我会有问题，除了这是我第一周看到html和javascript，哈哈。但是。。。我的指示是： 添加句子：“请按下这个按钮查看更多关于我的信息”，其中“这个”是一个按钮上的文本（在句子的中间）。实现必要的JavaScript代码，这样当按钮被点击时，就会出现一个段落，它给出了一些关于你的背景信息（你出生在哪里或者别的什么地方）。。每次单击按钮时，应切换该段落的显示（使其在第一次单击后可见，在第二次单击后隐藏，在第三次单击后可见，等等）。此外，当文本可见时，带有按钮的行应更改为以下行：

我不知道为什么我会有问题，除了这是我第一周看到html和javascript，哈哈。但是。。。我的指示是：

添加句子：“请按下这个按钮查看更多关于我的信息”，其中“这个”是一个按钮上的文本（在句子的中间）。实现必要的JavaScript代码，这样当按钮被点击时，就会出现一个段落，它给出了一些关于你的背景信息（你出生在哪里或者别的什么地方）。。每次单击按钮时，应切换该段落的显示（使其在第一次单击后可见，在第二次单击后隐藏，在第三次单击后可见，等等）。此外，当文本可见时，带有按钮的行应更改为以下行：“请按此按钮隐藏有关我的更多信息。”单击按钮时，请参见“隐藏”和“隐藏”应交替

我遇到的麻烦是如何在单击时使这些段落可见，而不是在再次单击时。根据别人的问题，我试过几种不同的方法，但都不管用。它最终不会切换任何东西，并让所有东西都可见

非常感谢你

   <!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>


我的页面


关于我的事。。。








函数changeImage（）{
var image=document.getElementById（'myImage'）；
if（image.src.match（“hrgswitch”））{
image.src=“hrg.jpg”；
}否则{
image.src=“hrgswitch.jpg”；
}
}
函数myFunction（obj）{
var x=document.getElementById（“me”）；
如果（（“p3”）.style.visibility==“可见”）
（“p3”）.style.visibility=“隐藏”；
其他的
（“p3”）.style.visibility='visible'；
}




请按此按钮查看有关我的更多信息

这




请按此按钮查看我的课程列表。”




这


更多关于我的信息









课程名称
日期
时间
程序设计范式
星期二/星期四
11:00-12:15
计算机组织
星期二/星期四
9:30-10:45
线性代数
星期一/星期三/星期五
11:50-12:40
组合数学与离散数学
星期一/星期三/星期五
8:35-9:25
就这么做吧

 <button id = "me" onclick = "myFunction('me')">this </button>

这个
就这么做吧

 <button id = "me" onclick = "myFunction('me')">this </button>

这个
首先，您需要使用按钮添加实际的文本行：

<p>
    Please push <button onclick="toggleParagraphVisible();">this</button>
    to <span id="textIsHidden">see</span> more info about me.
</p>
除非我做了一些愚蠢的事情（人们无疑会指出这一点），否则这应该行得通。祝你好运！

首先，你要用按钮添加实际的文本行：

<p>
    Please push <button onclick="toggleParagraphVisible();">this</button>
    to <span id="textIsHidden">see</span> more info about me.
</p>
除非我做了一些愚蠢的事情（人们会毫无疑问地指出这一点），否则这应该行得通。祝你好运！

先做几件小事：

  • 不同的函数不需要单独的脚本块

  • p2和p3不是真正的标记-如果需要选择单个段落，请使用带有id的p标记

    <p id="p3">Please push...</p>
  • 现在，您的一些脚本在您试图针对的对象之前执行。这是行不通的。请尝试将所有脚本分组到一个块中，并将其放在标记的相关部分（即按钮、段落等）之后

正如另一位评论者所指出的，你应该在句子中有一个按钮，所以要解决这个问题。当你这么做的时候，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>
请按此按钮 查看更多关于我的信息

这是根据单击隐藏或显示的内容

var btn=document.getElementById（'toggle-button'）， image=document.getElementById（'myImage'）， seeHide=document.getElementById（'see-hide'）， toggleableContent=document.getElementById（'p3'）， textIsShowing=false；//跟踪按钮是否已与此按钮切换 /*我们可以编写一个函数来改变图像，文本， 并同时隐藏/显示所有内容*/ 函数toggleEverything（）{ if（textIsShowing==false）{ //更改图像 //将seeHide范围从“显示”更改为“隐藏” //显示toggleableContent段落 textIsShowing=true；//这样，下次单击将知道我们已经单击过一次 return；//我们到此结束 } /*这就是如果textIsShowing是真的， 因为上面的块将被跳过*/ //更改回图像 //将seeHide范围从“hide”更改为“show” //隐藏toggleableContent段落 textIsShowing=false；//为下次单击重置此状态 return；//我们就完成了 } //现在我们需要把这个绑定到按钮上 btn.onclick=toggleEverything（）；
首先是一些小事情：

  • 不同的函数不需要单独的脚本块

  • p2和p3不是真正的标记-如果需要选择单个段落，请使用带有id的p标记

    <p id="p3">Please push...</p>
  • 现在，您的一些脚本在您试图针对的对象之前执行。这是行不通的。请尝试将所有脚本分组到一个块中，并将其放在标记的相关部分（即按钮、段落等）之后

正如另一位评论者所指出的，你应该在句子中有一个按钮，所以要解决这个问题。当你这么做的时候，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>
请按此按钮 查看更多关于我的信息

这是根据单击隐藏或显示的内容

var btn=document.getElementById（'toggle-button'）， image=document.getElementById（'myImage'）， 请参见hide=document.getElementB