onclick in one element show another element in javascript

i would like to click in plus ,then show the next field in every step but my code does not work in third step .is there any method to do these steps for unlimited time?tnx

<html>
<head>
<script>
function showfield(){
document.getElementById("hiddenfield").style.display="block";
}
</script>
</head>

<body>
<div class="form-group" >
<div class="rightbox"> <label for='phone'>Phone1</label></div>
<input type="tel" value="" />
<div class="plus" onClick="showfield()">+</div>
</div>

<div class="form-group" style="display:none;" id="hiddenfield">
<div class="rightbox"><label for='phone'>Phone2</label></div>
 <input type="tel" value="" />
<div class="plus" onClick="showfield()">+</div></div>
</div>

<div class="form-group" style="display:none;" id="hiddenfield">
<div class="rightbox"><label for='phone'>Phone3</label></div>
 <input type="tel" value="" />
<div class="plus" onClick="showfield()">+</div></div>
</div>
</body>
</html>

Answers:

Answer

You can use unique id for each hidden field, then send current id to your function as parameter.

function showfield(id) {
     document.getElementById(id).style.display="block";
}

Another option is jquery:

$('.plus').on('click', function() {
    $(this).parent().next().show();
});

Check out jsfiddle.

Answer

As others noted, ID of an element must be unique, you can use class to group similar elements.

What you need to do is to show the first hidden field group,

function showfield() {
  var el = document.querySelector(".hiddenfield");
  if (el) {
    el.classList.remove('hiddenfield')
  }
}
.hiddenfield {
  display: none;
}
<div class="form-group">
  <div class="rightbox">
    <label for='phone1'>Phone1</label>
  </div>
  <input type="tel" value="" />
  <div class="plus" onClick="showfield()">+</div>
</div>

<div class="form-group hiddenfield">
  <div class="rightbox">
    <label for='phone2'>Phone2</label>
  </div>
  <input type="tel" value="" />
  <div class="plus" onClick="showfield()">+</div>
</div>

<div class="form-group hiddenfield">
  <div class="rightbox">
    <label for='phone3'>Phone3</label>
  </div>
  <input type="tel" value="" />
  <div class="plus" onClick="showfield()">+</div>
</div>

Supported in IE10+

Answer

Since you've tagged jquery, you could do away with all those (duplicate ids) and showField() and within doc load add this:

$('.plus').on('click', function() {
    $(this).parent().next().show();
});

[Edit: Oh, here's the fiddle]

However, I'm not sure what you want to happen when the third + is clicked as there are no more divs to show.

Answer

Change id="hiddenfield" to class="hiddenfield" in all divs and change showfield as below :-

function showfield() {
    document.getElementsByClassName("hiddenfield").style.display="block";
}

Note:- Supported Browsers IE9+, Chrome 4+, FF3+. http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.