Flip divs using a function - javascript

I'm new with javascript and I have a tiny problem.
I want to create a function and by pressing that button to invert the two divs ( the first one to be placed second and viceversa). I hope you understand.
I have this code:
<div> text 1 </div>
<div> text 2 </div>
<button> invert </button>

Using pure javascript, you can simply switch the contents of each div:
function flip(){
div1_content = document.getElementById("div1").innerHTML;
div2_content = document.getElementById("div2").innerHTML;
document.getElementById("div1").innerHTML = div2_content;
document.getElementById("div2").innerHTML = div1_content;
}
<div id="div1"> Text 1 </div>
<div id="div2"> Text 2 </div>
<button onclick="flip()"> Flip it! </button>
We're simply storying the contents of each div, then assigning them to one another. Hopefully, you can take this, learn from it, and apply it how you intend to.

Here is a simple javascript solution
jsFiddle https://jsfiddle.net/xzLme043/2/
myFunction = function(){
var div1 = document.getElementById('one');
var div2 = document.getElementById('two');
var html = div1.innerHTML;
div1.innerHTML = div2.innerHTML;
div2.innerHTML = html;
};

For this solution, you'll just place the current two divs in another parent div container, and then just insert the second div before the first, on the click of the invert button. No changing or pulling of inner text or HTML required.
function invertDivs(parentDiv) {
var first = document.getElementById(parentDiv).firstElementChild;
console.log(first);
var second = document.getElementById(parentDiv).lastElementChild;
console.log(second);
document.getElementById(parentDiv).insertBefore(second, first);
}
<div id="parent">
<div id="first">div 1</div>
<div id="second">div 2</div>
</div>
<button onclick="invertDivs('parent');">invert</button>

Related

javascript replace node and all of it childs with anothe code

How can you replace HTML tag with all tags branching inside using Javascript with other HTML code?
example:
<div class="a">
<div class="sub-a1">
<div class="sub-a12">
</div>
</div>
<div class="sub-a2">
<div class="sub-b">
</div>
</div>
I wanna replace all tags from tag div class 'a' including all sub nodes with another code.
is that's possible?
please help me.
const target = document.querySelector(".a");
target.innerHTML = //place your html here as string
Yes, this is possible. If you want to keep the div.a elements and just change the "subnodes" you have to use innerHTML in stead of outerHTML.
const divs = [...document.getElementsByClassName("a")]; //make a copy of the HTML collection so that they can be removed without being removed in the array
const newElement = "<h1>Replaced Element</h1>"; //this is your replacement element
for (let i = 0; i < divs.length; i++) { // loop through all the divs
divs[i].outerHTML = newElement; // set the outer html for the div to the replacement elemzent
}
You can do with .replaceWith() with a valid HTML code.
function replace() {
var para = document.createElement("P"); // Create a <p> element
para.innerText = "This is a paragraph"; // Insert text
document.querySelector(".a").replaceWith(para);
}
<div class="a">
<div class="sub-a1">
<div class="sub-a12">
<h4>Sample content1</h4>
</div>
</div>
<div class="sub-a2">
<div class="sub-b">
<h4>Sample content2</h4>
</div>
</div>
</div>
<button onclick="replace();"/>Click to Replace</button>

Show and append a div

I'm writing a HTML code where there are 3 divs - and in the mainDiv2, there is this another div that is hidden. When I click on the mainDiv2, I want to unhide the hiddenDiv(this I'm able to do it). As well as I want this hiddenDiv to be shown in mainDiv1 as a child.
Here is my code.
<div class="mainDiv1">
This si a main div content
</div>
<div class="mainDiv2" onclick="showhiddenDiv()">
This is a sub div content
<div class="hiddenDiv" id="hiddenDiv" style="display:none">
Hello World
</div>
</div>
JS
function showhiddenDiv(){
document.getElementById('hiddenDiv').style.display="block";
}
please let me know how can I do this.
Here is a working fiddle. https://jsfiddle.net/8pj3uvfn/1/
Thanks
You can use appendChild like below
function showhiddenDiv() {
var hiddenDiv = document.getElementById('hiddenDiv');
var mainDiv1 = document.getElementsByClassName('mainDiv1')[0];
hiddenDiv.style.display = "block"
mainDiv1.appendChild(hiddenDiv)
}
<div class="mainDiv1" id="mainDiv1">
This is a main div content
</div>
<div class="mainDiv2" onclick="showhiddenDiv()">
This is a sub div content
<div class="hiddenDiv" id="hiddenDiv" style="display:none">
Hello World
</div>
</div>
As well as I want this hiddenDiv to be shown in mainDiv1 as a child.
You need to clone the hiddenDiv and put it in mainDiv1.
So modify your method as
function showhiddenDiv(){
var hiddenNode = document.getElementById('hiddenDiv');
hiddenNode.style.display="block";
var copyHiddenNode = hiddenNode.cloneNode( true );
copyHiddenNode.id += "_1"; //change the id so that ids are not duplicated
document.getElementById("mainDiv1").appendChild( copyHiddenNode );
}
You could use appendChild
function showhiddenDiv(){
var hiddenDiv = document.getElementById('hiddenDiv');
document.getElementsByClassName('mainDiv1')[0].appendChild(hiddenDiv);
hiddenDiv.style.display="block";
}
Demo
Assuming that you have set the id attributes of the divs properly,
function showhiddenDiv(){
var hiddenDiv = document.getElementById('hiddenDiv'); //Get the reference
document.getElementById('mainDiv1').appendChild(hiddenDiv) //Chenge the DOM order (you don't have to clone)
hiddenDiv.style.display="block"; //Unhide
}
<div class="mainDiv1">
This si a main div content
</div>
<div class="mainDiv2" onclick="document.getElementById('hiddenDiv').style.display = 'block'">
This is a sub div content
<div class="hiddenDiv" id="hiddenDiv" style="display:none">
Hello World
</div>
</div>

Is it bad practice to hold information in the id of an HTML element?

Let's say I have a template and I want to loop and create div's. I want to listen to clicks on the buttons contained in each of these divs:
<div class="repeatedDiv">
<button class="reply-button">
</div>
$('.reply-button').on('click',function(e)...)
I want to make the reply button function specific to the div that it was selected on. Would it be bad to have something like:
<div class="repeatedDiv">
<button class="reply-button" id="reply-{{this.id}}">
</div>
Don't make it more complicated than it really is
$(document).on('click', '.reply-button', function(e){
var divClicked = $(e.target).closest('.repeatedDiv');
// do something with clicked div
// var divClicked is the div elmt that contains the button that was clicked
// doing it this way you might not even need an id at all
console.log(divClicked.attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="repeatedDiv">
<button class="reply-button">div1</button>
</div>
<div id="div2" class="repeatedDiv">
<button class="reply-button">div2</button>
</div>
<div id="div3" class="repeatedDiv">
<button class="reply-button">div3</button>
</div>
And if you do need an id when creating a new div create it dynamically with e.g.
var newID = "id-" + Date.now();
console.log(newID);

Setting Width of <div> with Javascript

I have a <table> which is dynamically created so the width is unknown. I'm trying to add horizontal scroll bars to the top and bottom of it. My current code...
<div class="wrapper1">
<div class="div1" width="<script type=\"text/javascript\">document.write(mytext);</script>">
</div>
</div>
<div class="wrapper2">
<div class="div2">
<table id="table_width">
*table content goes here*
</table>
</div>
</div>
<script type="text/javascript">
$(function(){
$(".wrapper1").scroll(function(){
$(".wrapper2")
.scrollLeft($(".wrapper1").scrollLeft());
});
$(".wrapper2").scroll(function(){
$(".wrapper1")
.scrollLeft($(".wrapper2").scrollLeft());
});
});
var mytext = document.getElementById("table_width").offsetWidth; //Method 1
var mytext = document.getElementById("table_width").style.width = width + 'px'; //Method 2
</script>
In the last few lines, I've tried two different methods to set the width of the containing <div> to be mytext.
Any ideas why either method isn't working? BTW, I'm not trying both methods at the same time the way it's shown here.
To find the width of an element you need to use window.getComputedStyle followed by getPropertyValue on that returned value. What you are doing now only gives you the CSS value which is not set.
https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
The problem could be this.
The script you have written to find mytext is being executed after the table is created. But by the time the div is created value of mytext is not known. So I would recommend doing this.
<!DOCTYPE html>
<div class="wrapper1">
<div id="div1">
</div>
</div>
<div class="wrapper2">
<div class="div2">
<table>
*table content goes here*
</table>
</div>
<script type="text/javascript">
$(function(){
$(".wrapper1").scroll(function(){
$(".wrapper2")
.scrollLeft($(".wrapper1").scrollLeft());
});
$(".wrapper2").scroll(function(){
$(".wrapper1")
.scrollLeft($(".wrapper2").scrollLeft());
});
});
var mytext = document.getElementById("table_width").offsetWidth; //Method 1
var mytext = document.getElementById("table_width").style.width ; //Method 2
document.getElementById('div1').width = mytext;
</script>
</html>
The above code changes the width of the div after finding the value of mytext.
I ended up using parts of both of the suggested answers for this question. After a lot of fiddling, I ended up with this for the final Javascript...
var elem = document.getElementById("table_width");
var mytext = window.getComputedStyle(elem,null).getPropertyValue("width");
$('#div1').css({'width':mytext});
$('#div1').css({'overflow': 'scroll'});

get outer div by id, then get inner div by class

First I want to get the outer div by id, then the inner div by class (dynamically added by jquery mobile ui-collapsible content) and finally append a child text node to it.
<div id="aab" data-role="collapsible" data-content-theme="c">
<h3>Heading</h3>
<div class="ui-collapsible-content">
<div id="coll">
Collapsible Content
</div>
</div>
</div>
<p><button onclick='func()'>Button</button></p>
<script>
function func() {
var section = $("#aab > .ui-collapsible-content");
section.appendChild(document.createTextNode("Hello world!"));
}
</script>
I also tried things out with document.getElementById but somehow it doesn't work.. Thanks in advance!
You have use jquery for selection so you should use it for adding child
function func() {
var section = $("#aab > .ui-collapsible-content");
section.append("Hello world!");
}

Categories