We Keep Coding

How to separete div blocks with the same class but diffent features

Good day!
I have a pop-up section. There are 2 div blocks in it with identical structure. The idea is to have 2 buttons (one is to edit a profile the other is to create a new card with some info) that will call this pop-up, but i need to track which one is called. The popup itself has a darker background compare to main page and a form. I have thought of a modifier popup__container_type_(edit/create) that has a display: none command so when i toggle it it the popup would appear with the right form. Most likely my logic was mistaken. I dont know how to distiguish them (div blocks) correctly.
Another problem is that closebutton seems to work for one form only.
Any help would be great!
HTML:
<section class="popup">
<div class="popup__container popup__container_type_edit">
<button type="button" class="popup__cancelbutton"></button>
<form class="popup-form" name="form">
<h2 class="popup-form__title">Header 1</h2>
<input type="text" class="popup-form__input popup-form__input_type_name" name="name">
<input type="text" class="popup-form__input popup-form__input_type_job" name="job">
<button type="submit" class="popup-form__savebutton">Save</button>
</form>
</div>
<div class="popup__container popup__container_type_create">
<button type="button" class="popup__cancelbutton"></button>
<form class="popup-form" name="form">
<h2 class="popup-form__title">Header 2</h2>
<input type="text" class="popup-form__input popup-form__input_type_place" placeholder="Name of the place" name="place">
<input type="text" class="popup-form__input popup-form__input_type_imagelink" placeholder="Image link" name="imagelink">
<button type="submit" class="popup-form__savebutton">Create</button>
</form>
</div>
</section>
JS:
let popUpSection = document.querySelector(`.popup`);
let cancelButton = popUpSection.querySelector(`.popup__cancelbutton`);
let popUpContainer = popUpSection.querySelector(`.popup__container`);
let formElement = popUpSection.querySelector(`.popup-form`);
let newInputName = popUpSection.querySelector(`.popup-form__input_type_name`);
let newInputJob = popUpSection.querySelector(`.popup-form__input_type_job`);
let inputName = document.querySelector(`.profile-info__title`);
let inputJob = document.querySelector(`.profile-info__text`);
let editButton = document.querySelector(`.profile-info__editbutton`);
let createButton = document.querySelector(`.profile__addbutton`);
//Open / close popup section
let formTogglePopUp = () => {
if (!popUpSection.classList.contains(`popup_acitve`)){
//Autofill
newInputName.value = inputName.textContent;
newInputJob.value = inputJob.textContent;
}
popUpSection.classList.toggle(`popup_active`);
}
//Save input changes
function popUpFormSaved (event) {
event.preventDefault();
inputName.textContent = newInputName.value;
inputJob.textContent = newInputJob.value;
formTogglePopUp();
}
formElement.addEventListener('submit', popUpFormSaved);
cancelButton.addEventListener('click', formTogglePopUp);
editButton.addEventListener('click', formTogglePopUp);
createButton.addEventListener(`click`, formTogglePopUp);
CSS:
.popup__container
{
display: block; *by default*
}
.popup__container_type_(edit/create)
{
display: none;
}
.popup
{
display:none;
}
.popup__active
{
display: flex;
}

You can do it with js, set ids and use them instead of class, it's more easy.
function popUpEdit() {
document.getElementById("popUp").style.display = "block";
document.getElementById("popUpEdit").style.display = "block";
}
function popUpCreate() {
document.getElementById("popUp").style.display = "block";
document.getElementById("popUpCreate").style.display = "block";
}
#popUp, #popUpEdit, #popUpCreate {
display: none;
}
<div class="smt">
Hello
<button onclick="popUpEdit()">Edit</button>
</div>
<div class="smt">Hello
<button onclick="popUpCreate()">Create</button>
</div>
<section id="popUp">
<div>popUp</div>
<div id="popUpEdit">Edit-popup</div>
<div id="popUpCreate">Create-popup</div>
</section>

Generaly, I do that this way:
const SectionPopUp = document.querySelector('section.popup')
function show(elm)
{
SectionPopUp.classList.toggle('Create','Create'===elm)
SectionPopUp.classList.toggle('Edit','Edit'===elm)
}
section.popup,
section.popup.Edit > div:not(.popup__container_type_edit),
section.popup.Create > div:not(.popup__container_type_create) {
display:none;
}
section.popup.Edit,
section.popup.Create {
display:block;
}
/* cosmetic part, just for testing here */
section.popup > div {
border : 1px solid aqua;
padding : .6em;
margin : 1em;
width : 15em;
}
div.popup__container_type_create {
border-color: orange !important;
}
<button onclick="show('Edit')"> show Edit </button>
<button onclick="show('Create')"> show Create </button>
<button onclick="show('')"> show none </button>
<section class="popup">
<div class="popup__container popup__container_type_edit">
pop-up edit content
</div>
<div class="popup__container popup__container_type_create">
pop-up create content
</div>
</section>

how to distinguish between buttons with same className

Good day! I'm very new to Front-End development, and as a part of my homework I have got to use pure HTML, CSS and JavaScript only to make next thing:
6 button (likes) with same class name. I have different background images for one that wasn't clicked and one that was. In Demo I have background-color instead, does not matter I guess.
let pageCont = document.querySelector(`.page`);
let mainCont = pageCont.querySelector(`.container`);
let tableCont = mainCont.querySelector(`.table`);
let tableElem = tableCont.querySelector(`.table__element`);
let elemCont = tableElem.querySelector(`.table__text-container`);
var likeIcon = elemCont.querySelectorAll(`.table__like-icon`);
for (var i = 0; i < likeIcon.length; i++) {
likeIcon[i].addEventListener('onclick', function likeIconIsClicked()
{
likeIcon.classList.toggle(`table__like-icon_active`);
}
);
}
The idea was to change button(table__like-icon --> table__like-icon_acitve) properties. If I use var likeIcon = elemCont.querySelector(`.table__like-icon`) instead of querySelectorAll, I will be able to change only first found button which is not correct. So I used code that I had found on StackOverflow and tried to use it. Didn't work much. Here is the Demo http://jsfiddle.net/gasparilla/9cL7ua4r/11/
Can someone help me out?

The This keyword, specifies the caller of a function, in this case the button the user clicked on. From there on, you can change the properties of the element using the This keyword.
Here's a quick reference: https://www.w3schools.com/js/js_this.asp
var likeIcon = document.querySelectorAll(`.table__like-icon`);
for (var icon of likeIcon) {
icon.addEventListener('click', likeIconIsClicked);
}
function likeIconIsClicked() {
this.classList.toggle(`table__like-icon_active`);
}
.table__like-icon_active {
background-color: blue!important;
}
.table__like-icon {
background: red;
height: 50px;
width: 50px;
//your custom class including background-image: ,...
}
<button class="table__like-icon" type="button"></button>
<button class="table__like-icon" type="button"></button>
<button class="table__like-icon" type="button"></button>

Alternatively, you could use forEach that could remember the icon reference in every loop.
var likeIcons = document.querySelectorAll(`.table__like-icon`);
likeIcons.forEach(icon => { // change from `for` to `forEach`
icon.addEventListener('click', function() { // change from 'onclick' to 'click'
icon.classList.toggle(`table__like-icon_active`);
});
})
.table__like-icon{
width: 21px;
height: 18px;
margin: auto 22px auto auto;
background-repeat: no-repeat;
background-size: contain;
box-sizing: border-box;
background-color: red;
border: 0 none;
outline: 0;
padding: 0;
}
.table__like-icon:hover{
opacity: 0.5;
cursor: pointer;
}
.table__like-icon_active{
opacity: 1;
background-color: black;
}
<section class="table">
<div class="table__element">
<img
src="./images/kirill-pershin-1088404-unsplash.png"
alt=""
class="table__image"
/>
<div class="table__text-container">
<h2 class="table__title">FirstButton</h2>
<button class="table__like-icon" type="button"></button>
</div>
</div>
<div class="table__element">
<img
src="./images/kirill-pershin-1404681-unsplash.png"
alt=""
class="table__image"
/>
<div class="table__text-container">
<h2 class="table__title">SecondButton</h2>
<button class="table__like-icon" type="button"></button>
</div>
</div>
<div class="table__element">
<img
src="./images/kirill-pershin-1556355-unsplash.png"
alt=""
class="table__image"
/>
<div class="table__text-container">
<h2 class="table__title">ThirdButton</h2>
<button class="table__like-icon" type="button"></button>
</div>
</div>
<div class="table__element">
<img
src="./images/kirill-pershin-1404681-unsplash.png"
alt=""
class="table__image"
/>
<div class="table__text-container">
<h2 class="table__title">forthButton</h2>
<button class="table__like-icon" type="button"></button>
</div>
</div>
<div class="table__element">
<img
src="images/kirill-pershin-1556355-unsplash.png"
alt=""
class="table__image"
/>
<div class="table__text-container">
<h2 class="table__title">fifthButton</h2>
<button class="table__like-icon" type="button"></button>
</div>
</div>
<div class="table__element">
<img
src="./images/kirill-pershin-1088404-unsplash.png"
alt=""
class="table__image"
/>
<div class="table__text-container">
<h2 class="table__title">sixthtButton</h2>
<button class="table__like-icon" type="button"></button>
</div>
</div>
</section>

I guess you looking for a way to detect which button click and perform operations on that button
here you go
document.addEventListener('click', (event) => {
if (!event.target.matches('.table__like-icon')) return;
// do what ever you want to do
// event is your desire clickable button event.
event.target.style.backgroundColor = "black";
e.preventDefault();
})

Creating a function for a button that can be used for a certain class using JavaScript

Ultimately, my objective here is to create a JS script where I can use for my quizzes. In a page, I may put more than one item. In this regard, I will have more than one button, one button per item. What you see here is a prototype. (I wanted to see how each element interacts with one another.) In the process of trying to get it work, I looked over what others have done. However, I came to a point where I am stuck and could not see what I am doing wrong. I have a sense of where the problem is but I am not certain of it. Anyway, please see where my mistakes are and let me know.
This is the html part. What I want to happen here is I click the top button and the background of the text, "Hello" at top turns red. I press the middle and the text background turn red, and so on. Currently, I press any button and they all turn red.
<div class="q">
<div class="p">
<p>Hello</p>
</div>
<button>Show Answer</button>
</div>
<div class="q">
<div class="p">
<p>Hello</p>
</div>
<button>Show Answer</button>
</div>
<div class="q">
<div class="p">
<p>Hello</p>
</div>
<button>Show Answer</button>
</div>
The link to the js script is located in the head section.
<script src="../js/s3.js"></script>
Here is the js. I suspect my mistake is in the second half. The reason for this is that I made the var in the second for the same as in the first one and still got the same result. It made me wonder whether if the computer is ignoring this part. I could be wrong. I tried querySelectorAll and the result is the same as well. By the way, when is it advantageous to use querySelectorAll and getElementsByClassName if class is involved?
window.onload = function () {
let c = document.getElementsByClassName('q');
for (var ii = 0; ii < c.length; ii++) {
c[ii].addEventListener('click', function () {
let a = document.getElementsByClassName('p');
for (var i = 0; i < a.length; i++) {
a[i].classList.add('cellRed');
}
});
}
}
Here is the CSS.
.cellGreen {
background-color: green;
color: white;
}
.cellRed {
background-color: red;
color: white;
}
I was told to keep things separate. So I did.

First thing you should do when tackling a problem is to think about what you're trying to accomplish. It really does help to list it in steps.
In every Question div
Get the Button
Get the Paragraph
When the Button is clicked
Turn the Paragraph Red
This allows us to build our code rather simply from step 1 onward. This isn't always perfect, but it is always helpful.
Get All Questions
let questions = document.querySelectorAll(".q");
For Each Question
questions.forEach(question => {
// ... do something
});
Get the Button
questions.forEach(question => {
let btn = question.querySelector("button");
});
Get the Paragraph
questions.forEach(question => {
let btn = question.querySelector("button");
let p = question.querySelector("p");
});
When the Button is Clicked
questions.forEach(question => {
let btn = question.querySelector("button");
let p = question.querySelector("p");
btn.addEventListener("click", function() {
// ... do something
});
});
Turn the Paragraph Red
questions.forEach(question => {
let btn = question.querySelector("button");
let p = question.querySelector("p");
btn.addEventListener("click", function() {
p.classList.add("cellRed");
});
});
Final Example:
window.onload = function() {
let questions = document.querySelectorAll(".q");
questions.forEach(question => {
let btn = question.querySelector("button");
let p = question.querySelector("p");
btn.addEventListener("click", function() {
p.classList.add('cellRed');
});
})
}
.cellGreen {
background-color: green;
color: white;
}
.cellRed {
background-color: red;
color: white;
}
<div class="q">
<div class="p">
<p>Hello</p>
</div>
<button>Show Answer</button>
</div>
<div class="q">
<div class="p">
<p>Hello</p>
</div>
<button>Show Answer</button>
</div>
<div class="q">
<div class="p">
<p>Hello</p>
</div>
<button>Show Answer</button>
</div>

That second loop is unnecessary. Just use let instead of var in first loop.
According to MDN:
let allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used. This is unlike the var keyword, which defines a variable globally, or locally to an entire function regardless of block scope.
Look at example below:
window.onload = function () {
let c = document.getElementsByClassName('q');
for (let i = 0; i < c.length; i++) {
c[i].addEventListener('click', function () {
let a = document.getElementsByClassName('p');
a[i].classList.add('cellRed');
});
}
}
.cellGreen {
background-color: green;
color: white;
}
.cellRed {
background-color: red;
color: white;
}
<div class="q">
<div class="p">
<p>Hello</p>
</div>
<button>Show Answer</button>
</div>
<div class="q">
<div class="p">
<p>Hello</p>
</div>
<button>Show Answer</button>
</div>
<div class="q">
<div class="p" >
<p>Hello</p>
</div>
<button>Show Answer</button>
</div>`

I know you want help with your javascript code, but others have already helped you, so I mostly wanted to show that this can be solved with pure CSS only without javascript. :) I'm basically using radio-buttons and sibling selector.
div.p > p {
margin-bottom: 0;
}
div.p > input {
display: none;
}
div.p > label {
cursor: pointer;
font-size: 90%;
margin-right: 1rem;
}
div.p > input:checked ~ p {
color: white;
background-color: red;
}
div.p > input:checked[value="correct"] ~ p {
background-color: green;
}
<div class="q">
<div class="p">
<input type="radio" name="q1" id="q1_alt1" value="correct" />
<input type="radio" name="q1" id="q1_alt2" />
<p>Hello</p>
<label for="q1_alt1">Answer 1</label>
<label for="q1_alt2">Answer 2</label>
</div>
</div>
<div class="q">
<div class="p">
<input type="radio" name="q2" id="q2_alt1" />
<input type="radio" name="q2" id="q2_alt2" value="correct" />
<p>Hello</p>
<label for="q2_alt1">Answer 1</label>
<label for="q2_alt2">Answer 2</label>
</div>
</div>
<div class="q">
<div class="p">
<input type="radio" name="q3" id="q3_alt1" />
<input type="radio" name="q3" id="q3_alt2" />
<input type="radio" name="q3" id="q3_alt3" value="correct" />
<p>Hello</p>
<label for="q3_alt1">Answer 1</label>
<label for="q3_alt2">Answer 2</label>
<label for="q3_alt3">Answer 3</label>
</div>
</div>

Add or Remove class on click - Javascript

I am trying to add a class when you click on a box then remove the class when you click the button. But no class os added or removed.
var leftBox = document.getElementsByClassName("left");
var rightBox = document.getElementsByClassName("right");
function expandLeft() {
leftBox.className = leftBox.className + "zero-width";
rightBox.className = rightBox.className + "full-width";
}
function expandRight() {
leftBox.className = leftBox.className + "full-width";
rightBox.className = rightBox.className + "zero-width";
}
function originalLeft(){
leftBox.removeClass(leftBox, "zero-width");
rightBox.removeClass(rightBox, "full-width");
}
function originalRight(){
leftBox.removeClass(rightBox, "full-width");
rightBox.removeClass(leftBox, "zero-width");
}
<div class="row">
<div class="wrapper flex full-width">
<div class="form_wrapper flex full-width">
<div class="left">
<div class="form_wrapper--left" onclick="expandRight()">
<div><button id="shrink" onclick="originalLeft()">click here</button> .
</div>
</div>
</div>
<!-- END OR RIGHT BOX --
<!-- START OR RIGHT BOX -->
<div class="right">
<div class="form_wrapper--right" onclick="expandLeft()">
<div>
<button id="shrink" onclick="originalLeft()">click here</button>
</div>
</div>
</div>
<!--- END of Right Box --->
</div>
</div>
</div>
The effect should be that when you click one box it expands left and you can click a button and it returns. Vice versa for the other side.

You can use .toggleClass() in jQuery.
maybe this link helps:
https://api.jquery.com/toggleclass/

try this:
document.getElementById("test").addEventListener("click", enlarge);
document.getElementById("btn").addEventListener("click", resume);
function enlarge() {
document.getElementById("test").classList.add("enlarge");
}
function resume() {
document.getElementById("test").classList.remove("enlarge");
}
#test {
width: 100px;
height: 100px;
background-color: green;
margin-bottom: 20px;
}
.enlarge {
transform: scaleX(2);
}
<div id="test"></div>
<button id="btn">
Resume
</button>

jQuery ready function for multiple drawings

I am trying to use jQuery ready function for multiple ids so that they show and hide individually without writing the same type again and again. When I try to use it on the same line it opens all the drawings all together. The code looks something like this-
<script type="text/javascript">
$(document).ready(function(){
$('#p1','#p2', '#p3','#p4').hide();
$('#p1-show','#p2-show','#p3-show','#p4-show').click(function(){
$('#p1','#p2','#p3','#p4').show();
});
$('#p1-hide','#p2-hide','#p3-hide','#p4-hide').click(function(){
$('#p1','#p2','#p3','#p4').hide();
});
});
</script>

Your function hides all of them. If you want to hide the drawing based on which show/hide button is clicked, you can use $(this) to find the corresponding drawing.
The exact code will depend on how your elements are structured, but the idea is to use $(this) to target the element that was clicked, and from there find the element you want to hide.
Here's an example:
$(document).ready(function(){
$('#p1, #p2, #p3, #p4').hide();
$('#p1-show, #p2-show, #p3-show, #p4-show').click(function(){
$(this).parent().find('p').show();
});
$('#p1-hide, #p2-hide, #p3-hide, #p4-hide').click(function(){
$(this).parent().find('p').hide();
});
});
div {
margin: 10px;
padding: 10px;
background-color: #eee;
border-radius: 10px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p id="p1">First Drawing</p>
<button id="p1-show">Show</button>
<button id="p1-hide">Hide</button>
</div>
<div>
<p id="p2">Second Drawing</p>
<button id="p2-show">Show</button>
<button id="p2-hide">Hide</button>
</div>
<div>
<p id="p3">Third Drawing</p>
<button id="p3-show">Show</button>
<button id="p3-hide">Hide</button>
</div>
<div>
<p id="p4">Fourth Drawing</p>
<button id="p4-show">Show</button>
<button id="p4-hide">Hide</button>
</div>

The previous answers will work, but in case there are many such drawings then giving an #id to all those becomes badly repetitive and should be avoided. Following is a code snippet to make it more robust without much hard coded #ids.
$(function(){
$('.toggle-btn').on('click', function(){
var root = $(this).closest(".picture-container");
var img = $(root).find("img");
$(img).toggle();
});
});
body > div {
margin: 10px;
padding: 10px;
background-color: #eee;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="picture-container">
<button class="toggle-btn">Show/Hide</button>
<div>
<img src="http://24.media.tumblr.com/tumblr_lggvvf2mCm1qgnva2o1_500.gif">
</div>
</div>
<div class="picture-container">
<button class="toggle-btn">Show/Hide</button>
<div>
<img src="http://24.media.tumblr.com/tumblr_lggvvf2mCm1qgnva2o1_500.gif">
</div>
</div>
<div class="picture-container">
<button class="toggle-btn">Show/Hide</button>
<div>
<img src="http://24.media.tumblr.com/tumblr_lggvvf2mCm1qgnva2o1_500.gif">
</div>
</div>

You really don't need all of these selectors you have. It's overkill.
You should have your markup all the same for each 'drawing' it makes replication of this 'module' much easier for you also.
$(document).ready(function(){
//this hides all of your <p> on page load
$('p').hide();
//this adds the click event to all the buttons with 'show'
$('.show').on('click', function(){
$(this).parent().find('p').show();
});
$('.hide').on('click', function(){
$(this).parent().find('p').hide();
})
});
div {
margin: 10px;
padding: 10px;
background-color: #eee;
border-radius: 10px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>1st Image</p>
<button class="show">show</button>
<button class="hide">hide</button>
</div>
<div>
<p>2nd Image</p>
<button class="show">show</button>
<button class="hide">hide</button>
</div>
<div>
<p>3rd Image</p>
<button class="show">show</button>
<button class="hide">hide</button>
</div>
<div>
<p>4th Image</p>
<button class="show">show</button>
<button class="hide">hide</button>
</div>
<div>
<p>5th Image</p>
<button class="show">show</button>
<button class="hide">hide</button>
</div>