We Keep Coding

How to clone or create a nested DOM node and change all its containing id values according to a current id?

I need to display some numbers, strings from a class named Student, but i can't figure it out how i can change the id from children element. I have to use JavaScript.
what i tried to do:
class Student{
static count = 0;
constructor(nume, prenume, data_nasterii, foaie_matricola){
this.IdClasa = ++Student.count;
//definirea atributelor
this.nume = nume;
this.prenume = prenume;
this.data_nasterii = data_nasterii;
this.foaie_matricola = foaie_matricola;
}
afiseazaVarsta(){
}
afiseazaNotele(){
}
calculeazaMedia(){
}
adaugaNota(nota_noua){
}
}
var Stud = [new Student("Name", "Name1", "2000.01.01", "0123123"),
new Student("Green", "Blue", "2022/12.12", "321321")];
function afisareStudenti(){
let i = 0; let bol = false;
for(let x=1; x<=Student.count; x++) {
console.log(document.getElementById("AfisareStudenti"+x)==null);
if(document.getElementById("AfisareStudenti"+x)==null)
{
i = x;
bol = true;
break;
} else {
bol = false;
}
}
if((i<=Student.count)&&(bol==true)){
for(i; i<=Student.count; i++) {
console.log("i="+i);
var div = document.querySelector('#AfisareStudenti1');
var divClone = div.cloneNode(true);
console.log(divClone);
divClone.id = 'AfisareStudenti'+(i);
div.after(divClone);
var NumeStud = document.getElementById("NumeStudent"+(i-1));
var PrenumeStud = document.getElementById("PrenumeStudent"+(i-1));
var dataNastStud = document.getElementById("intData"+(i-1));
var FoaiaMatStud = document.getElementById("FoaiaMatStud"+(i-1));
NumeStud.id = "NumeStudent"+(i);
PrenumeStud.id = "PrenumeStud"+(i);
dataNastStud.id = "intData"+(i);
FoaiaMatStud.id = "FoaiaMatStud"+(i);
}
}
}
and this is the html file(the div that i want to clone):
<!--AFISARE-->
<div id="AfisareStudenti1">
<h2> Afisare Student 1</h2>
<label>Ce student doriti sa modificati? </label>
<form>
<label>Nume:</label><br>
<input type="text" id="NumeStudent1"><br>
<label>Prenume:</label><br>
<input type="text" id="PrenumeStudent1"><br>
<label>Data Nasterii:</label><br>
<input type="date" id="intData1"><br>
<label>Foaie matricola:</label><br>
<input type="text" id="FoaiaMatStud1"><br><br>
<input class="butoane" type="submit" value="Afisare"
onclick="afisareMeniuAfisStudenti()">
</form>
</div>
the class is saved in a dynamic array (could be n object of the class) so i have to make somehow to display the information dynamic. My version changes the id from all elements with the same id (every incrementation of i, the idnumber from id is incremented also). I tried to create that div with document.createElement but is impossible(at least for me) xD . I started coding in javascript 2 days ago, so please take it slow on me :(
I think i found the problem, but it doesn't solve it. (i need to put (i-1) when calling for getting the ids). (Newbie mistake)

Having commented ...
"I have the feeling that if provided with the broader picture the audience could be of much more help since the OP could be provided back with leaner/cleaner and better maintainable approaches."
... I nevertheless hereby lately provide a template-based approach which, besides supporting the OP's id based querying of student-items, is also easier to read and to maintain.
The code provided within the example-code's main function does not just implement the usage of the template-based node-creation via template literals and DOMParser.parseFromString but also prevents the default behavior of each student-form's submit-button by making use of event-delegation.
function createStudentElement(studentId) {
const markup =
`<div class="student-item" id="AfisareStudenti${ studentId }">
<h2> Afisare Student ${ studentId }</h2>
<label>Ce student doriti sa modificati? </label>
<form>
<label>Nume:</label><br>
<input type="text" id="NumeStudent${ studentId }"><br>
<label>Prenume:</label><br>
<input type="text" id="PrenumeStudent${ studentId }"><br>
<label>Data Nasterii:</label><br>
<input type="date" id="intData${ studentId }"><br>
<label>Foaie matricola:</label><br>
<input type="text" id="FoaiaMatStud${ studentId }"><br><br>
<input
class="butoane" type="submit" value="Afisare"
onclick="afisareMeniuAfisStudenti(${ studentId })"
>
</form>
</div>`;
const doc = (new DOMParser).parseFromString(markup, 'text/html');
return doc.body.removeChild(doc.body.firstElementChild);
}
// the button click handler.
function afisareMeniuAfisStudenti(studentId) {
console.log({ studentId })
}
function main() {
const itemsRoot = document.querySelector('.student-items');
// - prevent any form-submit by making use of event-delegation.
itemsRoot.addEventListener('submit', evt => evt.preventDefault());
// - just for demonstration purpose ...
// ... create student-items from a list of student IDs.
[1, 2, 3, 4, 5].forEach(studentId =>
itemsRoot.appendChild(
createStudentElement(studentId)
)
);
}
main();
.as-console-wrapper { left: auto!important; width: 50%; min-height: 100%; }
<div class="student-items"></div>

Tom's answer above is what you want for the element id problem that you asked about.
For your code in particular, you are going to have a couple other problems:
Because the final input is type="submit", its going to reload the page by default when it is clicked. The name of the "onclick" function also needs to match the function you defined (afisareStudenti).
You have:
<input class="butoane" type="submit" value="Afisare" onclick="afisareMeniuAfisStudenti()">
Change this to:
<input class="butoane" type="submit" value="Afisare" onclick="afisareStudenti(event)">
Now, when you click that button, it will call the afisareStudenti function and pass in the "event". So if you change:
function afisareStudenti(){
let i = 0; let bol = false;
to:
function afisareStudenti(event){
event.preventDefault()
let i = 0; let bol = false;
This will correctly call your function, and prevent the "default" action of that submit button from reloading the page.

To change the id attribute of children elements, you could use Element.querySelector() on divClone.
Because if you use Document.querySelector() or Document.getElementById() you will get the first element that matches your selector (i.e.children of div#AfisareStudenti1).
let i = 2;
var div = document.querySelector('#AfisareStudenti1');
var divClone = div.cloneNode(true);
divClone.id = 'AfisareStudenti'+(i);
divClone.querySelector("h2").innerText = "Afisare Student " + i;
var NumeStud = divClone.querySelector("#NumeStudent1");
var PrenumeStud = divClone.querySelector("#PrenumeStudent1");
var dataNastStud = divClone.querySelector("#intData1");
var FoaiaMatStud = divClone.querySelector("#FoaiaMatStud1");
NumeStud.id = "NumeStudent"+(i);
PrenumeStud.id = "PrenumeStud"+(i);
dataNastStud.id = "intData"+(i);
FoaiaMatStud.id = "FoaiaMatStud"+(i);
div.after(divClone);
<div id="AfisareStudenti1">
<h2> Afisare Student 1</h2>
<label>Ce student doriti sa modificati? </label>
<form>
<label>Nume:</label><br>
<input type="text" id="NumeStudent1" /><br>
<label>Prenume:</label><br>
<input type="text" id="PrenumeStudent1" /><br>
<label>Data Nasterii:</label><br>
<input type="date" id="intData1" /><br>
<label>Foaie matricola:</label><br>
<input type="text" id="FoaiaMatStud1" /><br><br>
<input class="butoane" type="submit" value="Afisare" onclick="afisareMeniuAfisStudenti()" />
</form>
</div>

increment in the function name and id javascript

I have number of input types and buttons....every button on click increment the value in the relevant input types. But rather than creating a separate function for every button i want to do it by loop....where loop will increase in the function name and id......
<input type="number" id="s1"> <button onclick="increment_s1();">Add</button>
<input type="number" id="s2"> <button onclick="increment_s2()">Add</button>
<input type="number" id="s3"> <button onclick="increment_s3">Add</button>
here is JavaSc code
<script>
var i = 1;
for (i = 0; i < 5; i++) {
var data = 0;
document.getElementById("s"+i).innerText = data;
function ['increment_'+i]() {
data = data + 1;
document.getElementById("s"+i).placeholder = data;
i++;
}
}
</script>

You can't program the function name. You can set up a parameter in the function to make a difference. The param would be the identifier and you can put the whole input element id there.
After that, if you want to have the id s1, s2, and so on, you should initialize the i to start from 1 to 5 instead of 0 to less than 5.
Another thing is, you need to understand the role of placeholder and value attributes in input element. The placeholder works only when the value is empty and it doesn't count as the form value.
// This is for handling onclick
function increment(id) {
var elem = document.getElementById(id);
elem.value = parseInt(elem.value) + 1;
}
// This is to initialize the 0 values
for (var i = 1; i <= 5; i++) {
var data = 0;
document.getElementById("s"+i).value = data;
}
<input type="number" id="s1"> <button onclick="increment('s1');">Add</button>
<input type="number" id="s2"> <button onclick="increment('s2')">Add</button>
<input type="number" id="s3"> <button onclick="increment('s3')">Add</button>
<input type="number" id="s4"> <button onclick="increment('s4')">Add</button>
<input type="number" id="s5"> <button onclick="increment('s5')">Add</button>
What if you would like to generate whole input and button with loops? You can get them by adding div and use the innerHTML, i.e.
// This is for handling onclick
function increment(id) {
var elem = document.getElementById(id);
elem.value = parseInt(elem.value) + 1;
}
var divElem = document.querySelector('div');
// Set up empty first
divElem.innerHTML = "";
for(var i=1; i<=5; i++) {
// Create elements here
var innerElem = `<input type="number" id="s${i}" value="0"> <button onclick="increment('s${i}')">Add</button>`;
// Push them all into innerHTML
divElem.innerHTML += innerElem;
}
<div></div>
You can try these two workarounds. Perhaps you may need to learn more about basic HTML elements and their attributes also Javascript.

Why is my HTML page reloading every time a new entry is submitted into a form?

I am having trouble with my HTML page. My program is meant to collect names using a form, then output them into a table below the form. It is capable of doing just that when the page doesn't reload.
The first time I enter a certain name, the page reloads. After the page has reloaded, and I enter the same name, it doesn't reload upon hitting enter any subsequent time. I don't know why this is, or how to fix it.
Here is the linked JS file
// Gloabal Variables
var enteredName,
countOutput,
count,
table,
form,
allNames = [];
function project62Part2() {
// Your code goes in here.
function getElements() {
form = document.getElementById("nameForm");
countOutput = document.getElementById("numNames");
table = document.getElementById("table");
}
function addName() {
enteredName = form.name.value;
allNames.push(enteredName);
}
function countNames() {
// Reset count
count = 0;
// Loop through and count names
for (i = 0; i < allNames.length; i++) {
count++;
}
}
function output() {
// Reset table
table.innerHTML = "<tr><th>Names</th></tr>";
// Display count
countOutput.innerHTML = "Total names entered: " + count;
// Loop through and add to table display
for (i = 0; i < allNames.length; i++) {
table.innerHTML += "<tr><td>" + allNames[i] + "</td></tr>";
}
}
// Call code
getElements();
addName();
countNames();
output();
// Prevent page from reloading
return false;
}
<form id="nameForm" action="#">
<label class="formLabel" for="name">Name: </label>
<input id="name" name="name" />
<input type="submit" name="runExample" value="Submit" class="formatSubmit" onclick="project62Part2()" />
</form>
<div id="numNames">Total names entered: </div>
<table id="table"></table>
My understanding of coding is rudimentary at best, so while I would appreciate any answer, I'd prefer it to be kept simple!

<input type='submit'> causes the page refresh. Replace it with <input type='button'>.
Read more here.
// Gloabal Variables
var enteredName,
countOutput,
count,
table,
form,
allNames = [];
function project62Part2() {
// Your code goes in here.
function getElements() {
form = document.getElementById("nameForm");
countOutput = document.getElementById("numNames");
table = document.getElementById("table");
}
function addName() {
enteredName = form.name.value;
allNames.push(enteredName);
}
function countNames() {
// Reset count
count = 0;
// Loop through and count names
for (i = 0; i < allNames.length; i++) {
count++;
}
}
function output() {
// Reset table
table.innerHTML = "<tr><th>Names</th></tr>";
// Display count
countOutput.innerHTML = "Total names entered: " + count;
// Loop through and add to table display
for (i = 0; i < allNames.length; i++) {
table.innerHTML += "<tr><td>" + allNames[i] + "</td></tr>";
}
}
// Call code
getElements();
addName();
countNames();
output();
// Prevent page from reloading
return false;
}
<form id="nameForm" action="6.2projectpart2.html#">
<label class="formLabel" for="name">Name: </label>
<input id="name" name="name" />
<input type="button" name="runExample" value="Submit" class="formatSubmit" onclick="project62Part2()" />
</form>
<div id="numNames">Total names entered: </div>
<table id="table"></table>

You can change from <input type="submit" name="runExample" /> to
<input type="button" name="runExample" />
or
Remove onclick="project62Part2()" on input tag and move to form tag onsubmit="return project62Part2()"
<form id="nameForm" onsubmit="return project62Part2()">

There are many ways to achieve this I will explain two ways:
1. Adding Event.preventDefault() method
Whenever you click <input> elements of the submit type, the user agent attempts to submit the form to the URL setup in the form.
Now, the preventDefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be. This means the Form interface will not reload the page.
How it works?
well, just add the event variable to your submit call like this:
<input type="submit" name="runExample" value="Submit" class="formatSubmit" onclick="project62Part2(event)" />
Then add the event parameter to the project62Part2() method.
function project62Part2(event) {
event.preventDefault();
...
}
// Gloabal Variables
var enteredName,
countOutput,
count,
table,
form,
allNames = [];
function project62Part2(event) {
event.preventDefault();
// Your code goes in here.
function getElements() {
form = document.getElementById("nameForm");
countOutput = document.getElementById("numNames");
table = document.getElementById("table");
}
function addName() {
enteredName = form.name.value;
allNames.push(enteredName);
}
function countNames() {
// Reset count
count = 0;
// Loop through and count names
for (i = 0; i < allNames.length; i++) {
count++;
}
}
function output() {
// Reset table
table.innerHTML = "<tr><th>Names</th></tr>";
// Display count
countOutput.innerHTML = "Total names entered: " + count;
// Loop through and add to table display
for (i = 0; i < allNames.length; i++) {
table.innerHTML += "<tr><td>" + allNames[i] + "</td></tr>";
}
}
// Call code
getElements();
addName();
countNames();
output();
// Prevent page from reloading
return false;
}
<form id="nameForm" action="#">
<label class="formLabel" for="name">Name: </label>
<input id="name" name="name" />
<input type="submit" name="runExample" value="Submit" class="formatSubmit" onclick="project62Part2(event)" />
</form>
<div id="numNames">Total names entered: </div>
<table id="table"></table>
2. Replacing input with button
This is based on the previous explanation. If an <input> element of the submit type triggers a submit call then if you replace it with the button type then a submit call will not be triggered. I recommend you this to maintain the submit if you are working with server calls.
How it works?
well, just replace the type from submit to button like this:
<input type="button" name="runExample" value="Submit" class="formatSubmit" onclick="project62Part2()" />
// Gloabal Variables
var enteredName,
countOutput,
count,
table,
form,
allNames = [];
function project62Part2() {
event.preventDefault();
// Your code goes in here.
function getElements() {
form = document.getElementById("nameForm");
countOutput = document.getElementById("numNames");
table = document.getElementById("table");
}
function addName() {
enteredName = form.name.value;
allNames.push(enteredName);
}
function countNames() {
// Reset count
count = 0;
// Loop through and count names
for (i = 0; i < allNames.length; i++) {
count++;
}
}
function output() {
// Reset table
table.innerHTML = "<tr><th>Names</th></tr>";
// Display count
countOutput.innerHTML = "Total names entered: " + count;
// Loop through and add to table display
for (i = 0; i < allNames.length; i++) {
table.innerHTML += "<tr><td>" + allNames[i] + "</td></tr>";
}
}
// Call code
getElements();
addName();
countNames();
output();
// Prevent page from reloading
return false;
}
<form id="nameForm" action="#">
<label class="formLabel" for="name">Name: </label>
<input id="name" name="name" />
<input type="button" name="runExample" value="Submit" class="formatSubmit" onclick="project62Part2()" />
</form>
<div id="numNames">Total names entered: </div>
<table id="table"></table>

try adding an event parameter on project62Part2 then do an event.preventDefault() inside

Event listener not triggering?

I am trying to push array elements gathered from an input to a HTML table. The event listener is not triggering for some reason, here is the HTML.
<form id="frm1">
<input id='keyword-input' type="text" placeholder="Keywords"></input>
<input id="color-input" type="text" placeholder="Color"></input>
<input id="size-input" type="text" placeholder="Size"></input>
<input id="profile-input" type="text" placeholder="Profile"></input>
<input id="proxy-input" type="text" placeholder="Proxy"></input>
<input id="category-input" type="text" placeholder="Category"></input>
<input id="tasks-input" type="number" placeholder="# Of Tasks"></input>
<input id="schedule-input" type="time" placeholder="Schedule Task"></input>
<input id="search-input" type="text" placeholder="Search Method"></input>
<button type="submit" form="frm1" class="add-button" id='addTask'>Add Task</button>
</form>
I have tried moving the listener further down the script, and I have tried embedding it in an onload function, but neither have solved the issue.
var submitButton = document.getElementById('addTask');
submitButton.addEventListener('submit', displayTable);
let taskModel = [{
taskKeyword : value,
taskSize : value,
taskProfile : value
}];
function displayTable(taskModel) {
var table = document.getElementById('taskTable');
for (var i = 0; i < taskModel.length; ++i) {
var tasks = tasks[i];
var row = document.createElement('tr');
var properties = ['taskKeyword', 'taskSize', 'taskProfile'];
for (var j = 0; j < properties.length; ++j) {
var cell = document.createElement('td');
cell.innerHTML = taskModel[properties[j]];
row.appendChild(cell);
}
table.appendChild(row);
}
}
I expected the function to be executed once the 'addTask' button is pressed, but it is not appearing in the dev tools event listener.

You have to add the listener to your form instead of the button.
From the official docs:
The submit event is fired when a form is submitted.
Note that submit is fired only on the form element, not the button or submit input.
Forms are submitted, not buttons.
Important changes to your code:
No.1: In your displayTable handler function, change the parameter to a different name instead of taskModel.
Why? You're trying to use taskModel assuming that it holds the task data. However, the actual value of taskModel when the function is called is the event data. The handler function, by default, when executed is passed the event object (that was created when the event/action you are interested in happened) as an argument.
No.2: Change taskModel[properties[j]] to taskModel[0][properties[j]]
Why? You have to specify the index of the taskModel when accessing it since you declared it as an array.
var taskForm = document.getElementById('frm1');
taskForm.addEventListener('submit', displayTable);
function displayTable(event) {
let taskModel = [{
taskKeyword: document.getElementById('keyword-input').value,
taskSize: document.getElementById('size-input').value,
taskProfile: document.getElementById('profile-input').value
}];
var table = document.getElementById('taskTable');
for (var i = 0; i < taskModel.length; ++i) {
//var tasks = tasks[i];
var row = document.createElement('tr');
var properties = ['taskKeyword', 'taskSize', 'taskProfile'];
for (var j = 0; j < properties.length; ++j) {
var cell = document.createElement('td');
cell.innerHTML = taskModel[0][properties[j]]; // You have to specify the index of the taskModel since you declared it as an array
row.appendChild(cell);
}
table.appendChild(row);
}
// added event.preventDefault(); for demo purposes
event.preventDefault();
}
<form id="frm1">
<input id='keyword-input' type="text" placeholder="Keywords"></input>
<input id="color-input" type="text" placeholder="Color"></input>
<input id="size-input" type="text" placeholder="Size"></input>
<input id="profile-input" type="text" placeholder="Profile"></input>
<input id="proxy-input" type="text" placeholder="Proxy"></input>
<input id="category-input" type="text" placeholder="Category"></input>
<input id="tasks-input" type="number" placeholder="# Of Tasks"></input>
<input id="schedule-input" type="time" placeholder="Schedule Task"></input>
<input id="search-input" type="text" placeholder="Search Method"></input>
<button type="submit" form="frm1" class="add-button" id='addTask'>Add Task</button>
</form>
<table id="taskTable">
</table>
Note: I modified the taskModel implementation on this answer for demo purposes.

how to pass checkbox values in an array to a function using onclick in javascript

how to pass checkbox values in an array to a function using onclick in JavaScript.
following is my html code. Note that I don't use form tag. only input tags are used.
<input id="a"name="a" type="checkbox" value="1" checked="checked" >A</input>
<input id="a"name="a" type="checkbox" value="2" checked="checked" >B</input>
<input id="a"name="a" type="checkbox" value="3" checked="checked" >C</input>
<button onclick="send_query(????)">CLICK</button>
following is my JavaScript function
function send_query(check) {
var str = "";
for (i = 0; i < check.length; i++) {
if (check[i].checked == true) {
str = str + check[i];
}
console.log(str);
}

You can write a onclick handler for the button, which can create an array of clicked checkbox values and then call the send_query with the parameter as shown below
<button onclick="onclickhandler()">CLICK</button>
then
function onclickhandler() {
var check = $('input[name="a"]:checked').map(function () {
return this.value;
}).get();
console.log(check);
send_query(check)
}
Note: I would also recommend using jQuery to register the click handler instead of using inline onclick handler.
Note: Also ID of elements must be unique in a document... you have multiple elements with id a, I'm not seeing you using that id anywhere so you could probably remove it

With pure javascript (demo) (tested with Chrome only).
HTML :
<button onclick="send_query(document.getElementsByTagName('input'))">
Javascript :
function send_query(check) {
var values = [];
for (i = 0; i < check.length; i++) {
if (check[i].checked == true) {
values.push(check[i].value);
}
}
console.log(values.join());
}

Try this
<form name="searchForm" action="">
<input type="checkbox" name="categorySelect[]" id="1"/>
<input type="checkbox" name="categorySelect[]" id="2" />
<input type="checkbox" name="categorySelect[]" id="3"/>
<input type="button" value="click" onclick="send_query();"/>
</form>
JS
function send_query() {
var check = document.getElementsByName('categorySelect[]');
var selectedRows = [];
for (var i = 0, l = check.length; i < l; i++) {
if (check[i].checked) {
selectedRows.push(check[i]);
}
}
alert(selectedRows.length);
}