HTML Code...the buttons interfere with each other. How can I fix this?
<button onclick="myFunction()" style="margin-left:50px;"> Click Here For Help </button> <br> <br>
<div id="help1">
<p> Help </p>
</div>
<button onclick="myFunction()" style="margin-left:50px;"> Click Here For Help </button> <br> <br>
<div id="help2">
<p> Help </p>
</div>
Javascript shown with ids for the different buttons. Onload section to hide the content on page
load.
<script>
function myFunction() {
var x = document.getElementById("help1");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
window.onload = function() {
document.getElementById("help1").style.display = 'none';
};
</script>
<script>
function myFunction() {
var x = document.getElementById("help2");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
window.onload = function() {
document.getElementById("help2").style.display = 'none';
};
</script>
One was is to simply pass the id of the element as an input to myFunction so the corresponding element can be retrieved from the document and set to display:none. This will save you from needing duplicate functions. Press the blue Run code snippet button below to see the results.
Method 1:
function myFunction(ID) {
var x = document.getElementById(ID);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
window.onload = function() {
document.getElementById("help1").style.display = 'none';
document.getElementById("help2").style.display = 'none';
};
<button onclick="myFunction('help1')" style="margin-left:50px;"> Click Here For Help </button> <br> <br>
<div id="help1">
<p> Help </p>
</div>
<button onclick="myFunction('help2')" style="margin-left:50px;"> Click Here For Help </button> <br> <br>
<div id="help2">
<p> Help </p>
</div>
Alternative Method:
This example reduces the amount of JavaScript but slightly increases the amount of HTML id tags and classes. It also incoporates some additional CSS. As suggested in the comment above this method uses:
• Event listeners
• Toggles a class using classList
function myFunction() {
document.getElementById("help" + String(this.id.split("_")[2])).classList.toggle("Display_It");
}
window.onload = function() {
document.getElementById("Toggle_Button_1").addEventListener("click", myFunction);
document.getElementById("Toggle_Button_2").addEventListener("click", myFunction);
};
#Toggle_Button_1,
#Toggle_Button_2 {
margin-left: 50px;
}
.Help_Panel {
display: none;
}
.Display_It {
display: block;
}
<button id="Toggle_Button_1"> Click Here For Help </button>
<br>
<br>
<div class="Help_Panel" id="help1">
<p>Help</p>
</div>
<button id="Toggle_Button_2"> Click Here For Help</button>
<br>
<br>
<div class="Help_Panel" id="help2">
<p>Help</p>
</div>
Related
Through this code i have to hide the dropdown-container when a user clicked outside of the button. And the code works fine initially. But later, it is not responding to the onclick event on button also. sometimes it closes the dropdown if i cliked a button. I have tried with many stackoverflow questions but i didnot get answer. Here is my code. Hope someone could solve this issue.
<div class="button-grp">
<button class="icon-button" type="button" onclick="menu(event, '1')"><img
src="../../Images/icons/local_library-white-24dp.svg" class="icon"><br>Learning
</button>
<button class="icon-button" type="button" onclick="menu(event, '2')"><img
src="../../Images/icons/gamepad-white-24dp.svg" class="icon"><br>Tools
</button>
</div>
<div class="sidebar-open">
<div class="main-options" id="0">
<button class="options-button" type="button">Academics</button>
<div class="dropdown-container">
Course Details
Assignments
</div>
<button class="options-button" type="button">Schedule</button>
<div class="dropdown-container">
Exams
Classes
</div>
</div>
</div>
<div id="mainmenu">
Lorem ipsum dolor sit,
</div>
And my Javascript code is as follows..
//function to toggle between clicked buttons and close when double clicked on it.
function menu(evt, id) {
document.querySelectorAll(".main-options").forEach(function(div) {
if (div.id === id) {
// Toggle specified DIV
if(div.style.display === "block"){
div.style.display = "none";
document.getElementById("mainmenu").style.marginLeft = "80px";
document.body.style.backgroundColor = "#fff";
}else{
div.style.display = "block";
document.getElementById("mainmenu").style.marginLeft = "230px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
} else {
// Hide other DIVs
div.style.display = "none";
}
});
}
//function to hide the dropdown when clicked outside the button.
window.addEventListener('click', function(event){
if (!event.target.matches('.icon-button') ){
var dropdowns = document.getElementsByClassName("main-options");
var i;
for (i = 0; i < dropdowns.length; i++) {
if (dropdowns[i].style.display === "block") {
dropdowns[i].style.display ="none";
document.getElementById("mainmenu").style.marginLeft = "80px";
document.body.style.backgroundColor = "#fff";
}
}
}
});
Why don't you try this:
document.addEventListener("DOMContentLoaded", () => {
document.querySelector(".icon-button").forEach((button) => {
button.addEventListener('click', ()=>{
...
});
});
});
I want that the text ist hidden in the beginning and after clicking the button it is displayed. I would be really greatfull if someone would find the mistake in my code.
function F1()
{
var x = document.getElementById("step1DIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<!DOCTYPE html>
<html>
<body>
<button onclick="F1()"> <b>Step 1</b> </button>
<div id="step1DIV">
<p> text </p>
</div>
</body>
</html>
You need to give it an initial style that hides it in the HTML.
function F1()
{
var x = document.getElementById("step1DIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<button onclick="F1()"> <b>Step 1</b> </button>
<div id="step1DIV" style="display: none;">
<p> text </p>
</div>
But inline styles are poor design, it's better to use a class with CSS.
function F1()
{
var x = document.getElementById("step1DIV");
x.classList.toggle("hidden");
}
.hidden {
display: none;
}
<button onclick="F1()"> <b>Step 1</b> </button>
<div id="step1DIV" class="hidden">
<p> text </p>
</div>
I just defined it as 'none' to begin with as such:
<div id="step1DIV" style="display: none">
Try to initially set the display of your step1 DIV to none. Either using inline styling or CSS.
You can also try to run your function on page load.
You want to toggle the hidden attribute defined in the HTML Standard.
function F1 () {
document.getElementById("a").toggleAttribute("hidden");
}
<!DOCTYPE html>
<html>
<body>
<button onclick="F1()"> <b>Step 1</b> </button>
<div id=a>
<p> text </p>
</div>
</body>
</html>
I have three buttons and three JS functions that toggle the display of three different divs. How can I simplify/condense my three JS functions into one function that connects each button to its corresponding content?
Example:
HTML Buttons
<button onclick="myFunction1()">Button 1</button>
<button onclick="myFunction2()">Button 2</button>
<button onclick="myFunction3()">Button 3</button>
HTML Content
<div id="ContentOne">This is Content One.</div>
<div id="ContentTwo">This is Content Two.</div>
<div id="ContentThree">This is Content Three.</div>
JavaScript
function myFunction1() {
var x = document.getElementById("ContentOne");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myFunction2() {
var x = document.getElementById("ContentTwo");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myFunction3() {
var x = document.getElementById("ContentThree");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
Add a parameter to the condensed function et violà!
function myFunction(id) {
var x = document.getElementById(id);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<button onclick="myFunction('ContentOne')">Button 1</button>
<button onclick="myFunction('ContentTwo')">Button 2</button>
<button onclick="myFunction('ContentThree')">Button 3</button>
<div id="ContentOne">This is Content One.</div>
<div id="ContentTwo">This is Content Two.</div>
<div id="ContentThree">This is Content Three.</div>
Explanation
The only part that differs within the functions is the ID, so decouple the ID. The function does not need to know which element will be affected of the styling adaptions. So keep the function "dump".
Further learning: Anti-Patterns
If you are interested in improving your programming style, I suggest you take a look at some anti-pattern. For example, you demonstrated the antipattern of hard coding. It's not as untypical as you think.
Inline JS is hard to maintain.
I'd use this code with just a line of CSS to hide elements,
and use JS simply to toggle that .hide class:
const toggleEl = e => document.getElementById(e.target.dataset.tog).classList.toggle("hide");
[...document.querySelectorAll("[data-tog]")].forEach( btn =>
btn.addEventListener("click", toggleEl)
);
.hide { display: none;}
<button data-tog="ContentOne">Button 1</button>
<button data-tog="ContentTwo">Button 2</button>
<button data-tog="ContentThree">Button 3</button>
<div class="hide" id="ContentOne">This is Content One.</div>
<div class="hide" id="ContentTwo">This is Content Two.</div>
<div class="hide" id="ContentThree">This is Content Three.</div>
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
Here's a ES5 example if you prefer:
function toggleEl() {
var id = this.getAttribute("data-tog");
document.getElementById(id).classList.toggle("hide");
}
var buttons = document.querySelectorAll("[data-tog]");
[].forEach.call(buttons, function( btn ) {
btn.addEventListener("click", toggleEl.bind(btn))
});
.hide { display: none;}
<button data-tog="ContentOne">Button 1</button>
<button data-tog="ContentTwo">Button 2</button>
<button data-tog="ContentThree">Button 3</button>
<div class="hide" id="ContentOne">This is Content One.</div>
<div class="hide" id="ContentTwo">This is Content Two.</div>
<div class="hide" id="ContentThree">This is Content Three.</div>
You can use a higher order function.
function generateFunction(elementId) {
return function() {
var x = document.getElementById(elementId);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
}
var myFunction1 = generateFunction("ContentOne");
var myFunction2 = generateFunction("ContentTwo");
var myFunction3 = generateFunction("ContentThree");
I copied w3schools hide and show toggle, but I want it to be reversed, so that the extra information isn't there from the beginning, but the button shows it.
This is the code:
html:
<button onclick="myFunction()">Click Me</button>
<div id="myDIV">
This is my DIV element.
</div>
js:
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
Any help would be much appreciated!
Solution is simple: Just hide the div.
<div id="myDIV" style="display:none">
This is my DIV element.
</div>
Even cooler if you hide it in css instead:
<div id="myDIV">
This is my DIV element.
</div>
And this in your css:
#myDIV {
display: none;
}
I'd us a utility CSS class for this:
.is--hidden {
display: none;
}
Then you can apply it to the element by default:
<button class="mybutton">Click Me</button>
<div class="example is--hidden">Some Text</div>
and toggle it via jQuery:
$('.mybutton').on('click', function () {
$('.example').toggleClass('is--hidden');
})
Fiddle: https://jsfiddle.net/tL5mj54n/
You just need to add display : none in your code.
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
<button onclick="myFunction()">Click Me</button>
<div id="myDIV" style="display:none;">
This is my DIV element.
</div>
No changes to styles or HTML required. Your javascript should be the following:
(function () {
var x = document.getElementById('myDIV');
if (x.style.display != 'none') {
x.style.display = 'none';
} else {
x.style.display = 'block';
}
} )();
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display != 'none') {
x.style.display = 'none';
} else {
x.style.display = 'block';
}
};
The first function runs and hides your div and the second reacts to clicks and toggles the div.
Here's a snippet example
Set the style to hide the element (display:none) from the start. Toggle it on click.
document.getElementById('myButton').onclick = function() {
var x = document.getElementById('myDIV');
x.style.display = x.style.display === 'none' ? 'block' : 'none';
};
<button id='myButton' >Click Me</button>
<div id="myDIV" style="display:none">
This is my DIV element.
</div>
My html code looks like this:
<div id="register" class="dropdown">
<button id="regbutton" href="#" onclick="toggle_visibility('container1');">show1</button>
<div id="container1" style="display:'none';">
</div>
</div>
<div id="login" class="dropdown">
<button id="loginbutton" href="#" onclick="toggle_visibility('container2')"><b>Masuk</b></button>
<div id="container2" style="display:'none';"></div>
</div>
and this is my js code:
function toggle_visibility(id) {
var x = document.getElementById(id); {
if(x.style.display == 'block') {
x.style.display = 'none';
} else {
x.style.display = 'block';
}
}
The question is, How can I make these divs to be "when one div is visible, the other one is hidden" ?
sorry for my bad English lang :# :3
Firstly add a class to each of the divs here i have it as container
then hide all of them, and show the 1 specific div
<div id="register" class="dropdown">
<button id="regbutton" href="#" onclick="toggle_visibility('container1');">show1</button>
<div id="container1" class='container' style="display:none;">test
</div>
</div>
<div id="login" class="dropdown">
<button id="loginbutton" href="#" onclick="toggle_visibility('container2')"><b>Masuk</b></button>
<div id="container2" class='container' style="display:none;">test
</div>
</div>
<script>
function toggle_visibility(id) {
var x = document.getElementById(id);
var divsToHide = document.getElementsByClassName('container'); //divsToHide is an array so we loop through them
for(var i = 0; i < divsToHide.length; i++){
divsToHide[i].style.display = "none";
}
x.style.display = 'block';
}
</script>
If you only need these two divs, you can simply use their div id's and a simple conditional:
function toggle(divNumber) {
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
if (divNumber == 1) {
div1.style.display = 'none';
div2.style.display = 'block';
} else {
div2.style.display = 'none';
div1.style.display = 'block';
}
}
Fiddle:
https://jsfiddle.net/8480twew/