We Keep Coding

Can we use event.target to transform (translateX) for every iteration

I want to add $(event.target) to translate my card for every iteration. Is that possible? What should I do?
I tried this way: $(event.target.i).css('transform', 'translate(300px)');
$(document).ready(function() {
var n = $('#move .card').length;
function addDot(i) {
var newDot = (`<span class="dot" data-index="${i}" id ="${i}" </span>`);
$('.myDiv').append(newDot);
$('#' + i).click(function(event) {
$(event.target.i).css('transform', 'translate(300px)');
});
}
for (let i = 0; i < n; i++) {
addDot(i);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card ">
<img src="https://cdn3.iconfinder.com/data/icons/business-avatar-1/512/10_avatar-512.png" alt="Avatar" style="width:100px">
<div class="containers">
<h2>Great Experience !</h2>
<button>Relax Plan</button>
<div class="contain">
<p>I found the servive very prompt. I would also suggest my friends to take this plan. I am going to suggest this to my friends as well</p><br>
<h3>Virat Kohli</h3>
</div>
</div>
</div>

Add an existing div element with classes (along with its underlying elements) to a div

I need to have a function that would add an existing div with a class (along with its underlying elements) to a particular div using for loop. It looks like this:
<div class="left-col">
<div class="list-row">
<div class="list-row2">
<span>Hello</span>
</div>
</div>
</div>
I need to loop through a function that will produce or duplicate "list-row" twice.
$(function() {
var leftcol = document.getElementsByClassName('left-col');
for (var i = 0; i < 2; i++) {
var listrow = document.querySelector('.list-row');
leftcol.appendChild(listrow[i]);
}
})
It should look like this:
<div class="left-col">
<div class="list-row">
<div class="list-row2">
<span>Hello</span>
</div>
</div>
<div class="list-row">
<div class="list-row2">
<span>Hello</span>
</div>
</div>
<div class="list-row">
<div class="list-row2">
<span>Hello</span>
</div>
</div>
</div>

You can try the following way:
$(function() {
var leftcol = document.querySelector('.left-col');
for (let i = 0; i < 2; i++) {
var listrow = document.querySelector('.list-row').cloneNode();
listrow.textContent = i + 1 + listrow.textContent;
leftcol.appendChild(listrow);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left-col">
<div class="list-row">0</div>
</div>

You could use cloneNode and set the deep property to true. This will clone the node and all of its descendants.
For example:
function cloneNode(copies = 1) {
for (let i = 0; i < copies; i++) {
let leftcol = document.getElementsByClassName('left-col')[0];
let nodeToClone = document.querySelector(".list-row");
let clonedNode = nodeToClone.cloneNode(true);
leftcol.appendChild(clonedNode);
}
}
clone.addEventListener("click", function() {
cloneNode();
});
<button id="clone" type="button">Clone Node</button>
<div class="left-col">
<div class="list-row">Test</div>
</div>
If you wanted to insert more than one copy, you could pass a different value to the cloneNode function.

You can use jQuery's .clone() method to copy the entire content of an element to another element. The boolean argument passed to the clone function determines whether the events associated with the cloned element has to be copied or not. true indicates all the events associated with that div has to be copied.
$(function() {
$('.list-row').each(function(){
$(".left-col").append($(this).clone(true));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="left-col">
<div class="list-row"><h1>This is original row</h1></div>
</div>

$(function() {
var leftcol = document.getElementsByClassName('left-col');
var listrow = document.querySelector('.list-row');
for (var i = 0; i < 2; i++) {
leftcol.appendChild(listrow.clone(true));
}
})

Make "continue" button appear when items selected and disappear when items unselected

My question is abou make "continue" button appear when items selected and disappear when items unselected using JavaScript.
var typpro = document.getElementsByClassName("typpro"),
continubutton = document.getElementsByClassName("continue");
var w;
for (w = 0; w < typpro.length; w++) {
typpro[w].onclick = function () {
'use strict';
this.classList.toggle("active");
if (this.classList.contains("active")) {
continubutton[0].style.height = "100px";
} else {
continubutton[0].style.height = "0px";
}
};
}
<div class=" col-md-3 col-sm-4 col-xs-6">
<div class="typpro">
<button>Volume Button</button>
</div>
</div>
<div class=" col-xs-12">
<div class="typpro">
<button style="width:98%">Other</button>
</div>
</div>
<div class=" col-xs-12">
<div class="inputpro">
<input type="text" placeholder="your Problem">
</div>
</div>
<div class=" col-xs-12">
<div class="continue">
<button>Continue</button>
</div>
</div>
</div>
</div>

So, you've got a couple of things working against you with your code as it stands.
Firstly, you need to actually define your continubutton variable, like so:
HTML
<button id="continubutton" style="display: none;">Continue</button>
JS:
var continubutton = document.getElementById('continubutton');
Then, you also need to define your typpro variable, like so:
JS:
var typpro = document.getElementsByClassName('typpro');
For what you're trying to do, I went with display: inline and display: none, instead of the height change because there would be a fair amount of additional CSS you would need to do to accomplish this. But here is the final result:
HTML:
<div class=" col-md-3 col-sm-4 col-xs-6">
<div class="typpro">
<button>Screnen</button>
</div>
</div>
<div class=" col-md-3 col-sm-4 col-xs-6">
<div class="typpro">
<button>Battery</button>
</div>
</div>
<button id="continubutton" style="display: none;">Continue</button>
</div>
And the JS:
var w;
var typpro = document.getElementsByClassName('typpro');
var continubutton = document.getElementById('continubutton');
for (w = 0; w < typpro.length; w++){
typpro[w].onclick = function () {
'use strict';
this.classList.toggle("active");
if(this.classList.contains("active")){
continubutton[0].style.display = "inline";
} else {
continubutton[0].style.display = "none";
}
};
}
EDIT: Since using height seems to be the route we need to go, here is updated code:
var w;
var typpro = document.getElementsByClassName('typpro');
var continubutton = document.getElementsByClassName('continue');
for (w = 0; w < typpro.length; w++){
typpro[w].onclick = function () {
'use strict';
this.classList.toggle("active");
if(this.classList.contains("active")){
continubutton[0].style.height = "100px";
} else {
continubutton[0].style.height = "0px";
}
};
}
<div class=" col-md-3 col-sm-4 col-xs-6">
<div class="typpro">
<button>Screnen</button>
</div>
</div>
<div class=" col-md-3 col-sm-4 col-xs-6">
<div class="typpro">
<button>Battery</button>
</div>
</div>
<div class="continue" style="height: 0;overflow:hidden;">
<button id="continubutton">Continue</button>
</div>
</div>
It's important that you set the initial height on your <div class="continue"></div> container, and that you set it to overflow: hidden; so anything that falls outside of the bounding box is hidden from view. This will allow you to animate the height so the button appears "hidden" until an option is selected.

the solution is
for (let btn of typpro) {
btn.addEventListener('click', function() {
let token = 0;
this.classList.toggle('active');
for (let i = 0; i < typpro.length; i += 1) {
if (typpro[i].classList.contains('active')) {
token += 1;
}
}
if (token > 0) {
continubutton[0].style.height = '100px';
} else {
continubutton[0].style.height = '0';
}
});
}

Double onclick events not working

I have a tab menu on my website and the code used for it works perfectly. JavaScript:
function openTab(tabName) {
var i;
var x = document.getElementsByClassName("tab");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(tabName).style.display = "flex";
}
HTML:
<div class="col-md-4">
<div onclick="openTab('tab-1')" class="tab-button">
<h5>IT Problems</h5>
</div>
</div>
<div class="col-md-4">
<div onclick="openTab('tab-2')" class="tab-button">
<h5>Save Time</h5>
</div>
</div>
<div class="col-md-4">
<div onclick="openTab('tab-3')" class="tab-button">
<h5>Cost Effective</h5>
</div>
</div>
And then obviously I applied the IDs ("tab-[1/2/3]") and classes ("tab") to the divs I want as tabs. However, when I replicate the exact same code to have a tab button highlighted for the current tab open, it doesn't work. JavaScript:
function selectedTab(selectName) {
var i;
var x = document.getElementsByClassName("select");
for (i = 0; i < x.length; i++) {
x[i].style.border-bottom-color = "#dbdbdb";
}
document.getElementById(selectName).style.border-bottom-color = "#25a7df";
}
HTML:
<div class="col-md-4">
<div onclick="openTab('tab-1'); selectedTab('select-1')" class="tab-button">
<h5 id="select-1" class="select">IT Problems</h5>
</div>
</div>
<div class="col-md-4">
<div onclick="openTab('tab-2'); selectedTab('select-2')" class="tab-button">
<h5 id="select-2" class="select">Save Time</h5>
</div>
</div>
<div class="col-md-4">
<div onclick="openTab('tab-3'); selectedTab('select-3')" class="tab-button">
<h5 id="select-3" class="select">Cost Effective</h5>
</div>
</div>
I've looked literally everywhere online and had multiple people look at this and nobody can find a solution. Can anyone help?

border-bottom-color is not a valid style property, you need to replace hyphen case with camel case
You need to use the borderBottomColor property of style in selectTab method
function selectedTab(selectName) {
var x = document.getElementsByClassName("select");
for (var i = 0; i < x.length; i++) {
x[i].style.borderBottomColor = "#dbdbdb"; //observe style property Change
}
document.getElementById(selectName).style.borderBottomColor = "#25a7df";
}

toggle div while hiding other divs

I have a side nav on the left hand side with different types of surgeries. They are all in an ul.
When you click on a surgery (ul li), a div will show up on the right hand side, displaying FAQ's for that specific surgery. Clicking on another link in the ul will hide the currently open div and display the one you've just clicked on.
I've managed to do this, but I would also like to toggle the visibility of the FAQ div when I click the same ul li link again.
<html>
<head>
<style>
#popup div { display:none; }
#popup div.show { display:block; }
ul#links li { cursor:pointer;}
</style>
</head>
<body>
<div class="sidenav">
<ul id="links">
<li id="armlift">Arm Lift</li>
<li id="liposuction">Liposuction</li>
<li id="tummytuck">Tummy Tuck</li>
<li id="postgastric">Post-Gastric Bypass Surgery</li>
</ul>
</div>
<div id="popup">
<div id="a_armlift">
<span class="faq_header">Arm Lift</span>
<p class="treatment_question">What is a an Arm Lift?</p>
<div class="treatment_answer">This surgery removes excess...</div>
<p class="treatment_question">What should I know?</p>
<div class="treatment_answer">An incision is made...</div>
</div>
<div id="a_liposuction">
<span class="faq_header">Liposuction Lift</span>
<p class="treatment_question">What is a Liposuction?</p>
<div class="treatment_answer">Liposuction is the removal...</div>
<p class="treatment_question">What should I know?</p>
<div class="treatment_answer">Ideal candidates for...</div>
</div>
<div id="a_tummytuck">
<span class="faq_header">Tummy Tuck</span>
<p class="treatment_question">What is a Tummy Tuck?</p>
<div class="treatment_answer">A tummy tuck tightens...</div>
<p class="treatment_question">What is a Mini Tummy Tuck?</p>
<div class="treatment_answer">A mini-tuck is a...</div>
</div>
<div id="a_postgastric">
<span class="faq_header">Post-Gastric Bypass Surgery</span>
<p class="treatment_question">What is a Post-Gastric Bypass Surgery?</p>
<div class="treatment_answer">Gastric bypass surgery removes...</div>
<p class="treatment_question">What should I know?</p>
<div class="treatment_answer">Each patient has...</div>
</div>
</div>
<script type="text/javascript">
var links_ul = document.getElementById('links');
for (var i = 0; i < links_ul.children.length; i++) {
links_ul.children[i].onclick = function(ev) {
s = document.getElementById('a_' + this.id);
popup = document.getElementsByClassName('show');
for (var j = 0; j < popup.length; j++) {
popup[j].className = '';
}
s.className = 'show';
};
}
</script>
</body>
</html>

I would recommend looking into doing this differently. There are many plugins available that do this sort of thing.
But, here's the answer to your question: http://jsfiddle.net/6Vku8/1/
for (var i = 0; i < links_ul.children.length; i++) {
links_ul.children[i].onclick = function(ev) {
s = document.getElementById('a_' + this.id);
popup = document.getElementsByClassName('show');
var shown = s.className == 'show';
for (var j = 0; j < popup.length; j++) {
popup[j].className = '';
}
s.className = shown ? '' : 'show';
};
}​
You need to find out whether or not the div is "shown" before hiding all of the divs.