var lastid;
function show_submenu(obj) {
var ele = document.getElementById(obj).style;
var elemLastId = document.getElementById(lastid);
if (elemLastId != null) {
elemLastId.style.display = "none";
}
lastid = obj;
if (ele.display == "none") {
ele.display = "block";
} else {
ele.display = "none";
}
}
function toggle_menu(id){
var menu = document.getElementById(id);
if(menu.style.display == 'none')
menu.style.display = 'block';
else
menu.style.display = 'none';
}
Can somebody teach me how to debug this code?
I want to reset the main level when I click the button of menu again.
Related
So I have got this HTML-Code
<button id="demo" onclick="toogleFunction()">Login</button>
and this JS-Code
function toogleFunction()
{
var x = document.getElementById('but_login');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
document.getElementById("demo").innerHTML = "Insert your data!";
}
The code does what it sould do:
- it is showing me the spoiler
- the name changes
My question is: How can I do it so that it changes the name back to "login", when I click again on the button, or when I click on another button.
Thanks!
function toogleFunction()
{
var x = document.getElementById('but_login');
var demo = document.getElementById("demo")
var text = demo.innerText;
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
if(text === "Login"){
demo.innerText = "Insert your data!";
}else{
demo.innerText = "Login";
}
}
I'm not a programmer so I hope you will pardon me if I will write not correct things.
I have two fieldset with two different "id"
I tried to write a code in javascript that when I show the 1st the 2nd will be hided and viceversa.
I can't understand where I'm doing wrong.
Can you help me?
Here html
<label onclick="add()"></label>
<label onclick="modify()"></label>
<fieldset id="add">some text</fieldset>
<fieldset id="modify">some other text</fieldset>
and here my javascript text
function add() {
var x = document.getElementById('add');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function modify() {
var y = document.getElementById('modify');
if (y.style.display === 'none') {
y.style.display = 'block';
x.style.display = 'none';
} else {
y.style.display = 'none';
}
}
the problem is that not only I would like that when I do click on the first it open and with another click it will close but also that when 1 fieldset is shown, the other will be hided and viceversa.
Thank you
You can use below function
function hideShow(targetId) {
var targetNode = document.getElementById(targetId);
if(targetNode.style.display === 'block') {
return; // If click is on the node which is already shown, just return
}
var x = document.getElementById('add');
var y = document.getElementById('modify');
if (x.style.display === 'none') {
x.style.display = 'block';
y.style.display = 'none';
} else {
y.style.display = 'block';
x.style.display = 'none';
}
}
And use same function for both,
<label onclick="hideShow('add')"></label>
<label onclick="hideShow('modify')"></label>
<fieldset id="add">some text</fieldset>
<fieldset id="modify">some other text</fieldset>
You need to define x in your modify function. Or like #ibrahim said, just defined both variables outside the sope
function modify() {
var y = document.getElementById('modify');
var x = document.getElementById('add')
if (y.style.display === 'none') {
y.style.display = 'block';
x.style.display = 'none';
} else {
y.style.display = 'none';
}
}
Simple fix, if you want to get working.
function add() {
var x = document.getElementById('add');
var y = document.getElementById('modify');
if (x.style.display === 'none') {
x.style.display = 'block';
y.style.display = 'none';
} else {
x.style.display = 'none';
}
}
function modify() {
var x = document.getElementById('add');
var y = document.getElementById('modify');
if (y.style.display === 'none') {
y.style.display = 'block';
x.style.display = 'none';
} else {
y.style.display = 'none';
}
}
As you can see both has x and y var so that none of them is undefined. To move to clean code, you may wish to bring the var outside of the methods(reduce redundancy of the code)
I want to compress all this code into a single block instead of 5. It works perfect, but it is very bloated. Any other tips for improving this code would be greatly appreciated.
JS:
function vanish1() {
var el = document.getElementById('priceCheck1');
if (el.style.display == "block") {
el.style.display = "none";
} else {
el.style.display = "block";
}
}
function vanish2() {
var el = document.getElementById('priceCheck2');
if (el.style.display == "block") {
el.style.display = "none";
} else {
el.style.display = "block";
}
}
function vanish3() {
var el = document.getElementById('priceCheck3');
if (el.style.display == "block") {
el.style.display = "none";
} else {
el.style.display = "block";
}
}
HTML:
<div id="priceCheck1">
test1
</div>
<div id="priceCheck2">
test2
</div>
<div id="priceCheck3">
test3
</div>
You could do this:
function vanish(elementName) {
var el = document.getElementById(elementName);
if (el.style.display == "block") el.style.display = "none";
else el.style.display = "block";
}
Function call:
vanish('priceCheck1');
Hello you can add a class name for the HTML.
then you can get each HTML by classname..
Even smaller...
function vanish(style) {
style.display == "block" ? style.display = "none" : style.display = "block";
}
vanish(document.getElementById("priceCheck1").style);
or
function vanish(element) {
element.style.display == "block" ? element.style.display = "none" : element.style.display = "block";
}
vanish(document.getElementById("priceCheck1"));
In this i want a function that when the user click on "Button 01" it should make visible the DIVid "01". After this when click on some other button, it should it hide the previous DIVid and make visible the relevant DIVid.
I have created a fiddle.
function Visibility() {
var har_element = document.getElementById('C');
var meth_element = document.getElementById('D');
var main_element = document.getElementById('E');
var vis = har_element.style;
if(vis.display == 'block') {vis.display = 'block';
meth_element.style.display='block';
main_element.style.display='block';
} else {
vis.display = 'block';
meth_element.style.display='block';
main_element.style.display='block';
}
}
try this
window.onload = function(){
hideSomeDivs();
}
function showHide(showHidebuttonId)
{
hideAll();
if(showHidebuttonId == "1")
document.getElementById("first").style.display = 'block';
else if(showHidebuttonId == "2")
document.getElementById("second").style.display = 'block';
else if(showHidebuttonId == "3")
document.getElementById("third").style.display = 'block';
else if(showHidebuttonId == "4")
document.getElementById("fourth").style.display = 'block';
else if(showHidebuttonId == "5")
document.getElementById("fifth").style.display = 'block';
}
function hideAll(){
document.getElementById("first").style.display = 'none';
document.getElementById("second").style.display = 'none';
document.getElementById("third").style.display = 'none';
document.getElementById("fourth").style.display = 'none';
document.getElementById("fifth").style.display = 'none';
}
function hideSomeDivs()
{
document.getElementById("second").style.display = 'none';
document.getElementById("third").style.display = 'none';
}
How do I disable the other onclick event once one of them has been activated. Both divs are set to display:none; in the CSS. This is probably really simple but I am new to programming.
HTML
<a id="leftbutton" href="#" onclick="showDiv(this.id); return false;">click me</a>
<a id="righttbutton" href="#"onclick="showDiv(this.id); return false;">click me</a>
Javascript
function showDiv(id)
{
if(id == "leftbutton"){
document.getElementById('orangediv').style.display = 'block';
}else{
document.getElementById('greendiv').style.display = 'block';
}}
this should do the trick:
function showDiv(id)
{
if(id == "leftbutton"){
document.getElementById('orangediv').style.display = 'block';
document.getElementById('righttbutton').onclick = null;
}else{
document.getElementById('greendiv').style.display = 'block';
document.getElementById('leftbutton').onclick = null;
}}
Like this for example:
function showDiv(id){
if (id == "leftbutton"){
document.getElementById('orangediv').style.display = 'block';
document.getElementById('rightbutton').onclick = "#";
}else{
document.getElementById('greendiv').style.display = 'block';
document.getElementById('leftbutton').onclick = "#";
}}
Something along these lines:
function showDiv(id){
var o = document.getElementById('orangediv');
var g = document.getElementById('greendiv');
if (id == "leftbutton"){
o.style.display = 'block';
}else{
g.style.display = 'block';
}
o.writeAttribute('onclick','');
g.writeAttribute('onclick','');
}
Just set the onclick property of the other element to null;
if (id == "leftbutton"){
document.getElementById('orangediv').style.display = 'block';
document.getElementById('righttbutton').onclick = null;
}
else{
document.getElementById('greendiv').style.display = 'block';
document.getElementById('leftbutton').onclick = null;
}
}
function showDiv(id) {
if ( showDiv.executed ) {
return false;
}
if ( id === "leftbutton" ) {
document.getElementById('orangediv').style.display = 'block';
} else {
document.getElementById('greendiv').style.display = 'block';
}
showDiv.executed = true;
}
showDiv.executed = false;
Doing it this way, you could always re-enable the showing by simply setting showDiv.executed to false.
You could test if the other element is displayed :
function showDiv(id)
{
if (id == "leftbutton" && (document.getElementById('greendiv').style.display == 'none'))
{
document.getElementById('orangediv').style.display = 'block';
}
else if(id == "rightbutton" && (document.getElementById('orangediv').style.display == 'none'))
{
document.getElementById('greendiv').style.display = 'block';
}
}
You can set the href attribute as id of div which should be visibled after you click.
showDiv function can get entire element as argument, then you have access to it attributes as well. Second argument can be a id of element you should hide,
<a id="leftbutton" href="orangediv" onclick="showDiv(this,'rightbutton');return false">click me</a>
<a id="righttbutton" href="greendiv"onclick="showDiv(this,'leftbutton');return false">click me</a>
And in js:
var showDiv =function(el, toHide){
document.getElementById( el.href ).style.display = 'block';
document.getElementById( toHide ).style.display = 'none';
el.onclick = null; //remove onclick declaration from this anchor.
}