JavaScript Show Element on Click

Javascript show element on click

document.getElementById('showDiv').onclick=function(){
  // Remove any element-specific value, falling back to stylesheets
  document.getElementById('element').style.display='';
};

Hide/Show element on click JS not working properly

The problem is probably that you didn't close the button tag. So it doesn't find myFunction(). You also need to fetch the computed value of display style not the elements value because css files do not affect the elements styles directly. (e.g. vs style="")

<body>
    <script>
      function myFunction() {
        var x = document.getElementById("myDIV");
        if (getComputedStyle(x).display === "none") {
          x.style.display = "block";
        } else {
          x.style.display = "none";
        }
      }
    </script>
    <button
      type="button"
      class="btn btn-primary btn-lg btn-block"
      onclick="myFunction()"
    >
      test
    </button>

    <div id="myDIV">
      This is my DIV element.
    </div>
  </body>

How to get the element clicked (for the whole document)?

You need to use the event.target which is the element which originally triggered the event. The this in your example code refers to document.

In jQuery, that's...

$(document).click(function(event) {
    var text = $(event.target).text();
});

Without jQuery...

document.addEventListener('click', function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement,
        text = target.textContent || target.innerText;   
}, false);

Also, ensure if you need to support < IE9 that you use attachEvent() instead of addEventListener().

Show element one by one on button click

the problem is with this line btns.onclick = function show() which is btns[0].onclick = function show(){ and you can continue with your code but it is better to use addEventListener.

you need to also remove # from making of id.

btns = document.getElementsByClassName("saveBtn");
btns[0].addEventListener('click', function() {
  for (var i = 0; i <= 4; i++) {
    var id = 'myDIV' + i;
    var element = document.getElementById(id);
    var setting = (element) ? element.style.display : '';

    if (setting == 'none') {
      element.style.display = 'flex';
      break;
    }
  }
})

<button class="saveBtn" style="background-color: #0b5ed7; padding: 10px; border-radius: 10px;cursor: pointer">
<i class="fa fa-plus"> Add More</i>
</button>
<div class="col-sm-6" style="display: flex; margin-top: 24px">
  <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
  <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>
<div class="col-sm-6" style="display: none" id="myDIV0">
  <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
  <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>
<div class="col-sm-6" style="display: none" id="myDIV1">
  <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
  <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>
<div class="col-sm-6" style="display: none" id="myDIV2">
  <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
  <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>
<div class="col-sm-6" style="display: none" id="myDIV3">
  <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
  <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>

How to display div after click the button in Javascript?

HTML Code:

<div id="welcomeDiv"  style="display:none;" class="answer_list" > WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />

Javascript:

function showDiv() {
   document.getElementById('welcomeDiv').style.display = "block";
}

See the Demo: http://jsfiddle.net/rathoreahsan/vzmnJ/

Show / Hide Div on Click with JavaScript

You are trying to access an element by id but haven't specified an id for the element yet.

You could do it like this:

const divHide = document.getElementById("div-hide");

function handleHide(){
    divHide.style.display = "none";
}

function handleShow(){
    divHide.style.display = "block";
}

<div id="div-hide">
Hello
</div>
<button onclick="handleHide()">
click to hide
</button>
<button onclick="handleShow()">
click to show
</button>

Hide/Show Element when Clicked

This can be done together with Js and CSS.

First give a class subLinks to inner UL. then hide it with CSS.

ul li > .subLinks {
    display: none
}

then write a click event on each li, check if inner sublinks exist then add active class to the li element. based on the active class show the inner list with css.

$("#nested-list li").click(function(e) {
    if ( $(this).children("ul").length ) {
        $(this).toggleClass('active');
    }
});

CSS

ul li.active > .subLinks {
    display: block
}

see the example I have created. https://stackblitz.com/edit/nested-ul-li-list-toggle-basic
This is a basic example to show how you can achieve it, you can further customize it to your needs and add more check to prevent clicking on the link etc.

Show element onclick and hide all the others in javascript

At the moment you're toggling the visibiliy of your team-member-info elements based on their visibility property. This will make a single one visible by clicking on it's related team-member element - and invisible if it's clicked again.

What you can do is upon clicking make all team-member-info elements invisible first and subsequently just one element visible.

Here's an example:

const teamMember = document.getElementsByClassName("team-member");
const teamMemberInfo = document.getElementsByClassName("team-member-info");
for (let i = 0; i < teamMember.length; i++) {
  teamMember[i].addEventListener("click", function() {
    for (let a = 0; a < teamMemberInfo.length; a++) {
      teamMemberInfo[a].style.display = "none";
    }
    teamMemberInfo[i].style.display = "block";

  });
}

.team-member-info {
  display: none;
}

<div class="team-member-info">
  <div>Some text</div>
</div>

<div class="team-member-info">
  <div>Some other text</div>
</div>
<div class="team-member">
  <img src="https://picsum.photos/id/237/200/300">
</div>

<div class="team-member">
  <img src="https://picsum.photos/id/27/200/300">
</div>

JavaScript Show Element on Click