I have a simple function when I click on a button to display text for the button, everything is ok but on the first click it's not working then after the second click it's working perfectly can anybody tell me whats my mistake? I have the element hidden in CSS display;none, here is my logic
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
#myDIV {
display: none;
}
<button type="button" class="btn btn-primary btn-lg btn-block" onclick="myFunction()">
<div id="myDIV">
This is my DIV element.
</div>
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>
Related
I have two div with different content. In page reload i would to have one DIV content to display as defualt however by clicking on button the content should change in same DIV content area and the another button also need disable. here is my code Im able to show and hide text but by defualt both text is displayed also both button are active.
enter image description here
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
document.getElementById('btn').disabled = 'disabled';
y.style.display = "none";
}
}
function myFunction1() {
var y = document.getElementById("myDIV1");
if (y.style.display === "none") {
y.style.display = "block";
} else {
y.style.display = "none";
}
}
</script>
<button class="btn btn-primary about" id="btn" onclick="myFunction()">Base Solution</button>
<button class="btn btn-primary about" onclick="myFunction1()">Augmented Solution</button>
<div class="col-md-6" id="myDIV">
<ul class="custom">
<li>Automation of the elementary CITES permit procedures</li>
<li>Transparency and accountability in the permit process</li>
</ul>
</div>
<div class="col-md-6" id="myDIV1">
<ul class="custom">
<li>Integration and maintenance of a database of registered facilities</li>
<li>Extension of national eCITES reporting Automation of other processes to support various business models and national legislations</li>
</ul>
</div>
I tweaked your code a little bit
i've given id to the second button,and merged the two function to one
Link : https://jsfiddle.net/guz2de7h/2/
<button class="btn btn-primary about" id="btn" onclick="myFunction(this)">Base Solution</button>
<button class="btn btn-primary about" id="btn2" onclick="myFunction(this)">Augmented Solution</button>
document.getElementById('btn').disabled = 'disabled';
var x = document.getElementById("myDIV");
var y = document.getElementById("myDIV1");
y.style.display = "none";
function myFunction(btn) {
var btnid = btn.id;
if(btnid=="btn2")
{
x.style.display = "none";
y.style.display = "block";
document.getElementById('btn2').disabled = 'disabled';
document.getElementById('btn').disabled = false;
}
else
{
x.style.display = "block";
y.style.display = "none";
document.getElementById('btn').disabled = 'disabled';
document.getElementById('btn2').disabled = false;
}
}
This question already has answers here:
How can I hide/show a div when a button is clicked?
(9 answers)
Closed 2 years ago.
Please can someone explain this situation?
I want to use the same function (hide/show) for more buttons. How can I call the same function with different buttons?
I found how to do it with one but can't find any solution for 2 or more buttons.
I would like to hide div1 if I click on bt1 and hide div2 if I click on bt2. Thank you for any help...
My current code is:
function myFunction() {
var x = document.getElementById("div1");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<html>
<body>
<button id="bt1" onclick="myFunction()">Button 1</button>
<div id="div1">div1</div>
<p></p>
<button id="bt2" onclick="myFunction()">Button 2</button>
<div id="div2">div2</div>
</body>
</html>
Thank you for your help...
You could pass the ID of the div to your function as a parameter:
function myFunction(el) {
var x = document.getElementById(el);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<button id="bt1" onclick="myFunction('div1')">Button 1</button>
<div id="div1">div1</div>
<p></p>
<button id="bt2" onclick="myFunction('div2')">Button 2</button>
<div id="div2">div2</div>
One way is to pass the ID of the DIV as a function parameter.
function myFunction(id) {
var x = document.getElementById(id);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<html>
<body>
<button id="bt1" onclick="myFunction('div1')">Button 1</button>
<div id="div1">div1</div>
<p></p>
<button id="bt2" onclick="myFunction('div2')">Button 2</button>
<div id="div2">div2</div>
</body>
</html>
Another way is to pass the button itself, and use DOM navigation, if the DIV to hide and show is always right after the button.
function myFunction(button) {
var x = button.nextElementSibling;
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<html>
<body>
<button id="bt1" onclick="myFunction(this)">Button 1</button>
<div id="div1">div1</div>
<p></p>
<button id="bt2" onclick="myFunction(this)">Button 2</button>
<div id="div2">div2</div>
</body>
</html>
I would do it like so:
Add a data-attribute like data-js-hide="div1"
Add a click event listener for all those elements having the attribute data-js-hide
when clicked use the value "div1" from the attribute data-js-hide
The advantages are that it does not matter where in DOM the elements are. You just need to set the attribute with id, and then on click the item with the id will be hidden or shown accordingly.
function myFunction(event) {
var x = document.getElementById(event.target.dataset.jsHide);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
var buttons = document.querySelectorAll('[data-js-hide]');
buttons.forEach(
button => {
button.addEventListener('click', myFunction);
}
);
<html>
<body>
<button data-js-hide="div1" >Button 1</button>
<div id="div1">div1</div>
<p></p>
<button data-js-hide="div2">Button 2</button>
<div id="div2">div2</div>
<p></p>
<button data-js-hide="div3">Button 3</button>
<div id="div3">div3</div>
</body>
</html>
I have this button tag element
<button class="btn btn-link" type="button" onclick="contentDownloads()">
<img src="./downloads/content-textures.svg" width="120px" />
</button>
And has a javascript function
function contentDownloads() {
var x = document.getElementById("vipDownloads");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
But, in the future I will include more buttons and would lead to the same function.
This is the part that contains the IDs:
<div id="vipDownloads" class="collapse show" style="display: none;">
<div class="card-body">
<h5 class="card-title">Map Pack v 1.8 <span class="caption-entry">by cWaLker</span> </h5>
<p class="card-text">
Aight Fellas,
Map Pack v 1.8 introduces some revived classics and under the radar stunners. <br>
<br> 1.7 went on a diet and dropped some restraining pounds.
For this nugget to work stable, you'd need to remove your own user folder first and then drop the User folder from the 1.8 bulk package.. it will serve you everything you need anyways ;-)<br>
<br> Have Fun Guys lets kick some flips!
</p>
<button type="button" class="btn btn-outline-success">Download</button><br>
</div>
</div>
You can see here how I designed the buttons and content http://thpsblog.000webhostapp.com/downloads.html (the css on my host takes a while to actually update, might include some white on white colors)
The function hides and unhides content.
I have found some solutions but they were all typed in jQuery, and unfortunately I do not know jQuery.
How could I make this function take two unique ids?
Make the ID of the element to toggle a parameter of the function, and pass it when you call the function.
function contentDownloads(id) {
var x = document.getElementById(id);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<button class="btn btn-link" type="button" onclick="contentDownloads('vipDownloads')">
<img src="./downloads/content-textures.svg" width="120px" />
</button>
If you don't want to add an onclick event to your html, you can create a vars array and use a forEach loop. Else, you can use #Barmar's answer.
function contentDownloads() {
var x = document.getElementById("vipDownloads");
var y = document.getElementById("y");
var z = document.getElementById("z");
vars = [x,y,z]; // update this array when selected a new element
vars.forEach(function(p){
if (p.style.display === "none") {
p.style.display = "block";
} else {
p.style.display = "none";
}
})
}
Make id param as others suggested or use data attributes:
<button class="btn btn-link" type="button" onclick="contentDownloads(this)" data-downloadsid="vipDownloads">
<img src="./downloads/content-textures.svg" width="120px" />
</button>
function contentDownloads(element) {
var x = document.getElementById(element.dataset.downloadsid);
if(x == null) return;
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
You can query the elements with a class and iterate each
<div class="download-element">Element 1</div>
<div class="download-element">Element 2</div>
<div class="download-element">Element 3</div>
<button class="btn btn-link" type="button" onclick="contentDownloads()">
<img src="./downloads/content-textures.svg" width="120px" />
</button>
function contentDownloads() {
document.querySelectorAll('.download-element')
.forEach(element => {
if(element.style.display === "none") {
element.style.display = "block";
} else {
element.style.display = "none";
}
})
}
I am looking for a way to avoid rewriting the same code again and again.
I am making a web page that has divs with hide and show option, with the help of a button you toggle between hide and show. I found an easy way to achieve the effect with this code:
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
This works perfectly but gets a bit tedious when you have a dozen or more divs with said effect. Is there a way to avoid having to rewrite the function for each and every div?
Thank you! :)
Easy, parameterize the id:
function myFunction(divId) {
var x = document.getElementById(divId);
and in the HTML pass the id to the function:
<button onclick="myFunction('myDIV')">Try it</button>
<div id="myDIV"> ...</div>
<button onclick="myFunction('myOtherDIV')">Try it</button>
<div id="myOtherDIV"> ...</div>
... and so on ...
You can keep one single function and handle as many divs as you want.
You could run the javascript function with a parameter. So you only have one function and then you only need to change the parameter name. See the example below.
function myFunction(div) {
var x = document.getElementById(div);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<body>
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<button onclick="myFunction('myDIV')">Try it</button>
<button onclick="myFunction('myDIV2')">Try it2</button>
<div id="myDIV">
This is my DIV element.
</div>
<div id="myDIV2">
This is my DIV2 element.
</div>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
</body>
Just pass the div id to a function
function toggleDiv(divId) {
var x = document.getElementById(divId);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
This works perfectly but gets a bit tedious when you have a dozen or
more divs with said effect
Create an array of such div ids to be toggled and iterate the same, for example
var divIds = ["myDIV1", "myDIV2", "myDIV3"];
divIds.forEach( s => toggleDiv(s) );
Pass a parameter into the function.
function myFunction(divName) {
var x = document.getElementById(divName);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<body>
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<button onclick="myFunction('myDIV')">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<button onclick="myFunction('myDIV2')">Try it</button>
<div id="myDIV2">
This is my DIV2 element.
</div>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
</body>
using event target and operating relatively on elements, can do the task.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<hr>
<div class="wrapper">
<button onclick="myFunction(event)">Try first</button>
<div class="content">
This is my DIV element.
</div>
</div>
<hr>
<div class="wrapper">
<button onclick="myFunction(event)">Try second</button>
<div class="content">
This is my DIV element.
</div>
</div>
<hr>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
<script>
function myFunction(event) {
var wrapper = event.target.parentElement;
var content = wrapper.querySelector('.content');
if (content.style.display === "none") {
content.style.display = "block";
} else {
content.style.display = "none";
}
}
</script>
</body>
</html>
function myFunction() {
var x = document.getElementsByClassName("myDIV");
for (let i = 0; i < x.length; i++){
x[i].style.display = x[i].style.display == "none" ? "block" : "none";
}
}
<body>
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<button onclick="myFunction()">Try it</button>
<div class="myDIV">
This is my DIV element.
</div>
<div class="myDIV">
This is my DIV element.
</div>
<div class="myDIV">
This is my DIV element.
</div>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
</body>
function toggleVisibility(selector) {
const elements = document.querySelectorAll(selector);
elements.forEach( element => {
const isVisible = element.offsetHeight;
if (isVisible) {
element.setAttribute('hidden', '');
} else {
element.removeAttribute('hidden');
}
});
}
<button onclick="toggleVisibility('#myDIV')">Try it</button>
<button onclick="toggleVisibility('.toggle')">Try it with className</button>
<div id="myDIV">
This is my DIV element.
</div>
<div class="toggle">
This is my DIV element.
</div>
<div class="toggle">
This is my DIV element.
</div>
I`m begginer in Javascript and I need some help.
So, I need that, when I push the button, paragraph "leftside" appear
<div id="content">
<script>
function myFunction() {
document.getElementById("contentp").innerHTML = leftside;
var x = document.getElementById("leftside")
x.style.display = "normal";
}
</script>
<button id="buttonI" type="button" onclick="myFunction()">Show left side!</button>
<p id="leftside" style="display: none">Left side</p>
<p id="contentp"></p>
x.style.display = "block";
set it block or another value of display except none
You have to append the leftside to the contentp and set its display property to block. normal is not a valid option
<script>
function myFunction() {
document.getElementById("contentp").appendChild(document.getElementById("leftside"));
document.getElementById("leftside").style.display = "block";
}
</script>
<button id="buttonI" type="button" onclick="myFunction()">Show left side!</button>
<p id="leftside" style="display: none">Left side</p>
<p id="contentp"></p>