Need help with JavaScript

[jonasa97]

Hello,

I am currently trying out things with JavaScript. I need one div to be replaced with another one. That means I don't want to replace the content of the div but take a different div that is hidden at the beginning to take the place of the old one. I am not even aware if this would be possible with JavaScript?!!

[Ciccioo]

oh it is

every DOM element has a removeChild() method, which you can use to remove an element, and an appendChild() method to add an element

so you just take the old one, remove it, and place the new one there

 

just be sure that it's the best way to do it, isn't it possible to just put display:none on the old one and display:block on the second one?

[Toxic Tom]

Not exactly sure what you mean but it sounds like you might want something server-side for this eg PHP

 

Might be easier...

[Nallown]

In this case js would be a useful choice, what you would want to do is add id to the 2 divs like so

<div id="firstDiv">BlabBla this is div number 1</div><div id="secondDiv">BlabBla this is div number 2 TWEO</div>

And then in css you would create a CSS class called hidden and add a attribute display which is set to none which means that its not visible

.hidden{	display:none;}

Add the hidden class to the div which you want hidden by default

<div id="firstDiv">BlabBla this is div number 1</div><div id="secondDiv" class="hidden">BlabBla this is div number 2 TWEO</div>

Now secondDiv is hidden and if you want to hide one of the divs and show the second div through javascript then you would simply add the class hidden and remove it from the other like so

document.getElementById("firstDiv").classList.add('hidden');document.getElementById("secondDiv").classList.remove('hidden');

This would remove the class hidden from secondDiv and add it to firstDiv
 
Add this javascript whenever you want to hide firstDiv and show secondDiv
 
Keep in mind that this is no switch, so whenever you run this javascript again it would just hide firstDiv again.
To make it a switch you simply add a check which would check whether firstDiv is hidden and if it is then show it or else it would be shown so we would hide it.

// IF firstDiv is hidden then remove class hidden and add it to secondDivif(document.getElementById('firstDiv').className == "hidden"){    document.getElementById("firstDiv").classList.remove('hidden');    document.getElementById("secondDiv").classList.add('hidden');}else{ // ELSE add class hidden to firstDiv and remove it from secondDiv    document.getElementById("firstDiv").classList.add('hidden');    document.getElementById("secondDiv").classList.remove('hidden');}

[tbc]

i'm willing to bet that the OP is not a DOM library author

 

just use jquery and .toggle()

[Ciccioo]

i'm willing to bet that the OP is not a DOM library author

just use jquery and .toggle()

dom library? when you write <p> you're performing an alteration on the DOM tree, it's nothing incredibly complex

and with pure javascript it's about 2 or 3 very simple instructions

[tbc]

I think I don't understand your first statement.  ALL operations on the DOM are simple when generalized.  traverse, add, delete for nodes. add, delete for attributes.  Is there something specifically you're referring to?

 

sure, but with jQuery it's only ONE statement per element.  that's a minimum 50% reduction in LOC.   that's a pretty significant deal for a common operation.

 

the less shit you have, the less shit that can get smelly

[Ciccioo]

I think I don't understand your first statement.  ALL operations on the DOM are simple when generalized.  traverse, add, delete for nodes. add, delete for attributes.  Is there something specifically you're referring to?

 

sure, but with jQuery it's only ONE statement per element.  that's a minimum 50% reduction in LOC.   that's a pretty significant deal for a common operation.

 

the less shit you have, the less shit that can get smelly

eh i have a fetish for pure javascript, i try to avoid jquery when i can

 

what i meant is that the operation of actually removing the element from the dom to insert the other one is not complex, it's just a couple of instructions

 

but as i said in the first post, if he only wants the visual behaviour of "swapping the div" he'd better act on the right css properties instead

[Nallown]

eh i have a fetish for pure javascript, i try to avoid jquery when i can

 

what i meant is that the operation of actually removing the element from the dom to insert the other one is not complex, it's just a couple of instructions

 

but as i said in the first post, if he only wants the visual behaviour of "swapping the div" he'd better act on the right css properties instead

Good point actually but controlling or handling multiple classes in CSS is quiet limited, so you won't be able to for example on swipe have the div disappear or so where as within js you can directly detect the mouse coordinates so you can use that to find current coordinates and release coordinates to find out whether he swiped or not and if so then hide div.

 

The main problem with CSS is that when you want to change a certain div then you've gotta apply the same attributes to the handler so for example if you create a button and on active it would hide a certain div then the same effect would have to apply to the button.

[Ciccioo]

Good point actually but controlling or handling multiple classes in CSS is quiet limited, so you won't be able to for example on swipe have the div disappear or so where as within js you can directly detect the mouse coordinates so you can use that to find current coordinates and release coordinates to find out whether he swiped or not and if so then hide div.

 

The main problem with CSS is that when you want to change a certain div then you've gotta apply the same attributes to the handler so for example if you create a button and on active it would hide a certain div then the same effect would have to apply to the button.

oh i didn't mean to use exclusively css

the event handling is easier done with js, and when you handle the event with js you can act on css properties with either plain js or jquery

the toggle() method just switches the "display" css property back and forth between "none" and the original value set from the stylesheet, it's just an interface to css

 

sure, doing all the user interaction with just css is madness

[Nallown]

oh i didn't mean to use exclusively css

the event handling is easier done with js, and when you handle the event with js you can act on css properties with either plain js or jquery

the toggle() method just switches the "display" css property back and forth between "none" and the original value set from the stylesheet, it's just an interface to css

 

sure, doing all the user interaction with just css is madness

In that case you're 100% correct. I thought that you meant try to do as much as possible through CSS and if that was the case you'd be quiet limited. But for doing things such as managing the events throught js and the styling through CSS would be the most efficient way in my opinion. I myself don't use the toggle method since I like doing things as manual as possible, always try to avoid libraries and api's. They way I'd be doing it would be as I mentioned before, simply adding a hidden class to the div which has display:none; and adding it through js

[Ciccioo]

In that case you're 100% correct. I thought that you meant try to do as much as possible through CSS and if that was the case you'd be quiet limited. But for doing things such as managing the events throught js and the styling through CSS would be the most efficient way in my opinion. I myself don't use the toggle method since I like doing things as manual as possible, always try to avoid libraries and api's. They way I'd be doing it would be as I mentioned before, simply adding a hidden class to the div which has display:none; and adding it through js

yup, that, or, since it's just one value that needs to be changed, just this

element.style.display = "block";

which can easily become a switch like this, assuming that tom and bob are initialized with references to our divs

var states = ["block", "none"];var state = 0;function swap(){               bob.style.display = states[state];               tom.style.display = states[1-state];               state = 1 - state;}

[Nallown]

 

yup, that, or, since it's just one value that needs to be changed, just this

element.style.display = "block";

which can easily become a switch like this, assuming that tom and bob are initialized with references to our divs

var states = ["block", "none"];var state = 0;function swap(){               bob.style.display = states[state];               tom.style.display = states[1-state];               state = 1 - state;}

Beautiful! Has anyone told you how good you look? I mean just look at your profile picture! You're chewing some chewing gum!

But seriously that looks pretty dandy, I myself would of done it differently but using arrays is always a better option. 

[Ciccioo]

Beautiful! Has anyone told you how good you look? I mean just look at your profile picture! You're chewing some chewing gum!

But seriously that looks pretty dandy, I myself would of done it differently but using arrays is always a better option.

oh thanks sir, if you want to support me you can do a little donation of 200, 500 or 1000 $, or send me a car if you so desire

i'll send you back more kinky code to show how thankful i am

[Nallown]

oh thanks sir, if you want to support me you can do a little donation of 200, 500 or 1000 $, or send me a car if you so desire

i'll send you back more kinky code to show how thankful i am

Can you drive a car? I mean you're just a poop chewing some gum. Will you even be able to sit on a seat and press a peddle? stupid greedy poop >.>

[Ciccioo]

Can you drive a car? I mean you're just a poop chewing some gum. Will you even be able to sit on a seat and press a peddle? stupid greedy poop >.>

i would never make my car's seats dirty of poop, i just want the car for my collection

and i mean my java Collection, of course. you can gimme your car by calling Ciccioo.cars.add(yourMaserati)

 

[Nallown]

i would never make my car's seats dirty of poop, i just want the car for my collection

and i mean my java Collection, of course. you can gimme your car by calling Ciccioo.cars.add(yourMaserati)

 

I tried calling the method but it doesn't seem to be working I get this error missing } at line 6

[Ciccioo]

I tried calling the method but it doesn't seem to be working I get this error missing } at line 6

sorry, i fixed it now

it compiles, but throws a NullPointerException accessing yourMaserati

[Nallown]

sorry, i fixed it now

it compiles, but throws a NullPointerException accessing yourMaserati

Alright after doing some research and reading 12 books with 16,000 pages I found out that the main reason we're getting these errors are because our tin foil hat ran out of juice, we need to refuel it

[Ciccioo]

DONE

[Paralectic]

You could use this: https://api.jquery.com/toggleClass/

Combine it with any .Show()/.Hide()/.Toggle() and make what you need.