We Keep Coding

Making div tag invisible on page load and display several div tags on button click

I want to make a div tag invisible when the page loads and make it visible everytime a button is clicked. This is what I have on my page:
<div id="realProp1">
<input name="FirstName[0]" class="form-control" />
</div>
<div id="realProp2">
<input name="FirstName[1]" class="form-control" />
</div>
<div id="realProp3">
<input name="FirstName[2]" class="form-control" />
</div>
<button type="button" onclick="AddItem()" class="btn btn-primary">Add Item</button>
Whenever AddItem button is clicked, I want to display one Div tag/item so if I click "Add Item" button, I want to make visible only div tag "realProp1", now if I click "AddItem" button again, I want to make visible "realProp2" div tag. Below is what I have, the code is working for one div tag, but not for several div tags:
<script>
window.onload = function () {
document.getElementById("realProp1").style.display = 'none';
document.getElementById("realProp2").style.display = 'none';
document.getElementById("realProp3").style.display = 'none';
};
function Additem() {
document.getElementById("realProp1").style.display = "";
};
</script>
How can I make one div tag visible at each button click.

You can use :eq() to compare which div to show and save some variable for holding the last count value or you can just use $("div[id^=realProp]").filter(":hidden").first().show() for filtering the hidden divs and showing first div always.
Demo Code :
$('div[id^=realProp]').hide();
var count = 0;
$('.show_div').on('click', function() {
$('div[id^=realProp]:eq(' + count + ')').show(); //show div
count++; //for next div to show
//or without count ..use below
//show first div..by filtering hidden divs
//$("div[id^=realProp]").filter(":hidden").first().show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="realProp1">
<input name="FirstName[0]" class="form-control" />
</div>
<div id="realProp2">
<input name="FirstName[1]" class="form-control" />
</div>
<div id="realProp3">
<input name="FirstName[2]" class="form-control" />
</div>
<button type="button" class="btn btn-primary show_div">Add Item</button>
Without jquery :
var length = document.querySelectorAll("div[id^='realProp']").length;
var count = 1; //for holding last visible div count
function AddItem() {
if (count <= length) {
document.getElementById("realProp" + count).style.display = "block"; //show..
count++;
} else {
console.log("No more divs")
}
};
div[id^='realProp'] {
display: none
}
<div id="realProp1">
<input name="FirstName[0]" class="form-control" />
</div>
<div id="realProp2">
<input name="FirstName[1]" class="form-control" />
</div>
<div id="realProp3">
<input name="FirstName[2]" class="form-control" />
</div>
<button type="button" onclick="AddItem()" class="btn btn-primary">Add Item</button>

let count = 1;
window.onload = function() {
document.getElementById("realProp1").style.display = 'none';
document.getElementById("realProp2").style.display = 'none';
document.getElementById("realProp3").style.display = 'none';
};
function AddItem() {
for (let i = 1; i < 4; i++) {
document.getElementById("realProp" + i).style.display = "none";
}
document.getElementById("realProp" + count).style.display = "";
if (count <3 ){
count++;
} else {
count = 1;
}
};
<div id="realProp1">
<input name="FirstName[0]" class="form-control" />
</div>
<div id="realProp2">
<input name="FirstName[1]" class="form-control" />
</div>
<div id="realProp3">
<input name="FirstName[2]" class="form-control" />
</div>
<button type="button" onclick="AddItem()" class="btn btn-primary">Add Item</button>

What will be the Javascript code for this for changing the ID of each tag while making a clone every time?

I want to clone the template and show it to the <div id= "wrapper"> with different ID every time I make a clone. When I press the add-new-project button a new template is shown with different "ID" every time.
Javascript code:
$("document").ready(function () {
var cloneCntr = 1;
var i = 0;
$("#projectData").on('click', function () {
$('template').children().each(function () {
this.id = this.id+ this.i;
});
var temp = document.getElementsByTagName("template")[0];
var clon = temp.content.cloneNode(true);
i++;
$('#wrapper').append(clon);
});
});
Html code:
<form id="projectForm">
<div class="container">
////// ---------------------code-------//// <br>
<br>
<h4>Project Experience</h4>
<hr>
<template id="template">
<br>
<br>
<div class="form-row">
---------Template Code-------
</div>
</div>
<hr>
</template>
</div>
<div id="wrapper" class="container">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<div class="container">
<button type="button" id="projectData" class="btn btn-primary">Add New Project</button>
</div>
</body>
</html>
I want to replace every tag "id" in the template, every time when I make a clone of this.

Here's an example of how this could work for you.
See a demo here: https://jsfiddle.net/o76pqxyw/
Here's a screenshare, showing how the IDs change: https://www.loom.com/share/4a1556c4bb5c4422ad1d4b20a12a638a
HTML
<div id="template-form">
<p><label>First Name</label> <input type="text" id="first-name" /></p>
<p><label>Last Name</label> <input type="text" id="last-name" /></p>
</div>
<button id="btn">Add New User</button>
<div id="container"></div>
Javascript
const button = $('#btn');
const target = $('#container');
let counter = 0;
$(button).on('click', () => {
const template = $('#template-form');
const copy = $(template).clone();
counter++;
const elements = $(copy).find('input');
$(elements).each(function(index) {
const currentId = $(this).attr('id');
const newId = currentId + '-' + counter;
$(this).attr('id', newId);
});
$(target).append(copy);
})

Launching a new window and filling form values using Javascript

I have been learning JavaScript and i am attempting to launch a new window on click after a user has placed info into a form fields and then placing that info into form fields in the newly launched window. I have read many posts and methods in Stackoverflow however i cant seem to get it to work properly.
Starting page HTML:
<form id="memCat" methed="get" class="member_catalogue">
<button type="submit" class="prodBtn" id="catOrder" onclick="openMemberOrder()"><img class="prodImg" src="../../../Images/bcpot002_thumb.jpg" name="Red Bowl"></button>
<div class="cat_block">
<label class="cat_label" for="cat_name">Product Name:</label>
<input class="cat_input" type="text" id="catID" value="bepot002" readonly>
</div>
<div class="cat_block">
<label class="cat_label" for="cat_description">Product Description:</label>
<input class="cat_input" type="text" id="catDesc" value="Ocre Red Pot" readonly>
</div>
<div class="cat_block">
<label class="cat_label" for="cat_price">Per unit price:$</label>
<input class="cat_input" type="number" id="catVal" value="10" readonly>
</div>
</form>
New page HTML:
<form id="memOrder" method="post">
<div>
<label for="pname">Product Name:</label>
<input type="text" id="orderID" readonly>
</div>
<div>
<label for="pdescription">Product Description:</label>
<input type="text" id="orderDesc" readonly>
</div>
<div>
<label for="quantity">Quantity ordered:</label>
<input type="number" class="quantOrder" id="orderOrder" value="1" min="1" max="10">
</div>
<div>
<label for="ind_price">Per unit price: $</label>
<input type="number" class="quantCount" id="orderVal" readonly>
</div>
<div>
<label for="tot_price">Total Price: $</label>
<input type="number" class="quantCount" id="orderTotal" readonly>
</div>
<div>
<button type="reset">Clear Order</button>
<button type="submit" id="orderCalc">Calculate Total</button>
<button type="submit" id="orderPlace">Place Order</button>
</div>
</form>
Script i have to date:
function openMemberOrder() {
document.getElementById("orderID").value = document.getElementById("catID").document.getElementsByTagName("value");
document.getElementById("orderDesc").value = document.getElementById("catDesc").document.getElementsByTagName("value");
document.getElementById("orderVal").value = document.getElementById("catVal").document.getElementsByTagName("value");
memberOrderWindow = window.open('Member_Orders/members_order.html','_blank','width=1000,height=1000');
};
script and other meta tags in head are correct as other code is working correctly.

So after much trial and error i have had success with this:
On the submission page:
1. I created a button on the page that will capture the input form data
2. i created the localstorage function in JS
3. I then placed the script tag at the bottom of the page before the closing body tag
HTML
<button type="submit" class="prodBtn" id="catOrder" onclick="openMemberOrder()"><img class="prodImg" src="../../../Images/bcpot002/bcpot002_thumb.jpg" name="Red Bowl"></button>
Javascript
var catID = document.getElementById("catID").value;
var catDesc = document.getElementById("catDesc").value;
var catVal = document.getElementById("catVal").value;
function openMemberOrder() {
var memberOrderWindow;
localStorage.setItem("catID", document.getElementById("catID").value);
localStorage.setItem("catDesc", document.getElementById("catDesc").value);
localStorage.setItem("catVal", document.getElementById("catVal").value);
memberOrderWindow = window.open('Member_Orders/members_order.html', '_blank', 'width=1240px,height=1050px,toolbar=no,scrollbars=no,resizable=no');
} ;
Script Tag
<script type="text/javascript" src="../../../JS/catOrder.js"></script>
I then created the new page with the following javascript in the header loading both an image grid as well as input element values:
var urlArray = [];
var urlStart = '<img src=\'../../../../Images/';
var urlMid = '_r';
var urlEnd = '.jpg\'>';
var ID = localStorage.getItem('catID');
for (var rowN=1; rowN<5; rowN++) {
for (var colN = 1; colN < 6; colN++){
urlArray.push(urlStart + ID + '/' + ID + urlMid + rowN + '_c' + colN + urlEnd)
}
}
window.onload = function urlLoad(){
document.getElementById('gridContainer').innerHTML = urlArray;
document.getElementById('orderID').setAttribute('value', localStorage.getItem('catID'));
document.getElementById('orderDesc').setAttribute('value', localStorage.getItem('catDesc'));
document.getElementById('orderVal').setAttribute('value', localStorage.getItem('catVal'));
};
I then created 2 buttons to calculate a total based on inputs and clearing values separately, the script for this was placed at the bottom of the page.
function total() {
var Quantity = document.getElementById('orderQuant').value;
var Value = document.getElementById('orderVal').value;
var Total = Quantity * Value;
document.getElementById('orderTotal').value = Total;
}
function clearForm() {
var i = 0;
var j = 0;
document.getElementById('orderQuant').value = i;
document.getElementById('orderTotal').value = j;
}

How to spawn a new div prior to the last div in a container?

I'm trying to create new fields like the first field in this form by clicking on an image, but the fields are spawning below the button to submit and I don't understand why. The behavior I'm looking for is for the new fields to spawn above the button.
Here's my code
<div id="title">
<h1>Monthly Run Operations Assessment</h1>
</div>
<div class="row">
<div class="col-20" id="row-one">
<label for="name">1. </label>
</div>
<div class="col-60">
<input type="text" id="op" name="op" placeholder="Insert operation here">
</div>
<div class="col-20" id="symbol">
<img src="file:///C:/Users/user/Downloads/plus-circle-solid.svg" id="add">
</div>
</div>
<div id="submit">
<input type="submit" value="Submit">
</div>
</div>
This is the function:
var element = document.getElementById("add");
element.onclick = function() {
console.log("woot");
var ele = document.getElementsByClassName("row")[0];
var clone = ele.cloneNode(true);
var newDiv = document.createElement("div");
document.body.appendChild(clone);
}

appendChild, as its name suggests, always appends the new element -- that is, it adds it to the end. What you want is insertBefore:
document.body.insertBefore(clone, ele);

One way to handle this is to wrap your form in a container and append to it :
var element = document.getElementById("add");
element.onclick = function() {
// console.log("woot");
var ele = document.getElementsByClassName("row")[0];
var clone = ele.cloneNode(true);
var newDiv = document.createElement("div");
document.querySelector('#container').appendChild(clone);
}
<div id="title">
<h1>Monthly Run Operations Assessment</h1>
</div>
<div id="container">
<div class="row">
<div class="col-20" id="row-one">
<label for="name">1. </label>
</div>
<div class="col-60">
<input type="text" id="op" name="op" placeholder="Insert operation here">
</div>
<div class="col-20" id="symbol">
<img src="file:///C:/Users/user/Downloads/plus-circle-solid.svg" id="add">
</div>
</div>
</div>
<div id="submit">
<input type="submit" value="Submit">
</div>
</div>

I combined the above answers to achieve the expected behavior.
var element = document.getElementById("add");
element.onclick = function() {
// console.log("woot");
var ele = document.getElementsByClassName("row")[0];
var clone = ele.cloneNode(true);
var newDiv = document.createElement("div");
document.querySelector('#container').insertBefore(clone, ele);
}

How can I populate the following objects in multiple input fields?

Please forgive me if the title is not very descriptive,
I'm using vibrant.js to get a picture's color HEX, everything is working as expected and i'm quite happy with everything so far,please help me / guide me on how to get the values in the input text fields, MUCH APPRECIATED!
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="https://jariz.github.io/vibrant.js/dist/Vibrant.js"></script>
</head>
<body>
How to get the console result in the input fields below?
</br>
<label>1st<label>
<input value="" id="1"></br>
<p></p>
<label>2nd<label>
<input value="" id="2"></br>
<p></p>
<label>3rd<label>
<input value="" id="3"></br>
<p></p>
<label>4th<label>
<input value="" id="4"></br>
<p></p>
<label>5th<label>
<input value="" id="5"></br>
<div class="row examples">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-body">
<img data-src="examples/3.jpg">
</div>
</div>
</div>
<script>
var img = document.createElement('img');
img.setAttribute('src', 'examples/octocat.png')
img.addEventListener('load', function() {
var vibrant = new Vibrant(img);
var swatches = vibrant.swatches()
for (var swatch in swatches)
if (swatches.hasOwnProperty(swatch) && swatches[swatch])
console.log(swatch, swatches[swatch].getHex())
/*
* Results into:
* Vibrant #7a4426
* Muted #7b9eae
* DarkVibrant #348945
* DarkMuted #141414
* LightVibrant #f3ccb4
*/
});
</script>
</body>
</html>
My console perfectly returns
* Vibrant #7a4426
* Muted #7b9eae
* DarkVibrant #348945
* DarkMuted #141414
* LightVibrant #f3ccb4
The main goal is to get the Color HEX into the input text field ( you can remove the color name bu removing (swatch,) in the console.log.

Take a look at this example I made. Hopefully it helps!
var url = 'https://images.unsplash.com/photo-1465188035480-cf3a60801ea5?dpr=1&auto=format&fit=crop&w=568&h=568&q=60&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D';
var img = document.createElement('img');
img.setAttribute('src', url + '&' + new Date().getTime());
img.setAttribute('crossOrigin', '');
img.addEventListener('load', function() {
var vibrant = new Vibrant(img);
var swatches = vibrant.swatches()
var i = 0;
for (var swatch in swatches)
if (swatches.hasOwnProperty(swatch) && swatches[swatch]) {
document.getElementById(""+(i+1)).value = swatches[swatch].getHex();
i = i + 1;
}
});
<script src="https://jariz.github.io/vibrant.js/dist/Vibrant.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6">
<label>Vibrant</label>
<input value="" class="form-control" id="1">
<label>Muted</label>
<input value="" class="form-control" id="2">
<label>DarkVibrant</label>
<input value="" class="form-control" id="3">
<label>DarkMuted</label>
<input value="" class="form-control" id="4">
<label>LightVibrant</label>
<input value="" class="form-control" id="5">
</div>
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-body">
<img class="img-responsive" src="https://images.unsplash.com/photo-1465188035480-cf3a60801ea5?dpr=1&auto=format&fit=crop&w=568&h=568&q=60&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
</div>
</div>
</div>
</div>
</div>
Also you can find it here:
https://jsfiddle.net/bgmpow5q/

I am taking this approach (different for loop from yours) because I need to capture the input box;
luckily you have it as 1,2,3,4,5;
so I am using the index in interation; this index-in-iteration is difficult in a for-in structure;
hope this helps u.
for(i=1;i<=swatches.length;i++) {
if (swatches.hasOwnProperty(swatch) && swatches[swatch]) let hexValue = swatches[swatch].getHex();
if (hexValue != undefined) {
document.getElementById(i).value = hexValue;
}
}

You can try something like following
for (var i=0; i< swatches.length; i++)
if (swatches.hasOwnProperty(swatches[i]) && swatches[i]){
document.getElementById(""+(i+1)).value = swatches[i].getHex();
console.log(swatches[i], swatches[i].getHex())
}