Onclick Calling Hide-Div Function Not Working

onclick calling hide-div function not working

Try changing the close function name to something else like closeit because it may be confusing it with the window.close() function.

How to show hidden div onclick of button and hide when not in focus using JS

you can use this code :

function openCardsList() {
    let window = document.getElementById("anchor-cards-list");
    window.style.display = "block";
  }
  function hideDiv(){
    let window = document.getElementById("anchor-cards-list");
    window.style.display = "none";
  }

and add onclick event to parent div

div onclick="hideDiv()" style="height: 100vh;">
  <div class="collapse" id="anchor-cards-list">Lorem Ipsum</div>
</div>

Javascript hide element onclick, does not work

There are two issues in your code:

1. Your code to attach event listeners should be in window.onload.
2. Your loop should be td.length-1. Instead of your code, you can use [].forEach.call to replace the below code:

//all datacells safed in variable
var datacells = document.getElementsByTagName("td");
//length of array
var cellsCount = datacells.length;
//iterate through array
for (var i = 0; i <= cellsCount; i += 1) {
//if any of this datacells get clicked, it will call function "example" with id of clicked element as parameter
datacells[i].onclick = example;
}

Below is the updated code:

window.onload = function () { [].forEach.call(document.getElementsByTagName("td"), function (el) {  el.onclick = example; })
 //if clicked elsewhere, div has to become hidden again.
 //onlick hide, div box becomes hidden again document.getElementById("HideButton").onclick = hideDiv;}
//functionsfunction example(idOfDatacells) { //this references the element, which called the function var rect = document.getElementById(this.id).getBoundingClientRect();
 document.getElementById("top").innerHTML = rect.top; document.getElementById("left").innerHTML = rect.left;
 var div = document.getElementById("movableDiv"); div.style.visibility = "visible"; div.style.top = rect.top + document.getElementById(this.id).clientHeight + "px"; div.style.left = rect.left + "px";}
//function for hiding formularfunction hideDiv() { document.getElementById("movableDiv").style.visibility = "hidden";}

table { width: 100%; margin: auto; position: relative;}
td { text-align: center;}
tr:nth-child(2) { background-color: lightgrey;}
tr { height: 50px;}
#movableDiv { background-color: lightgrey; position: absolute; visibility: hidden;}

<table> <tr>  <th>Header1</th>  <th>Header2</th> </tr> <tr>  <td id="tr1tc1">Data1</td>  <td id="tr1tc2">Data2</td> </tr> <tr>  <td id="tr2tc1">Data3</td>  <td id="tr2tc2">Data4</td> </tr></table><div id="movableDiv"> <form>  <p>Some text:</p>  <input type="text" name="someText">  <p>A number:</p>  <input type="number" name="aNumber">  <button id="HideButton" type="button">Hide</button> </form></div><p id="top"> Top:</p><p id="left"> Left:</p>

HTML button onclick property does not call the function, behaving strangely when changed

Solved: Aparrantly close() is a reserved function.
Changing it to closeOrder() fixed the issue.

Show/hide script not working on first click but working thereafter

The reason this is not working is because the initial style x.style.display is empty, I believe because x.style.display checks only for values that have been set programmatically.

Try allowing for that in your check:

function myFunction() {
    var x = document.getElementById("window");
    if (x.style.display !== "block") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
}

To verify what I am saying, and learn a bit I guess(!), you could always do something like this in your function:

function myFunction() {
  var x = document.getElementById("window");
  console.log(`entering myFunction. x.style.display is [${x.style.display}]`); 
  if (x.style.display !== "block") {
     x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

Javascript show/hide div onclick

You dont even need JS for it. You can do it solely with HTML and CSS with the use of anchors and :target like in the snippet below.

#html-show, #css-show, #js-show {
  display: none;
}

#html-show:target, #css-show:target, #js-show:target {
  display: block;
}

<!--Nav-Bar-->
<a href="#html-show">Show HTML</a>
<a href="#css-show">Show CSS</a>
<a href="#js-show">Show JS</a>

<!--HTML-->
<div class="html" id="html-show">
    <p class="text-html" id="htmlContent">HTML Content..
    </p>
</div>

<!--CSS-->
<div class="css" id="css-show">
    <p class="text-css" id="cssContent">CSS Content..
    </p>
</div>

<!--JS-->
<div class="js" id="js-show">
    <p class="text-js" id="jsContent">JS Content..
    </p>
</div>

Hide and Show button not working after appending

Implementing the changes proposed by matthias_h:

• using class instead of id
• using three argument form of on click handler
• target the input by using $(this).closest

$(document).ready(function() {  var max_fields = 20; //maximum input boxes allowed  var wrapper = $(".input_fields_wrap"); //Fields wrapper  var add_button = $(".add_field_button"); //Add button ID  var x = 1; //initial text box count    $(add_button).click(function() { //on add input button click    if (x <= max_fields) { //max input box allowed      x++; //text box increment      $(wrapper).append('<div class="myclass""><input type="text" name="mytext[]"/><button onclick class="hide_field">Hide</button><button onclick class="show_field">Show</button></div>');    }  });});
$(document.body).on("click", ".myclass .hide_field", function() {    $(this).closest("div").children("input").hide();});
$(document.body).on("click", ".myclass .show_field", function() {    $(this).closest("div").children("input").show();});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="input_fields_wrap">  <button class="add_field_button">Add Comment</button>  <br>  <div class="myclass"><input type="text" name="mytext[]">  </div></div>

---

Related Topics