admin管理员组

文章数量:1390923

I want to show a hidden text box when I click on a certain link.

Here is my code so far:

HTML:

<a onclick="show()">Add Deposit Threshold</a>
<div id="dThreshold" style="display:none">
    <table class="table">
        <tr>
            <td><b>Deposit Threshold</b></td>
            <td>
                <div class="row">
                    <div class="col-xs-12">
                        <input type="text" class="form-control" name="Threshold">
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>

JavaScript

<script type="text/javascript">
function show() {
    document.getElementById("dThreshold").display ="block";
}
</script>

I hope you guys can help me. Thank you.

I want to show a hidden text box when I click on a certain link.

Here is my code so far:

HTML:

<a onclick="show()">Add Deposit Threshold</a>
<div id="dThreshold" style="display:none">
    <table class="table">
        <tr>
            <td><b>Deposit Threshold</b></td>
            <td>
                <div class="row">
                    <div class="col-xs-12">
                        <input type="text" class="form-control" name="Threshold">
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>

JavaScript

<script type="text/javascript">
function show() {
    document.getElementById("dThreshold").display ="block";
}
</script>

I hope you guys can help me. Thank you.

  • javascript
  • html
  • css
  • dom
Share Improve this question edited Jan 20, 2016 at 15:56 Mikhail 9,3004 gold badges35 silver badges51 bronze badges asked Jan 20, 2016 at 15:42 user3418987user3418987 1372 gold badges7 silver badges16 bronze badges 1
  • 3 Did you try document.getElementById("dThreshold").style.display = "block"; ? – Randall Valenciano Commented Jan 20, 2016 at 15:47
Add a ment  | 

6 Answers 6

Reset to default 2

Use the following code instead (i.e., access the style property first):

function show() {
    //document.getElementById("dThreshold").display ="block";
    document.getElementById("dThreshold").style.display ="block";
}

Here is the full source code for a sample HTML page:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        function show() {
            //document.getElementById("dThreshold").display ="block";
            document.getElementById("dThreshold").style.display = "block";
        }
    </script>
</head>
<body>
    <a href="javascript:void(0);" onclick="show();">Add Deposit Threshold</a>
    <div id="dThreshold" style="display: none">
        ...
    </div>
</body>
</html>

Try this:

Note: Include script before the html. Otherwise show() will be undefined.

<script>
function show() {
   document.getElementById("dThreshold").style.display ="block";    
}
</script>

<a onclick="show()">Add Deposit Threshold</a>
 <div id="dThreshold" style="display:none">
  <table class="table">
 <tr>
  <td><b>Deposit Threshold</b></td>
  <td><div class="row"><div class="col-xs-12"><input type="text" class="form-control" name="Threshold"></div></div></td>
      </tr>
      </table>
       </div>

Edit: If you're not using Jquery, the other ments around accessing style are correct.

Here is a quick example which you can understand and modify to fit your needs:

javascript:

$('#show').click(function(){
    $('input').css('display', 'block');
})

html:

<a href="#" id="show">Click me!</a>
<input type="input" class="input"/>

css:

input {
  display: none;
}

JSFiddle

Here's your trouble:

document.getElementById("dThreshold").style.display ="block";

Correct syntax is to include style.

You also need a place to click:

<form>
       <input type="button" onclick="show()" value="click here" />
       </form>

I think you should change

document.getElementById("dThreshold").display ="block";

to

document.getElementById("dThreshold").style.display ="block";

While you have a number of answers already, I'd argue that you should move the JavaScript outside of the HTML and use unobtrusive JavaScript, which would also allow you to make the function more generally applicable. My first suggestion would be to use DOM traversal to find the appropriate <div> element to show:

// naming the function, the event argument
// is supplied automatically from the
// EventTarget.addEventListener() method:
function show(event) {

  // stopping the event bubbling (assuming you
  // want to, if not remove the line):
  event.stopPropagation();

  // finding the next element-sibling of the clicked
  // element, and setting the display property of the
  // element's style objects to 'block':
  this.nextElementSibling.style.display = 'block';
}

// creating an array from all the <a> elements with the class
// of 'toggle':    
var toggles = Array.from(document.querySelectorAll('a.toggle'));

// iterating over the Array of elements using
// Array.prototype.forEach():
toggles.forEach(function(toggle) {
  // 'toggle' the array-element of the array
  // over which we're iterating.

  // setting the function show() as the
  // event-handler for the 'click' event:
  toggle.addEventListener('click', show);
});


function show(event) {
  event.stopPropagation();
  this.nextElementSibling.style.display = 'block';
}

var toggles = Array.from(document.querySelectorAll('a.toggle'));

toggles.forEach(function(toggle) {
  toggle.addEventListener('click', show);
});
a.toggle {
  display: block;
}
<a href="#" class="toggle">Add Deposit Threshold</a>
<div style="display:none">
  <table class="table">
    <tr>
      <td><b>Deposit threshold</b>
      </td>
      <td>
        <div class="row">
          <div class="col-xs-12">
            <input type="text" class="form-control" name="threshold">
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>
<a href="#" class="toggle">Add other details</a>
<div style="display:none">
  <table class="table">
    <tr>
      <td><b>Other details</b>
      </td>
      <td>
        <div class="row">
          <div class="col-xs-12">
            <input type="text" class="form-control" name="other">
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>

JS Fiddle demo.

However, it would seem to make more sense to add a toggle function, rather than simply a 'show' function:

function show(event) {
  event.stopPropagation();

  // caching references to those elements/checks we
  // use more than once, to avoid unnecessary DOM
  // look-ups:

  // 'self' is the clicked link:
  var self = this,

  // 'target' is the next element-sibling (the <div>
  // containing the <table>):
    target = this.nextElementSibling,

  // 'check' is the result of assessing if the
  // current display of the 'target' element is
  // 'block'; if it is the variable is true, if
  // not then variable is false:
    check = target.style.display === 'block';

  // updating the display, if it is currently set
  // to 'block' we set it to 'none', if it's
  // currently not set to 'block' (so hidden) we
  // set it to 'block' (to show):
  target.style.display = check ? 'none' : 'block';

  // here we add a new class to the clicked element,
  // in order that we can use CSS generated-content
  // to appropriately toggle the link text between
  // 'Open' and 'Close' to reflect the action the link
  // will perform:
  self.classList.toggle('open', !check);
}

var toggles = Array.from(document.querySelectorAll('a.toggle'));

toggles.forEach(function(toggle) {
  toggle.addEventListener('click', show);
});

The above JavaScript is coupled with the following CSS:

a.toggle {
/* to force the <a> elements of class 'toggle'
   to occupy new lines (to minimise the visual
   disturbance of a <div> and its descendant
   <table> suddenly appearing): */
  display: block;
}

a.toggle::before {
/* Setting the 'default' text of the
   relevant <a> elements to be prepended
   with the 'text of 'Open': */
  content: 'Open ';
}

a.toggle.open::before {
  /* Prepending the link, when the <div>
     is shown, with the text 'Close ': */
  content: 'Close ';
}


// ments to avoid having the JS
// hidden under the panel label 
function show(event) {
  event.stopPropagation();
  var self = this,
    target = this.nextElementSibling,
    check = target.style.display === 'block';
  target.style.display = check ? 'none' : 'block';
  self.classList.toggle('open', !check);
}

var toggles = Array.from(document.querySelectorAll('a.toggle'));

toggles.forEach(function(toggle) {
  toggle.addEventListener('click', show);
});
a.toggle {
  display: block;
}
a.toggle::before {
  content: 'Open ';
}
a.toggle.open::before {
  content: 'Close ';
}
<a href="#" class="toggle">Deposit Threshold</a>
<div style="display:none">
  <table class="table">
    <tr>
      <td><b>Deposit threshold</b>
      </td>
      <td>
        <div class="row">
          <div class="col-xs-12">
            <input type="text" class="form-control" name="threshold">
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>
<a href="#" class="toggle">other details</a>
<div style="display:none">
  <table class="table">
    <tr>
      <td><b>Other details</b>
      </td>
      <td>
        <div class="row">
          <div class="col-xs-12">
            <input type="text" class="form-control" name="other">
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>

JS Fiddle demo.

本文标签： javascriptHow to show a hidden text box after clicking a linkStack Overflow

版权声明：本文标题：javascript - How to show a hidden text box after clicking a link? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744612613a2615748.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。