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

What is the best way to initialize listjs with divs

I am attempting to make a searchable database with list.js but the search function is not working. I am not sure if I initialized it correctly or what I am doing wrong. I am sure it is something obvious but I would love another set of eyes.
Here is my HTML
<body>
<div class="hof-list">
<input class="search" placeholder="Search for a member..."/><br>
<div class="list">
<div class="objects">
<div class="name">Lucille Ball</div>
<div class="year">2018</div>
</div>
<div class="objects">
<div class="name">Jeremy Jacobs</div>
<div class="year">2018</div>
</div>
<div class="objects">
<div class="name">Russell Salvatore</div>
<div class="year">2018</div>
</div>
<div class="objects">
<div class="name">John Albright</div>
<div class="year">2017</div>
</div>
<div class="objects">
<div class="name">Lousie Bethune</div>
<div class="year">2017</div>
</div>
<div class="objects">
<div class="name">Glenn Curtis</div>
<div class="year">2017</div>
</div>
<div class="objects">
<div class="name">John Oishei</div>
<div class="year">2018</div>
</div>
<div class="objects">
<div class="name">Mary Burnett Talbert</div>
<div class="year">2017</div>
</div>
</div>
</div>
</body>
Here is my script
var options = {
valueNames: ['name', 'year']
};
var hoflist = new List('hof-list', options);

According to docs it expects the following parameters: new List(id/element, options, values); where id/element is
id or element *required Id the element in which the list area should be initialized. OR the actual element itself.
So you should pass there an actual id (so you need to change it in your html), or, you can pass there an element with
new List(document.querySelector('.hof-list'), options)

add unique class in randomly position to the div with the same class

I need all divs with the class "nprotagonistas__bg" only one add the class "hover" randomly.
<div class="nprotas">
<div class="container">
<div class="row">
<div class="col-6">
<div class="nprotagonistas">
<div class="nprotagonistas__bg grey">
</div>
<div class="nprotagonistas__content lectores">
</div>
</div>
</div>
<div class="col-6">
<div class="nprotagonistas">
<div class="nprotagonistas__bg white">
</div>
<div class="nprotagonistas__content controladores">
</div>
</div>
</div>
<div class="col-6">
<div class="nprotagonistas">
<div class="nprotagonistas__bg black">
</div>
<div class="nprotagonistas__content videointercomunicacion">
</div>
</div>
</div>
<div class="col-6">
<div class="nprotagonistas">
<div class="nprotagonistas__bg red">
</div>
<div class="nprotagonistas__content aplicacion">
</div>
</div>
</div>
</div>
</div>
That is, only one of the class "nprotagonistas__bg" has to have the class "hover" randomly.

I don't really understood what you really want, but, here's a solution to achieve your task when the page is loaded.
So, when the page is loaded, we fetch all the divs containing the class nprotagonistas__bg and then randomly we'll assign the class hover to only one of the divs. This will be done depending on the number of divs containing the class nprotagonistas__bg and we'll use the built-in random method to get a random number that will be used as the index of the selected div(the random number is the index on the page of the div that's selected to get the hover class, so reloading the page ends in getting another random div).
With all that being said, here's a snippet to illustrate:
In the snippet, the hoverclass adds a red background to the element that has this class.
// waiting till the page is loaded by listening to the 'load' event on the 'window' object.
window.addEventListener('load', function() {
/**
* fetch all the divs with the class 'nprotagonistas__bg'.
* getting the number of these divs on the page(how many div is there).
* using the 'random' method we'll get a random number that is >= 0 and <= the number of the divs.
**/
var divs = document.querySelectorAll('div.nprotagonistas__bg'),
l = divs.length,
r = Math.ceil(Math.random() * l) - 1;
// assign the 'hover' class to a div depending on thethe random number.
divs[r].classList.add('hover');
});
.nprotagonistas__bg {
/* just to make the divs visible on the page */
height: 50px;
border: 2px solid green;
}
.nprotagonistas__bg.hover{
background: red;
}
<div class="nprotas">
<div class="container">
<div class="row">
<div class="col-6">
<div class="nprotagonistas">
<div class="nprotagonistas__bg grey">
</div>
<div class="nprotagonistas__content lectores">
</div>
</div>
</div>
<div class="col-6">
<div class="nprotagonistas">
<div class="nprotagonistas__bg white">
</div>
<div class="nprotagonistas__content controladores">
</div>
</div>
</div>
<div class="col-6">
<div class="nprotagonistas">
<div class="nprotagonistas__bg black">
</div>
<div class="nprotagonistas__content videointercomunicacion">
</div>
</div>
</div>
<div class="col-6">
<div class="nprotagonistas">
<div class="nprotagonistas__bg red">
</div>
<div class="nprotagonistas__content aplicacion">
</div>
</div>
</div>
</div>
</div>
Learn more about the random method.
Learn more about the ceil method.
Learn more about the addEventListener method.
Hope I pushed you further.

document.addEventListener('DOMContentLoaded', function(){
var elements = document.querySelectorAll(".nprotagonistas__bg");
var numberOfElements = elements.length;
var randomIndex = Math.floor(Math.random()*numberOfElements) + 1;
var current = elements[randomIndex];
current.classList.add('hover');
/* console.log('test'); */
});
You can improve it by triggering it when some event happened on your website like a click, a mouse hover, and so on and so though.
and to be sure that the .hover class is only on one element after the event is trigger because that event can be triggered many time
for example a click event on the body, within the event handler you select all the .nprotagonistas_bg and remove the hover
var elements = document.querySelectorAll(".nprotagonistas__bg");
elements.foreEach(function(element){
element.classList.remove('hover')
});
after that you can generate again a randomIndex and add the hover class to the corresponding element

javascript remove parent div where particular class appears in hierarchy below

First time question on this site. Sorry if I have failed the formatting test.
I am almost completely ignorant about javascript but I have been told I need it to solve this problem. I have a page where there are multiple divs with the same class. Each has a multi-level hierarchy beneath it. I want to stop the parent displaying if any of its children contain a div of a particular class. e.g. In the following code I want to stop all divs with class of "classa" displaying if one of their direct or indirect children contains class of "classb draft". So here, none of divb would display.
<div id="diva" class="classa">
<div id="divaa">
</div>
<div id="divab">
<div id="divaba">
<div id="divabaa"
<div id="divabaaa" class="classb">
</div>
</div>
</div>
</div>
</div>
<div id="divb" class="classa">
<div id="divba">
</div>
<div id="divbb">
<div id="divbba">
<div id="divbbaa"
<div id="divbbaaa" class="classb draft">
</div>
</div>
</div>
</div>
</div>

You are not closing div in
<div id="divabaa"
You can use querySelectorAll() to select all the children with that class (draft). Then use forEach() to loop through all the matching elements to find the closest() div with .classa to set display property to none.
var elements = document.querySelectorAll('.classa .draft');
elements.forEach(function(el){
el.closest('.classa').style.display = 'none';
});
<div id="diva" class="classa">
<div id="divaa">
</div>
<div id="divab">
<div id="divaba">
<div id="divabaa">
<div id="divabaaa" class="classb">
Without Draft
</div>
</div>
</div>
</div>
</div>
<div id="divs" class="classa">
<div id="divba">
</div>
<div id="divbb">
<div id="divbba">
<div id="divbbaa">
<div id="divbbaaa" class="classb draft">
Draft
</div>
</div>
</div>
</div>
</div>

Use Kendo UI Flip Effects / Combined Effects for multiple items on the same page

I need to use kendo ui to display between 6-60 items. Each using the flip effect here http://demos.telerik.com/kendo-ui/fx/combined
The products will be loaded from the database with the unique id like this:
<div class="row">
<div class="col-md-4 product-container">
<div id="productID1" class="productID">
<div class="product">
<div id="product-back1" class="product-desc">
<p>BACK</p>
</div>
<div id="product-front1" class="product-image">
<p>FRONT</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 product-container">
<div id="productID2" class="productID">
<div class="product">
<div id="product-back2" class="product-desc">
<p>BACK</p>
</div>
<div id="product-front2" class="product-image">
<p>FRONT</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 product-container">
<div id="productID3" class="productID">
<div class="product">
<div id="product-back3" class="product-desc">
<p>BACK</p>
</div>
<div id="product-front3" class="product-image">
<p>FRONT</p>
</div>
</div>
</div>
</div>
The problem is I need multiple panels on the page how can I make each "front" and "back" click unique.
var el = kendo.fx($('div[id^=productID]')),
flip = el.flip("horizontal", $('div[id^=product-front]'), $('div[id^=product-back]')),
zoom = el.zoomIn().startValue(1).endValue(1);
flip.add(zoom).duration(200);
$('div[id^=product-front]').click(function () {
flip.stop().play();
});
$('div[id^=product-back]').click(function () {
flip.stop().reverse();
});
I've tried loading each item into an array but have not found a good way to assure the correct item will be flipped.

Since every div[id^=product-front] is a child of div[id^=productID], you can find the children of that and use it.
replace flip.stop().play(); with
kendo.fx($(this)).flip("horizontal", $(this).children()[0], $(this).children()[1]).stop().play();