We Keep Coding

How do I use JavaScript to select content and move to other elements?

I need to move some text from demoBoxA to demoBoxB.
The demoBoxA parent element has an id selector, but the child element below it has no identifiable selector.
Is it possible to select the text content directly? Then move it into the demoBoxB sub-element (the demoBoxB sub-element has an id selector)
There are 2 difficulties with this issue.
The content of demoBoxA is dynamically generated by the program and the sort is not fixed. There are no identifiable selectors for the subelements.
only need to select part of the content. For example, in the example below, just move the phone model text of "Google", "Huawei", "BlackBerry".
Any help, thanks in advance!
<div class="container" id="demoBoxA">
<div class="row">
<div class="col-md-6">Samsung</div>
<div class="col-md-6">Galaxy S10</div>
</div>
<div class="row">
<div class="col-md-6">Google</div>
<div class="col-md-6">Pixel 4</div>
</div>
<div class="row">
<div class="col-md-6">Sony</div>
<div class="col-md-6">Xperia 5</div>
</div>
<div class="row">
<div class="col-md-6">Huawei</div>
<div class="col-md-6">Mate 30 5G</div>
</div>
<div class="row">
<div class="col-md-6">BlackBerry</div>
<div class="col-md-6">KEY2</div>
</div>
<div class="row">
<div class="col-md-6">Apple</div>
<div class="col-md-6">iPhone 8</div>
</div>
</div>
<div class="container" id="demoBoxB">
<div class="row">
<div class="col-md-6">Google</div>
<div class="col-md-6" id="pixel"></div>
</div>
<div class="row">
<div class="col-md-6">Huawei</div>
<div class="col-md-6" id="mate"></div>
</div>
<div class="row">
<div class="col-md-6">BlackBerry</div>
<div class="col-md-6" id="key2"></div>
</div>
</div>

You can chain selectors like this:
var rows = document.querySelectorAll("#demoBoxA > .row");
That will return a list of all rows inside of demoBoxA. If you need more info about chaining selectors, you can read about it here.
Then, to move the rows you can do this:
var demoBoxB = document.getElementById('demoBoxB');
rows.forEach((row) => {
demoBoxB.appendChild(row);
});
If you just want the text inside each of the columns, you can do this:
var columns = document.querySelectorAll("#demoBoxA > .col-md-6");
var texts = [];
columns.forEach((column) => {
texts.push(column.innerText);
});
Now, texts is an array of the text contents of each column.
If you want to select the cellphone models for each brand, you can do this:
var cols = Array.from(document.querySelectorAll("#demoBoxA > .col-md-6"));
var samsungCol = cols.find((col) => {
return col.textContent == "Samsung";
});
var samsungPhones = [];
samsungCol.parentNode.childNodes.forEach((col) => {
if (col != samsungCol) {
samsungPhones.push(col);
}
});
Now, samsungPhones is a list of columns, one for each Samsung phone (for example).

You can use html drag api .
Just add draggable=true for elements you want to drag and add event listeners for dragstart and dragend
html
<div class="container" id="demoBoxA">
<div class="row " draggable="true">
<div class="col-md-6">Samsung</div>
<div class="col-md-6">Galaxy S10</div>
</div>
<div class="row" draggable="true">
<div class="col-md-6">Google</div>
<div class="col-md-6">Pixel 4</div>
</div>
<div class="row" draggabble="true">
<div class="col-md-6">Sony</div>
<div class="col-md-6">Xperia 5</div>
</div>
</div>
<div class="container " id="demoBoxB">
<div class="row " draggable="true">
<div class="col-md-6">Google</div>
<div class="col-md-6" id="pixel"></div>
</div>
<div class="row" draggable="true">
<div class="col-md-6">Huawei</div>
<div class="col-md-6" id="mate"></div>
</div>
<div class="row" draggable="true">
<div class="col-md-6">BlackBerry</div>
<div class="col-md-6" id="key2"></div>
</div>
</div>
js
document.addEventListener('dragstart', function(e)
{
item = e.target;
}, false);
document.addEventListener('dragend', function(e)
{
document.getElementById("demoBoxB").appendChild(item)
}, false);
Note : you might have to add conditions to check whether the drop is actually happening in demoboxB

Slide Up and Fade Div continuously

i want to make something like this https://muzzleapp.com/. I want the moving item in right part should be slide up and fade from bottom to top. Items should be moving continuously, so after the last div, it will start from beginning again. I have tried my own code. But stuck on starting from beginning point. It doesn't start properly from beginning.
html
function moveItems(el) {
var x = 1;
var flag = 0;
var elems = $(el).nextAll();
count = elems.length;
elems.each (function (i) {
setTimeout(function() {
if (x>1) {
y = x-1;
$('#slider_'+y).show().delay(2000).slideUp().fadeOut();
}
$('#slider_'+x).show().delay(2000).slideUp();
x++;
if (!--count) {
setTimeout(function() {
moveItems('.panel');
}, 6000)
}
}, i*2000);
})
}
moveItems('.panel');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id='slider_1'>
<div class="panel-body">
<div class="row">
slider 1
</div>
</div>
</div>
<div class="panel" id='slider_2'>
<div class="panel-body">
<div class="row">
slider 2
</div>
</div>
</div>
<div class="panel" id='slider_3'>
<div class="panel-body">
<div class="row">
slider 3
</div>
</div>
</div>

I updated your logic a little to handle the hide and show. Here is the updated preview https://jsfiddle.net/Aravi/hd465gpc/13/
function moveItems(el) {
var elems = document.querySelectorAll(el);
Array.from(elems).forEach((item,index) => {
setTimeout(function() {
index+=1;
$('#slider_'+index).show().delay(2000).slideUp().fadeOut();
if (index == elems.length) {
setTimeout(function() {
for(j=1;j<= elems.length;j++){ $('#slider_'+j).show()}
moveItems('.panel');
}, 6000)
}
}, index*2000);
})
}
moveItems('.panel');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id='slider_1'>
<div class="panel-body">
<div class="row">
slider 1
</div>
</div>
</div>
<div class="panel" id='slider_2'>
<div class="panel-body">
<div class="row">
slider 2
</div>
</div>
</div>
<div class="panel" id='slider_3'>
<div class="panel-body">
<div class="row">
slider 3
</div>
</div>
</div>
<div class="panel" id='slider_4'>
<div class="panel-body">
<div class="row">
slider 4
</div>
</div>
</div>
<div class="panel" id='slider_5'>
<div class="panel-body">
<div class="row">
slider 5
</div>
</div>
</div>

How to synchronize a div container displaying other elements when active

I have a div containing 3 options that can be active, and when one of them is selected(becomes active) the connector/lines associated with that element should trigger and initiate the animation. So far I have it displayed but can't figure out how to fire the animation every time the first option becomes active, and disable it when it isn't active.
CodePen
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div class="demo">
<div class="demo__content">
<h2 class="demo__heading">Assessment <small></small></h2>
<div class="demo__elems">
<div class="demo__elem demo__elem-1">Novice Assessment</div>
<div class="demo__elem demo__elem-2">Intermediate Assessment</div>
<div class="demo__elem demo__elem-3">Advanced Assessment</div>
<span class="demo__hover demo__hover-1 active"></span>
<span class="demo__hover demo__hover-2 active"></span>
<span class="demo__hover demo__hover-3 active"></span>
<div class="demo__highlighter">
<div class="demo__elems">
<div class="demo__elem">Novice Assessment</div>
<div class="demo__elem">Intermediate Assessment</div>
<div class="demo__elem">Advanced Assessment</div>
</div>
</div>
<div class="demo__examples">
<div class="demo__examples-nb">
<div class="nb-inner">
<div class="example example-adv">
<div class="example-adv">
<div class="example-adv__top">
<div class="example-adv__top-search"></div>
</div>
<div class="example-adv__mid"></div>
<div class="example-adv__line"></div>
<div class="example-adv__line long"></div>
</div>
</div>
<div class="example example-web">
<div class="example-web__top"></div>
<div class="example-web__left"></div>
<div class="example-web__right">
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
</div>
</div>
<div class="example example-both">
<div class="example-both__half example-both__left">
<div class="example-both__left-top"></div>
<div class="example-both__left-mid"></div>
</div>
<div class="example-both__half example-both__right">
<div class="example-both__right-top"></div>
<div class="example-both__right-mid"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
document.addEventListener('DOMContentLoaded', function() {
$(document).ready(function() {
$('.demo__hover').on('click', function() {
$that = $(this);
if ($('.demo__hover.active').length > 0) {
$('.active').removeClass('active');
}
$($that).addClass('active');
})
})
});

I strongly suggest to refactor my code but I edited your pin, adding a class that block animation by default:
.block-anim {
animation: none !important;
}
and some dirty JS that deal with it
https://codepen.io/ThomasTognacci/pen/POqRJa

checking id to set value

I'm doing a jeopardy board, and I've given each div (each question square) an id in the index.html so when it's clicked, the correct question appears. I also wanted to set the point value for each div based on its id, so I used the jquery .is and this if/else statement. I've only done the code for A1 and A2, but while A2 should be worth $200, it's coming back worth $100. Why?
if ($('.well').is('#A1', '#B1', '#C1', '#D1', '#E1')) {
questionValue = 100;
}
else if ($('.well').is('#A2', '#B2', '#C2', '#D2', '#E2')) {
questionValue = 200;
}
else if ($('.well').is('#A3', '#B3', '#C3', '#D3', '#E3')) {
questionValue = 300;
}
else if ($('.well').is('#A4', '#B4', '#C4', '#D4', '#E4')) {
questionValue = 400;
}
else if ($('.well').is('#A5', '#B5', '#C5', '#D5', '#E5')) {
questionValue = 500;
}
Thank you in advance. Please let me know if I should include any more code. .well is the div class for the question squares.
Adding html code
<div id="wrapper">
<div class="row">
<div class="title"><h2></h2></div>
<div class="question">
<form> Your Answer:
<input type="text" id="answer" /></form>
<button id="submit">Submit</button>
<p id="instruct">When you're sure about your probably wrong answer, click submit</p>
<!-- <div class = "result"> </div> -->
</div>
</div>
<div class="row">
<div class="well" id="A1"> <p>$100</p> </div>
<div class="well" id="B1"> <p>$100</p> </div>
<div class="well" id="C1"> <p>$100</p> </div>
<div class="well" id="D1"> <p>$100</p> </div>
<div class="well" id="E1"> <p>$100</p> </div>
</div>
<div class="row">
<div class="well" id="A2"> <p>$200</p> </div>
<div class="well" id="B2"> <p>$200</p> </div>
<div class="well" id="C2"> <p>$200</p> </div>
<div class="well" id="D2"> <p>$200</p> </div>
<div class="well" id="E2"> <p>$200</p> </div>
</div>
<div class="row">
<div class="well" id="A3"> <p>$300</p> </div>
<div class="well" id="B3"> <p>$300</p> </div>
<div class="well" id="C3"> <p>$300</p> </div>
<div class="well" id="D3"> <p>$300</p> </div>
<div class="well" id="E3"> <p>$300</p> </div>
</div>
<div class="row">
<div class="well" id="A4"> <p>$400</p> </div>
<div class="well" id="B4"> <p>$400</p> </div>
<div class="well" id="C4"> <p>$400</p> </div>
<div class="well" id="D4"> <p>$400</p> </div>
<div class="well" id="E4"> <p>$400</p> </div>
</div>
<div class="row">
<div class="well" id="A5"><p>$500</p> </div>
<div class="well" id="B5"><p>$500</p> </div>
<div class="well" id="C5"><p>$500</p> </div>
<div class="well" id="D5"><p>$500</p> </div>
<div class="well" id="E5"><p>$500</p> </div>
</div>
<h3> score = </h3>
<div class = "score">0</div>
</div>
And this is how I'm doing each question.
$("#A1").click(function() {
$(".question").show();
$('<h4>The \"MVP\" quarterback whose team is 14-6 when he doesn’t play.</h4>').appendTo('.question');
$('#submit').click(function() {
$("#answer").on('input')
var answer = $('#answer').val(); //what does this mean in words?
if
(answer == "Tom Brady" || answer == "Brady" || answer == "brady" || answer == "tom brady") {
$('.question').replaceWith('<h3>omg you\'re so smart</h3>') //using h3 because it'll be unique, but there must be a better way
score += questionValue;
$(".score").text("$" + score);
}
else
{
$('.question').replaceWith('<h3>could NOT have been more wrong</h3>');
score -= questionValue;
$(".score").text("$" + score);
}
});
});

Whatever you have implemented so far may be correct but I guess its very difficult to maintain that code. Also for any new person t will be quite uneasy to understand that logic. Please have a look at below approach. You may refer it and take an idea out of it:
$(document).ready(function() {
$(".well").click(function() {
var quesVal = $(this).data("questionvalue"); //reading the questionvalue associated with each question
alert(quesVal);
});
});
.questionContainer {
width: 250px;
}
.questionContainer .well {
height: 40px;
width: 40px;
border: 1px solid red;
margin-left: 5px;
margin-top: 5px;
float: left;
/*Here you can also use display: inline-block instead of float:left*/
background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="questionContainer">
<!--Putting question value in each and every box along with id and class as a data- attribute -->
<div class="well" id="A1" data-questionvalue="100">A1</div>
<div class="well" id="B1" data-questionvalue="100">B1</div>
<div class="well" id="C1" data-questionvalue="100">C1</div>
<div class="well" id="D1" data-questionvalue="100">D1</div>
<div class="well" id="E1" data-questionvalue="100">E1</div>
<div class="well" id="A2" data-questionvalue="200">A2</div>
<div class="well" id="B2" data-questionvalue="200">B2</div>
<div class="well" id="C2" data-questionvalue="200">C2</div>
<div class="well" id="D2" data-questionvalue="200">D2</div>
<div class="well" id="E2" data-questionvalue="200">E2</div>
</div>

You can try this way
$('.well').click(function(){
if ($(this).is('#A1')||$(this).is('#B1')||$(this).is('#C1')||$(this).is('#D1')||$(this).is('#E1')) {
alert(100);
}
else if ($(this).is('#A2') ||$(this).is('#B2')||$(this).is('#C2')||$(this).is('#D2')||$(this).is('#E2')) {
alert(200);
}
})
it may be length way but works.
Fiddle test

Simplification (this does not address your particular implementation – but simplifies it in a way that could fix your problem)
You could use classes instead of using specific IDs for each cell, and have 5 of each 1 through 5 and A through E:
<div class="row"> <!-- row 1 -->
<div class="r1 a"></div>
<div class="r1 b"></div>
<!-- blah blah -->
<div class="r5 d"></div>
<div class="r5 e"></div>
</div> <!-- row 5 -->
For reference: I use r as a first letter because you can't start a class name with a number.
Then in your JavaScript:
if($('.well').is('.r1')) questionValue = 100;
and so on.
For reference: You can skip the curlybraces {} in an if statement if the contents are one line (such as in this example).

Twitter bootstrap : Expand with span12 on button click

I am using bootstrap for my project.
It is the structure i am following to design layout-
<div class="row-fluid">
<div class="expand-this">
<div class="span8">
<div class="row-fluid">
<div class="span6 pull-left">
<b>Display Name</b>
</div>
<div class="span6 pull-right">
<input type="text"/>
</div>
</div>
</div>
</div>
<div class="hide-accordion">
<div class="span4">
<div class="block">
...some information..
</div>
</div>
</div>
<button class="button-hiding"></button>
Here you can see i am aligning two block in a row. Second span in row-fluid with span4 Is taking dynamic values.
So i am trying to hide it with button.
jQuery-
$('.hide-accordion').hide();
$(function () {
$('.button-hiding').click(function () {
$('.hide-accordion').toggle(this);
});
});
This is what working fine.
I am hiding this accordion on window load.
What i want-
I want span8 to take full width with span12 when accordion is hidden and as soon as i click on button, accordion appears. then it should be taking original span8 width.
I tried this too with jQuery-
$('.hide-accordion').hide();
$(function () {
$('.button-hiding').click(function () {
$('.hide-accordion').toggle(this);
$('.Expand-this>div .span8').removeClass('span8');
$(this).addClass('span12');
});
});
But no luck, help?

Try with this,
HTML:-
<div class="row-fluid">
<div class="span8 expand-this">
<div class="row-fluid">
<div class="span6 pull-left">
<b>Display Name</b>
</div>
<div class="span6 pull-right">
<input type="text"/>
</div>
</div>
</div>
<div class="span4 hide-accordion">
<div class="block">
...some information..
</div>
</div>
<div>
<button class="button-hiding"></button>
And Jquery:-
$(function () {
$('.hide-accordion').hide();
$(".expand-this").removeClass("span8").addClass("span12")
$('.button-hiding').click(function () {
if($(".expand-this").hasClass('span8')){
$(".expand-this").removeClass("span8").addClass("span12")
}else{
$(".expand-this").removeClass("span12").addClass("span8")
}
$('.hide-accordion').toggle();
});
});