conditional display of html element forms

前端未结

关注

 3  900

Well, after a one hour introduction to javascript, I ve come up with the following code. It did what I wanted alright, but then I wanted something else and it wont work.

相关标签:

3条回答

春和景丽

2020-12-16 01:28
What worked:

You had two buttons, both visible in the beginning. And on click of one button, you hid a div, and made another visible.

Now you need a situation when the divs should be hidden in the beginning, and then show when you click a button.

By default, for all elements where a explicit visibility attribute is not given, visibility is considered to be visible.

To make the button invisible, you need to add visibility:hidden to the button.

You can do it two ways:
1. In the code for the divs, make then "invisible by default" by adding style='visibility:hidden'.
2. Add another javascript function that is called on load of the page, and makes both the divs invisible:
```
function hideBoth()  {  
   document.getElementById("cont1").style.visibility="hidden";  
   document.getElementById("cont2").style.visibility="hidden";   
}
```
Call it on load of your page: <body onload='hideBoth()'>
0 讨论(0)
发布评论:

提交评论
- 加载中...
情书的邮戳

2020-12-16 01:35
This line:
```
document.getElementById("cont1").style.visibility="hidden";
```
Adds this:
```
style="visibility: hidden;"
```
to this:
```
<div id="cont1">
```
to make it look like this:
```
<div id="cont1" style="visibility: hidden;">
```
You can do this yourself, just by adding that attribute to your html tag.

Oh yeah, and this:
```
<div id="cont1">
```
is the same as this:
```
<div id="cont1" style="visibility: visible;">
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

迷失自我

2020-12-16 01:37

You can use jquery to also do this! Here is an example which basically takes the input of your CSS and makes it visible or not:

function checkPrerequisites() {
  // The 4th line makes objects visible in the for loop.
  // Determines if pre-requisites are met and if so - makes div draggable
  // for new courses 

  for (var i = 0; i < courselist.length; i++) {
    if (prerequisitesMet(i)) {
      $('#' + i.toString()).css("background-color", "lightgreen");
      $('#' + i.toString()).css("visibility", "visible");
      $('#' + i.toString()).draggable();
    }
  }
}

0 讨论(0)