Develop Reference

How can I add elements in JS to certain divs

How do I put the created input into the other div in situation I presented below? If I introduce divs in js like this - '<div class="monday_input"><input type="button" class="remove_button" value="-" onclick="removeMon(this)" /></div>' removing the whole element is not working for some reason in this specific case. Answering the question. No I cannot create div in parent in html because input won't magically suit to created div . Please help me somehow, thank you!
HTML:
<div class="day">
<div class="day_info">
<p>Monday</p>
</div>
<div class="add">
<div class="button" onclick="add_monday()">
<i class="fas fa-plus" id="plus"></i>
</div>
</div>
<div style="clear:both"></div>
</div>
<div id="mon">
<div style="clear:both"></div>
</div>
JavaScript:
Function to adding:
function add_monday() {
if (monday_sub_count < 5) {
monday_sub_count++;
{
const mon = document.createElement('div');
mon.className = 'subcategory';
mon.innerHTML = '<textarea name="monday'+monday_id_count+'" placeholder="Type anything you want here" class="subcategory_text"></textarea><input type="button" class="remove_button" value="-" onclick="removeMon(this)" />';
monday_id_count++;
document.getElementById('mon').appendChild(mon);
}
}
}
Function to removing:
function removeMon(mon) {
document.getElementById('mon').removeChild(mon.parentNode);
monday_sub_count--;
monday_id_count--;
};

with your own HTML
function add_monday() {
var monday_sub_count = 0;
var a;
while (monday_sub_count < 5) {
a = '<div><textarea name="monday'+monday_id_count+'" placeholder="Type anything you want here" class="subcategory_text"></textarea><input type="button" class="remove_button" value="-" onclick="removeMon(this)" /></div>';
monday_sub_count++;
$('#mon').append(a);
}
}

Here is working, "proper" version of your code. I think your problem may come from over-complicating the removal process.
function add_monday()
{
let monday_count = 0;
// Use DocumentFragment for marginal optimizations
let fragment = new DocumentFragment();
while(monday_count < 5)
{
let monday = document.createElement('div');
monday.classList.add('subcategory');
let textarea = document.createElement('textarea');
textarea.classList.add('subcategory_text');
textarea.name = "monday_"+monday_count;
textarea.placeholder = "Type anything you want here";
let removeBtn = document.createElement('input');
removeBtn.type = "button";
removeBtn.classList.add('remove_button');
removeBtn.value = "-";
removeBtn.addEventListener('click', removeMon.bind(null, removeBtn));
monday.append(textarea, removeBtn);
fragment.appendChild(monday);
monday_count++;
}
document.getElementById('mon').appendChild(fragment);
}
function removeMon(button)
{
button.parentElement.remove();
}

I simplified your script a little and changed your name attributes: Instead of assigning individual names I simply gave all textareas the name monday[]. When posting this to a PHP page the values will be pushed into an array with the same name and in case you want to harvest the values with JavaScript, then this can be done easily too.
function add_monday(){
$("#mon").append('<div><textarea name="monday[]" placeholder="Type anything you want here"></textarea><input type="button" value="-"/></div>'.repeat(5))
}
$("#mon").on("click","input[type=button]",function(){$(this).parent(). remove()})
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="day">
<div class="day_info">
<p>Monday</p>
</div>
<div class="add">
<div class="button" onclick="add_monday()">
<i class="fas fa-plus" id="plus">click here to add fields</i>
</div>
</div>
<div style="clear:both"></div>
</div>
<div id="mon">
<div style="clear:both"></div>
</div>
And here a non-jQuery version:
const ad=document.querySelector(".alldays");
ad.innerHTML=
"Mon,Tues,Wednes,Thurs,Fri,Satur,Sun".split(",").map(d=>`
<div class="day">
<div class="day_info"><p>${d}day</p></div>
<div class="add">
<div class="button">
<i class="fas fa-plus" id="plus">click here to add fields</i>
</div>
</div>
<div style="clear:both"></div>
</div>
<div id="${d.toLowerCase().substr(0,3)}">
<div style="clear:both"></div>
</div>`).join("");
function add2day(el,n){
const wd=el.closest(".day"),
d=wd.querySelector("p").textContent.toLowerCase(),
html=`<textarea name="${d.toLowerCase()}[]" placeholder="Type anything you want here"></textarea><input type="button" value="-"/>`;
while (n--) {
let div= document.createElement("div");
div.innerHTML=html;
wd.nextElementSibling.appendChild(div);
}
}
ad.addEventListener("click",function(ev){
const el=ev.target;
switch(el.tagName){
case "INPUT": // remove field
el.parentNode.remove(); break;
case "I": // add new fields
add2day(el,3); break;
}
})
<div class="alldays"></div>
I extended the second script to make it work for any day of the week.

How to get children of a div

User can, by pressing a button, select a particular topic of interest. When that happens, various divs will either become visible or invisible depending on whether that div has a link referring to that topic.
function GetPostsByTopic(topic) {
var area = document.getElementById("postArea");
var topicAreas = area.getElementsByClassName("topicArea");
for (i = 0; i < topicAreas.length; i++) {
var children = topicAreas[i].children;
var topics = [];
for (j = 0; j < children.length; j++) {
topics.push(children[j].getAttribute("asp-route-name"));
document.getElementById("firstTest").innerHTML = children[j].toString();
}
var b = topics.includes(topic);
if (b == true) {
var parentId = document.getElementById(topicAreas[i]).parentNode.id;
document.getElementById(parent).style.display = 'block';
} else {
document.getElementById(parent).style.display = 'none';
}
}
}
<div class="topicBox">
<button class="topicButton" onclick="GetPostsByTopic('Pets')">Pets</button>
<button class="topicButton" onclick="GetPostsByTopic('Vacation')">Vacation</button>
</div>
<div id="postArea">
<div class="post" id="post1">
<div class="topicArea">
<a asp-action="Topic" asp-route-name="Pets">Pets</a>
</div>
</div>
<div class="post" id="post2">
<div class="topicArea">
<a asp-action="Topic" asp-route-name="Vacation">Vacation</a>
</div>
</div>
<div class="post" id="post3">
<div class="topicArea">
<a asp-action="Topic" asp-route-name="Pets">Pets</a>
</div>
</div>
</div>
The trouble, as far as I can tell, begin early in the JS part. I can see that when a do var children=topicAreas[i].children, I get nothing.

I hope this is what you're trying to do. Based on what button you click, respective div is displayed.
function GetPostsByTopic(topic) {
var area = document.getElementById("postArea");
var topicAreas = area.getElementsByClassName("topicArea");
for (i = 0; i < topicAreas.length; i++) {
var children = topicAreas[i].children;
for (j = 0; j < children.length; j++) {
var parentId = topicAreas[i].parentNode.id;
if(children[j].getAttribute("asp-route-name") === topic){
document.getElementById(parentId).style.display = 'block';
}else{
document.getElementById(parentId).style.display = 'none';
}
}
}
}
<div class="topicBox">
<button class="topicButton" onclick="GetPostsByTopic('Pets')">Pets</button>
<button class="topicButton" onclick="GetPostsByTopic('Vacation')">Vacation</button>
</div>
<div id="postArea">
<div class="post" id="post1">
<div class="topicArea">
<a asp-action="Topic" asp-route-name="Pets">Pets</a>
</div>
</div>
<div class="post" id="post2">
<div class="topicArea">
<a asp-action="Topic" asp-route-name="Vacation">Vacation</a>
</div>
</div>
<div class="post" id="post3">
<div class="topicArea">
<a asp-action="Topic" asp-route-name="Pets">Pets</a>
</div>
</div>
</div>

Children isn't the issue. When you run your code you get the error "Uncaught TypeError: Cannot set property 'innerHTML' of null". Looking at your code where you are using .innerHTML, we see that you are trying to reference an element that you don't have in this code:
document.getElementById("firstTest")
Now, after adding that, you still have some items that you should change.
asp-action and asp-route-name are invalid HTML. Are you using a
framework that requires this syntax?
Don't use .getElementsByClassName().
Use .querySelectorAll() and Array.forEach() on the result for
easier looping.
Don't use .innerHTML when you aren't working with HTML strings as there are security and performance implications to doing so.
Avoid inline styles when you can. Using them causes duplication of code and code is harder to scale. Instead, use CSS classes and the .classList API.
It's not super clear exactly what is supposed to happen when clicking your buttons, but see the updated code below:
function GetPostsByTopic(topic) {
var area = document.getElementById("postArea");
// Don't use .getElementsByClassName() as it provides a live node list
// and causes quite a performance hit, especially when used in loops.
// Use .querySelectorAll() and then use .forEach() on the collection that
// it returns to iterate over them.
area.querySelectorAll(".topicArea").forEach(function(area){
var topics = [];
// No need for children, here. Again, use .querySelectorAll()
area.querySelectorAll("*").forEach(function(child) {
topics.push(child.getAttribute("asp-route-name"));
document.getElementById("firstTest").textContent = child.getAttribute("asp-route-name");
});
if (topics.indexOf(topic) > -1) {
// Don't use inline styles if you can avoid it.
// Instead use pre-made classes.
area.classList.add("hidden");
}
else {
area.classList.remove("hidden");
}
});
}
/* Use CSS classes when possible instead of inline styles */
.hidden { display:none; }
<div class="topicBox">
<button class="topicButton" onclick="GetPostsByTopic('Pets')">Pets</button>
<button class="topicButton" onclick="GetPostsByTopic('Vacation')">Vacation</button>
</div>
<div id="postArea">
<div class="post" id="post1">
<div class="topicArea">
<a asp-action="Topic" asp-route-name="Pets">Pets</a>
</div>
</div>
<div class="post" id="post2">
<div class="topicArea">
<a asp-action="Topic" asp-route-name="Vacation">Vacation</a>
</div>
</div>
<div class="post" id="post3">
<div class="topicArea">
<a asp-action="Topic" asp-route-name="Pets">Pets</a>
</div>
</div>
</div>
<div id="firstTest"></div>

Why do I get undefined when I change from querySelector to querySelectorAll? [duplicate]

This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 3 years ago.
When I change from querySelector to querySelectorAll I get undefined. I know that the spelling for the class name is correct. So, I posted the rest of the code assuming that there is something else that I must be missing.
//TAKES INPUT FORM AND PLACES TEXT ON CARD
var input1 = document.querySelector('.form1');
var input2 = document.querySelectorAll('.form2');
var textOnCard = document.getElementById('btn');
btn.addEventListener('click', function() {
document.getElementById('flashcard__front').innerHTML = input1.value
document.getElementById('flashcard__back').innerHTML = input2.value
});
//FUNCTION THAT ALLOWS CARD TO ROTATE
var flashcard = document.querySelector('.flashcard');
flashcard.addEventListener('click', function() {
flashcard.classList.toggle('flip');
});
//CREATES A NEW INPUT FIELD
var inputHtml = '<div class="container mt-5"><div class="row"><div class="col-lg-12 text-center"><form id="form" action=""><div><input type="text" class="form1">'+ ' ' + '<input type="text" class="form2">' + ' ' + '</div></form></div></div>'
var addInputField = document.getElementById('addInputField');
addInputField.addEventListener('click', function() {
textOnCard.insertAdjacentHTML("afterend", inputHtml)
});
//make array apppear on screen
var flashcardFront = [];
var flashcardBack = [];
var number = 0;
var rightArrow = document.getElementById('rightArrow');
var leftArrow = document.getElementById('leftArrow');
textOnCard.addEventListener('click', function(){
flashcardFront.push(input1.value);
flashcardBack.push(input2.value);
flashcard__front.innerHTML = flashcardFront[0];
flashcard__back.innerHTML = flashcardBack[0];
console.log(Array.from(input1));
})
rightArrow.addEventListener('click', function(){
if (number < flashcardFront.length - 1 && number < flashcardBack.length - 1){
number++;
} else {
number = 0
}
console.log(number);
document.getElementById('flashcard__front').innerHTML = flashcardFront[number];
document.getElementById('flashcard__back').innerHTML = flashcardBack[number];
});
leftArrow.addEventListener('click', function(){
if (number > flashcardFront.length && number > flashcardBack.length){
number--;
} else {
number = 0
}
console.log(number);
document.getElementById('flashcard__front').innerHTML = flashcardFront[number];
document.getElementById('flashcard__back').innerHTML = flashcardBack[number];
});
<div class="container mt-5">
<div class="row">
<div class="col-lg-12 text-center">
<input type="text" class="form1">
<input type="text" class="form2">
<button class="btn btn-primary text-center" id="btn">SUBMIT</button>
</div>
</div>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-lg-12 text-center">
<input type="text" class="form1">
<input type="text" class="form2">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<button class="btn btn-primary" id="addInputField">ADD A NEW INPUT</button>
</div>
</div>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-lg-12">
<div class="flashcard">
<div class="flashcard__side flashcard__side--front">
<h1 id="flashcard__front" class="text-center m-3"></h1>
</div>
<div class="flashcard__side flashcard__side--back">
<h1 id="flashcard__back" class="text-center m-3"></h1>
</div>
</div>
</div>
</div>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-lg-12">
<h3 id="testField" class="pl-5"></h3>
</div>
</div>
<div class="row">
<div class="col-md-6">
<i class="fas fa-arrow-left" id="leftArrow"></i>
</div>
<div class="col-md-6">
<i class="fas fa-arrow-right" id="rightArrow"></i>
</div>
</div>
</div>
For context, I am trying to recreate the flashcard feature from quizlet.com for practice.

Because .querySelectorAll() returns a node-list (an array-like container object), not an individual node. So, this line:
var input2 = document.querySelectorAll('.form2');
Creates a collection of all the elements with a class of form2.
Later, when you do this:
document.getElementById('flashcard__back').innerHTML = input2.value
You are saying that you want to get the value of the collection, but the collection doesn't have a value property, individual nodes do, so the flashcard__back element gets .innerHTML of undefined.
You'll have to identify which node within the list you want by passing an index to the node-list and then you can work with properties/methods of nodes.

jquery - attach/detach multiple divs onclick

I am trying to replace the content of the divs on checkbox's check/un-check events.
HTML:
<div class="checks">
<input type="checkbox" class="section-1" value="section-1">check-1
<input type="checkbox" class="section-2" value="section-2">check-2
<input type="checkbox" class="section-3" value="section-3">check-3
<input type="checkbox" class="section-4" value="section-4">check-4
<input type="checkbox" class="section-5" value="section-5">check-5
<input type="checkbox" class="section-6" value="section-6">check-6
<input type="checkbox" class="section-7" value="section-7">check-7
</div><br><br>
<div class="divs">
<div class="section-1">
<div class="content-1">
div-1
</div>
</div>
<div class="section-2">
<div class="content-2">
div-2
</div>
</div>
<div class="section-3">
<div class="content-3">
div-3
</div>
</div>
<div class="section-4">
<div class="content-4">
div-4
</div>
</div>
<div class="section-5">
<div class="content-5">
div-5
</div>
</div>
<div class="section-6">
<div class="content-6">
div-6
</div>
</div>
<div class="section-7">
<div class="content-7">
div-7
</div>
</div>
</div>
<div class="divs-back" style="display: none">
<div class="section-1">
<div class="content-1">
div-1
</div>
</div>
<div class="section-2">
<div class="content-2">
div-2
</div>
</div>
<div class="section-3">
<div class="content-3">
div-3
</div>
</div>
<div class="section-4">
<div class="content-4">
div-4
</div>
</div>
<div class="section-5">
<div class="content-5">
div-5
</div>
</div>
<div class="section-6">
<div class="content-6">
div-6
</div>
</div>
<div class="section-7">
<div class="content-7">
div-7
</div>
</div>
</div>
jQuery:
$(":checkbox:lt(7)").prop("checked", true);
var array = ["section-1", "section-2", "section-3", "section-4", "section-5", "section-6", "section-7"];
var unArray = [];
var unChecked = 0;
$('input[type="checkbox"]').click(function () {
if ($(this).prop('checked')) {
// Add the new element if checked:
if (array.indexOf($(this).val()) < 0) {
array.push($(this).val());
unChecked = unArray.slice(-1)[0];
unArray.splice(-1, 1);
}
} else {
// Remove the element if unchecked:
if (array.indexOf($(this).val()) >= 0) {
array.splice(array.indexOf($(this).val()), 1);
unArray.push($(this).val());
unChecked = 0;
}
}
showHideDiv($(this).val(), unChecked);
console.log(array);
console.log(unArray);
});
function showHideDiv(value, unCheked) {
console.log(unCheked);
if (unCheked != '0') {
$('.divs').find("." + unCheked).html($('.divs-back').find("." + value).html());
} else {
$('.divs').find("." + value).html('');
}
}
It is replacing the contents successfully on first attempt. But on the second attempt, the positions of the div contents are changed so not getting the desired output.
jsfiddle: https://jsfiddle.net/2th5gmLa/
Edit:
Actually, I don't want to just hide show. I want to replace the div content on last unchecked section. When I uncheck Section-1, Section-2, Section-3, then if we check section-1, then it should place in the DIV of the Section-3.

Why your code is not working?
The issue is you are pushing element. The push() method adds new items to the end of an array, and returns the new length.
//array.push($(this).val());
remove this line
Change you have to make.
$('input[type="checkbox"]').click(function() {
var unchkdArray = [];
var chkdArrray = [];
$('input[type="checkbox"]').map(function(){
if ($(this).is(':checked')) {
chkdArrray.push($(this).val())
} else {
unchkdArray.push($(this).val())
}
});
var selected = $(this).val()
if ($(this).is(':checked')) {
$('div.' + selected).show()
} else {
$('div.' + selected).hide()
}
});
Fiddle Demo

Try this...
Plunker Link
$(":checkbox:lt(7)").prop("checked", true);
var array = ["section-1", "section-2", "section-3", "section-4", "section-5", "section-6", "section-7"];
var unArray = [];
var unChecked = 0;
$('input[type="checkbox"]').click(function () {
console.log($(this)['context']['className']);
$( ".divs ."+$(this)['context']['className'] ).toggleClass( "hide" )
});
Plunker Link

How to alter the value of a div on each click

I have got a task to create a puzzle.I have 12 div.Each div contains different value up to 12.I have button like start now.I want to change my div value on each click of the start now button.
DEMO
<div id="container">
<div class="finder">
<div class="block1"> <div id="one"><h1>1</h1></div>
</div>
<div class="block1"> <div id="two"><h1>2</h1></div>
</div>
<div class="block1"> <div id="three"><h1>3</h1></div>
</div>
<div class="block1"> <div id="four"><h1>4</h1></div>
</div>
<div class="block1"> <div id="five"><h1>5</h1></div>
</div>
<div class="block1"> <div id="six"><h1>6</h1></div>
</div>
<div class="block1"> <div id="seven"><h1>7</h1></div>
</div>
<div class="block1"> <div id="eight"><h1>8</h1></div>
</div>
<div class="block1"> <div id="nine"><h1>9</h1></div>
</div>
<div class="block1"> <div id="ten"><h1>10</h1></div>
</div>
<div class="block1"> <div id="eleven"><h1>11</h1></div>
</div>
<div class="block1"> <div id="twelve"><h1>12</h1></div>
</div>
</div>
<div class="button">
<div id="startButton">
<button>Start</button>
</div>
</div>
</div>
js is
$(".finder").css('display','none');
$("#startButton").click(function () {
$(".finder").css('display','block');
});
var myDiv;
$(".block1 div").on('click', function(){myDiv = $(this)});
$(".block1 div").click(function () {
if(myDiv.text() < 12)
{
myDiv.text(parseInt(myDiv.text())+1);
}
if(myDiv.text() > 12)
{
myDiv.text(1);
myDiv.text(parseInt(myDiv.text())+1);
}
});
How can i change the values?

I have provided a solution below. One of the key takeaways you should get from it, is that when an event handler is used this will be assigned the element the event was trigger on within the bound function.
To Fill the boxes with random numbers use this code
$(function() {
//Array of values
var values = [1,2,3,4,5,6,7,8,9,10,11,12];
$( "input[type=submit], button" )
.button()
.click(function( event ) {
event.preventDefault();
});
$(".finder").css('display','none');
$("#startButton").click(function () {
var tmpValues = values.slice(); //copy array
$(".block1 div h1").each(function(){
var r = Math.floor(Math.random()*tmpValues.length);
//assign html to random array value that gets removed from array
$(this).html(tmpValues.splice(r,1));
});
$(".finder").css('display','block');
});
$(".block1 div").click(function () {
//Instead of setting myDiv use $(this) which will refer to the div
//We can grab the value of the H1 within the div using a scoped selector
var value = parseInt($("h1",this).html());
//Set the html of the clicked div
//When setting the html we must include new value in h1 to maintain style
//Ternary expression tidies up the logic, not sure why it sets to to 2 though?
$(this).html("<h1>" + ((value > 12) ? 2: value+1) + "</h1>");
});
});
Working Example http://jsfiddle.net/W55xc/3/

I didnt quite get the question, but I guess you want to generate random numbers for the div's, right? Use Math.random()
$(".block1 div").each(function() {
$(this).children('h1').text(Math.floor((Math.random() * 12) + 1)); // Generate a random number <-> [1, 12]
}