Develop Reference

My active/disable Functionality no longer works after cloning

I'm using the clone method to duplicate a form. I'm adding and removing the active
class on the buttons but, once I clone the form, the duplicate buttons no longer
function because they share the same class as the original. I want the buttons to still
function regardless how many times I clone it. I used jQuery and JavaScript, and I'm
still new to programming. Can you please give me some ideas as to how to solve this.
Thanks in advance fellow developers.
Here is my HTML Code:
<div class="column-bottom phone">
<p class="para_txt">Phone</p>
<div id="main-wrapper">
<div id="wrapper_1" class="parentClass">
<div class="basic_infor">
<p>Select the nature of phone:</p>
<div class="parent_btns">
<button class="func_btns btn_first_4 " >Private</button>
<button class="func_btns btn_second_4" >Work</button>
</div>
</div>
<div class="basic_infor">
<p>Select the type of phone:</p>
<div class="parent_btns">
<button class="func_btns btn_5">Mobile</button>
<button class="func_btns btn_6 ">Telephone</button>
<button class="func_btns btn_7 ">Fax</button>
<button class="func_btns btn_8">Extension</button>
</div>
</div>
<div class="txt_area">
<input type="textarea" placeholder="+27 85 223 5258">
<span onclick="delete_el();">x</span>
</div>
</div>
</div>
<div class="btn_add">
<button class="repl_btns phone_repl" onclick="duplicate();">Add additional</button>
<p>Display on foreman contact list?</p>
<input type="checkbox" id="input_field" name="Phone_contact">
</div>
</div>
Here is my jQuery and JavaScript Code. I selected the class for the first button and
added a active class to it while removing the active class for the second button. I did
the same for the rest of the buttons.
//private btn
$(".btn_first_4").click(function () {
$(this).addClass("is_active");
$(".btn_second_4").removeClass("is_active");
});
//work btn
$(".btn_second_4").click(function () {
$(this).addClass("is_active");
$(".btn_first_4").removeClass("is_active");
});
//Bottom 5 btns
$(".btn_5").click(function () {
$(this).addClass("is_active");
$(".btn_6,.btn_7,.btn_8").removeClass("is_active");
})
$(".btn_6").click(function () {
$(this).addClass("is_active");
$(".btn_5,.btn_7,.btn_8").removeClass("is_active");
})
$(".btn_7").click(function () {
$(this).addClass("is_active");
$(".btn_5,.btn_6,.btn_8").removeClass("is_active");
})
$(".btn_8").click(function () {
$(this).addClass("is_active");
$(".btn_5,.btn_6,.btn_7").removeClass("is_active");
})
/*
Cloning Functions....
I tried to set the id of my new clone to "wrapper_2", but it only works when i clone it
once. I wanted to change the class attribute this way but I realize it wont work as
well. Please advise. Thanks
*/
function duplicate(){
const wrapper = document.getElementById("wrapper_1");
const clone = wrapper.cloneNode(true);
clone.id = "wrapper_2";
const main_wrapper = document.getElementById("main-wrapper");
main_wrapper.appendChild(clone)
}
function delete_el() {
const del_el = document.getElementById("wrapper_2");
del_el.remove();
}

Problems
If you use .cloneNode() any event handlers bound to the original will not carry over to the clone. Fortunately you are using jQuery which has it's own method .clone(). It has the ability to clone and keep event handlers, $(selector).clone(true) to copy with events and $(selector).clone(true, true) for a deep copy with events.
Note: Using .clone() has the side-effect of producing elements with duplicate id attributes, which are supposed to be unique. Where possible, it is recommended to avoid cloning elements with this attribute or using class attributes as identifiers instead.
.clone()|jQuery API Documentation
Do not clone anything with an id, in fact you are using jQuery so don't use id at all. Convert every id to a class, it might feel like a lot of work but in the long run you'll be thankful you did.
Do not use inline event handlers
<button onclick="lame(this)">DON'T DO THIS</button>
This is especially important if you use jQuery which makes event handling incredibly easy to write and very versatile.
let count = 0;
$('output').val(++count);
$('.remove').hide();
$('.select button').on('click', function() {
const $old = $(this).parent().find('.active');
if (!$old.is(this)) {
$old.removeClass('active');
}
$(this).toggleClass('active');
});
$('.clear').on('click', function() {
$(this).parent().find('input').val('');
});
$('.remove').on('click', function() {
$(this).closest('.fields').remove();
let out = $.makeArray($('output'));
count = out.reduce((sum, cur, idx) => {
cur.value = idx + 1;
sum = idx + 1;
return sum;
}, 0);
});
$('.add').on('click', function() {
const $first = $('.fields').first();
const $copy = $first.clone(true, true);
$copy.insertAfter($('.fields').last());
$copy.find('output').val(++count);
$copy.find('.remove').show();
$copy.find('input').val('');
});
html {
font: 300 2ch/1.2 'Segoe UI'
}
fieldset {
min-width: fit-content
}
.fields {
margin-top: 1rem;
}
output {
font-weight: 900;
}
menu {
display: flex;
align-items: center;
margin: 0.5rem 0 0.25rem;
}
button,
input {
display: inline-block;
font: inherit;
font-size: 100%;
}
button {
cursor: pointer;
border: 1.5px ridge lightgrey;
}
.numbers {
display: flex;
align-items: center;
margin: 1rem 0 0.5rem -40px;
}
.clear {
border: 0;
font-size: 1.25rem;
line-height: 1.25;
}
.right {
justify-content: flex-end;
}
.left {
padding-left: 0;
}
.number-3 {
width: 9rem;
}
.number-1 {
width: 3rem;
}
[class^="number-"] {
font-family: Consolas
}
.clear {
border: 0;
background: transparent;
}
label+label {
margin-left: 6px;
}
button:first-of-type {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
button:nth-of-type(2) {
border-radius: 0;
}
button:last-of-type {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.active {
outline: 2px lightblue solid;
outline-offset: -2px;
}
#foreman {
transform: translate(0, 1.5px)
}
.btn.remove {
display: block;
border-radius: 4px;
float: right;
}
<form id='phone'>
<fieldset class='main'>
<legend>Add Phone Numbers</legend>
<section class='fields'>
<fieldset>
<legend>Phone Number <output value='1'></output></legend>
<button class='btn remove' type='button'>Remove</button>
<label>Phone number is used for:</label>
<menu class='purpose select'>
<button class="btn priv" type='button'>Private</button>
<button class="btn work" type='button'>Work</button>
</menu>
<label>Select the type of phone:</label>
<menu class='type select'>
<button class="btn mob" type='button'>Mobile</button>
<button class="btn tel" type='button'>Telephone</button>
<button class="btn fax" type='button'>Fax</button>
</menu>
<menu class='numbers'>
<form name='numbers'>
<label>Number:&ThickSpace;</label>
<input name='phone' class='number-3' type="tel" placeholder="+27 85 223 5258" required>
<label>&ThickSpace;Ext.&ThickSpace;</label>
<input name='ext' class='number-1' type='number' placeholder='327'>
<button class='btn clear' type='button'>X</button>
</form>
</menu>
</fieldset>
</section>
<fieldset>
<menu class='right'>
<button class='btn cancel' type='button'>Cancel</button>
<button class='btn done'>Done</button>
<button class='btn add' type='button'>Add</button>
</menu>
</fieldset>
<footer>
<menu>
<input id='foreman' name="contact" type="checkbox">
<label for='foreman'>Display on foreman contact list?</label>
</menu>
</footer>
</fieldset>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

When load page , JS add event click for elements ( elements were created)
When you clone new elements ( those do not add event click) and event click of you not working on those elements
You are using Jquery then i suggest you code same as below :
$(document).on('click', ".btn_first_4", function () {
$(this).addClass("is_active");
$(".btn_second_4").removeClass("is_active");
});
//work btn
$(document).on('click', ".btn_second_4", function () {
$(this).addClass("is_active");
$(".btn_first_4").removeClass("is_active");
});
//Bottom 5 btns
$(document).on('click', ".btn_5", function () {
$(this).addClass("is_active");
$(".btn_6,.btn_7,.btn_8").removeClass("is_active");
})
$(document).on('click', ".btn_6", function () {
$(this).addClass("is_active");
$(".btn_5,.btn_7,.btn_8").removeClass("is_active");
})
$(document).on('click', ".btn_7", function () {
$(this).addClass("is_active");
$(".btn_5,.btn_6,.btn_8").removeClass("is_active");
})
$(document).on('click', ".btn_8", function () {
$(this).addClass("is_active");
$(".btn_5,.btn_6,.btn_7").removeClass("is_active");
})
function duplicate(){
const wrapper = document.getElementById("wrapper_1");
const clone = wrapper.cloneNode(true);
clone.id = "wrapper_2";
const main_wrapper = document.getElementById("main-wrapper");
main_wrapper.appendChild(clone)
}
function delete_el() {
const del_el = document.getElementById("wrapper_2");
del_el.remove();
}
.is_active {
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column-bottom phone">
<p class="para_txt">Phone</p>
<div id="main-wrapper">
<div id="wrapper_1" class="parentClass">
<div class="basic_infor">
<p>Select the nature of phone:</p>
<div class="parent_btns">
<button class="func_btns btn_first_4 " >Private</button>
<button class="func_btns btn_second_4" >Work</button>
</div>
</div>
<div class="basic_infor">
<p>Select the type of phone:</p>
<div class="parent_btns">
<button class="func_btns btn_5">Mobile</button>
<button class="func_btns btn_6 ">Telephone</button>
<button class="func_btns btn_7 ">Fax</button>
<button class="func_btns btn_8">Extension</button>
</div>
</div>
<div class="txt_area">
<input type="textarea" placeholder="+27 85 223 5258">
<span onclick="delete_el();">x</span>
</div>
</div>
</div>
<div class="btn_add">
<button class="repl_btns phone_repl" onclick="duplicate();">Add additional</button>
<p>Display on foreman contact list?</p>
<input type="checkbox" id="input_field" name="Phone_contact">
</div>
</div>

How do I iterate through multiple custom upload files buttons?

I have some code that works perfectly for grabbing and clicking a custom upload file button. The thing is I want it to duplicate this form 2 more times to have the user use 3 upload buttons in my overall form. So the user will be able to upload three files. My question is, how do I change my vanilla JavaScript so that instead of grabbing the one element, it grabs multiple elements? Do I use getElementsByClassName? And if I do how do I iterate through each form element individually to upload the file?
Upload form 1:
<input type="file" id="real-file" hidden="hidden" />
<button type="button" id="custom-button">CHOOSE A FILE</button>
<span id="custom-text">No file chosen, yet.</span>
Upload form 2:
<input type="file" id="real-file" hidden="hidden" />
<button type="button" id="custom-button">CHOOSE A FILE</button>
<span id="custom-text">No file chosen, yet.</span>
upload form 3:
<input type="file" id="real-file" hidden="hidden" />
<button type="button" id="custom-button">CHOOSE A FILE</button>
<span id="custom-text">No file chosen, yet.</span>
const realFileBtn = document.getElementById("real-file");
const customBtn = document.getElementById("custom-button");
const customTxt = document.getElementById("custom-text");
customBtn.addEventListener("click", function() {
realFileBtn.click();
});
realFileBtn.addEventListener("change", function() {
if (realFileBtn.value) {
customTxt.innerHTML = realFileBtn.value.match(
/[\/\\]([\w\d\s\.\-\(\)]+)$/
)[1];
} else {
customTxt.innerHTML = "No file chosen, yet.";
}
});
CSS
#custom-button {
padding: 10px;
color: white;
background-color: #009578;
border: 1px solid #000;
border-radius: 5px;
cursor: pointer;
}
#custom-button:hover {
background-color: #00b28f;
}
#custom-text {
margin-left: 10px;
font-family: sans-serif;
color: #aaa;
}

As suggested by #Taplar, you'll need to change IDs to classes and then somehow link the elements (I used data-file-input-id).
One of the possible solutions could be:
HTML:
<input type="file" class="real-file" id="first" hidden="hidden" />
<button type="button" class="custom-button" data-file-input-id="first" >CHOOSE A FILE</button>
<span class="custom-text" data-file-input-id="first">No file chosen, yet.</span>
<input type="file" class="real-file" id="second" hidden="hidden" />
<button type="button" class="custom-button" data-file-input-id="second">CHOOSE A FILE</button>
<span class="custom-text" data-file-input-id="second">No file chosen, yet.</span>
<input type="file" class="real-file" id="third" hidden="hidden" />
<button type="button" class="custom-button" data-file-input-id="third">CHOOSE A FILE</button>
<span class="custom-text" data-file-input-id="third">No file chosen, yet.</span>
JS:
// Grab only buttons with data-file-input-id attribute
const buttons = document.querySelectorAll("button[data-file-input-id]");
const fileInputs = document.querySelectorAll("input[type=file]");
Array.from(buttons).forEach(function (button) {
button.addEventListener("click", function () {
const correspondingInputId = button.getAttribute("data-file-input-id");
document.getElementById(correspondingInputId).click();
});
});
Array.from(fileInputs).forEach(function (fileInput) {
fileInput.addEventListener("change", function () {
const fileInputId = fileInput.id;
const correspondingTextField = document.querySelector(
'span[data-file-input-id="' + fileInputId + '"]'
);
if (fileInput.value) {
correspondingTextField.innerHTML = fileInput.value.match(
/[\/\\]([\w\d\s\.\-\(\)]+)$/
)[1];
} else {
correspondingTextField.innerHTML = "No file chosen, yet.";
}
});
});
CSS:
.custom-button {
padding: 10px;
color: white;
background-color: #009578;
border: 1px solid #000;
border-radius: 5px;
cursor: pointer;
}
.custom-button:hover {
background-color: #00b28f;
}
.custom-text {
margin-left: 10px;
font-family: sans-serif;
color: #aaa;
}

display current button of multiple set of buttons

I have a set of buttons where a js code selected the current button to display it differently.
What I would like to do is to have two sets of buttons, in which I can interact with the buttons in the different sets independently.
Like select the button "1" on the first set and "2" on the second set. In a perfect world, I would like to have only one function in js to do it for different sets. I don't know how to do it.
My one set of button is like this :
// Add active class to the current button (highlight it)
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
}
/* Style the active class, and buttons on mouse-over */
.active, .btn:hover {
background-color: #666;
color: white;
}
<div id="myDIV">
<button class="btn">1</button>
<button class="btn active">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
</div>

your question is unclear, is this answer a good one ?
this is about JS event delegation,
you should also use classList.toggle(), which allows to directly include the test
const DivAllButtons = document.getElementById('All-buttons')
DivAllButtons.onclick = ({target : clicked_Element }) =>
{
if (!clicked_Element.matches('button.btn')) return
clicked_Element.parentNode
.querySelectorAll('button.btn')
.forEach( bt =>
{
bt.classList.toggle( 'active', bt===clicked_Element )
});
}
#All-buttons > div {
margin: 1em;
}
.btn {
border : none;
outline : none;
padding : 10px 16px;
background-color : #f1f1f1;
cursor : pointer;
font-size : 18px;
}
.active,
.btn:hover {
background-color : #666;
color : white;
}
<div id="All-buttons">
<div>
<button class="btn">1</button> <button class="btn active">2</button>
<button class="btn">3</button> <button class="btn">4</button> <button class="btn">5</button>
</div>
<div>
<button class="btn">1</button> <button class="btn active">2</button>
<button class="btn">3</button> <button class="btn">4</button> <button class="btn">5</button>
</div>
<div>
<button class="btn">1</button> <button class="btn active">2</button>
<button class="btn">3</button> <button class="btn">4</button> <button class="btn">5</button>
</div>
<div>
<button class="btn">1</button> <button class="btn active">2</button>
<button class="btn">3</button> <button class="btn">4</button> <button class="btn">5</button>
</div>
<div>
<button class="btn">1</button> <button class="btn active">2</button>
<button class="btn">3</button> <button class="btn">4</button> <button class="btn">5</button>
</div>
</div>

Your question is not clear about what you want, but I guess this is what you want, I added another button in the following snippet, I change few things:
Remove the selector based on the ID and replace it with selector for class name document.querySelectorAll(".button-set") via querySelectorAll()
Loop though the button set (2 element in my snippet), and change the selector of the button for active class to the current div id since it is unique and allow us to target a specific set.
Add unique ID value for div group or set.
var sets = document.querySelectorAll(".button-set");
sets.forEach((el, i) => {
btns = el.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var button = document.querySelector(`#${el.id} .active`);
button.className = button.className.replace(" active", "");
this.className += " active";
});
}
});
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
}
/* Style the active class, and buttons on mouse-over */
.active, .btn:hover {
background-color: #666;
color: white;
}
<div id="myDIV" class="button-set">
<button class="btn">1</button>
<button class="btn active">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
</div>
<br />
<div id="myDIV2" class="button-set">
<button class="btn">1</button>
<button class="btn active">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
</div>

How can I place seperate json objects from the same file in seperate divs with a single ajax call?

I am very new to ajax calls and jquery so I know that this is horribly wrong but I have three divs and I have multiple json files each with three objects in them. The objects are called ying, neutral or yang and I am trying to place the ying neutral and yang objects in their corresponding ying neutral and yang divs
please show me how to rewrite my script to do what I would like it to do.
I have searched the internet far and wide for a specific example of taking a single json file breaking it out into multiple divs but couldn't find anything.
Thank you for reading and for any suggestions you may have.
here is the html and css
<style>
#categoryContainer{
text-align:center;
border: solid black 1px;
margin-bottom: 20px;
border-radius: 5px;
padding-bottom:20px;
}
.category{
display: inline-block;
width:33%;
box-sizing: border-box;
border: solid black 1px;
border-radius: 5px;
}
.foodBtnContainer{
text-align:center;
}
.foodBtn{
box-sizing: border-box;
width: 24%;
height: 56px;
border-radius: 20px;
box-shadow: none;
}
li{
list-style: none;
}
</style>
</head>
<body>
<div id="categoryContainer">
<h1>Categories</h1>
<div class="category" id="ying"><h2>Ying</h2></div>
<div class="category" id="neutral"><h2>Neutral</h2></div>
<div class="category" id="yang"><h2>Yang</h2></div>
</div>
<div class="foodBtnContainer">
<button class="foodBtn" id="vegetables" type="button">VEGETABLES</button>
<button class="foodBtn" id="fruit" type="button">FRUIT</button>
<button class="foodBtn" id="grains" type="button">GRAINS</button>
<button class="foodBtn" id="beans" type="button">BEANS</button>
<button class="foodBtn" id="nuts" type="button">NUTS</button>
<button class="foodBtn" id="oils" type="button">OILS</button>
<button class="foodBtn" id="spreads" type="button">SPREADS</button>
<button class="foodBtn" id="sweeteners" type="button">SWEETENERS</button>
<button class="foodBtn" id="seasonings" type="button">SEASONINGS</button>
<button class="foodBtn" id="seaweed" type="button">SEAWEED</button>
<button class="foodBtn" id="animal" type="button">ANIMAL</button>
<button class="foodBtn" id="seafoodShellfish" type="button">SEAFOOD/SHELLFISH</button>
<button class="foodBtn" id="supplementsHerbs" type="button">SUPPLEMENTS/HERBS</button>
<button class="foodBtn" id="teaBeverages" type="button">TEA/BEVERAGES</button>
<button class="foodBtn" id="alcohol" type="button">ALCOHOL</button>
</div>
and here is a very rough pseudo-code of what I am trying to accomplish with my script
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
$("#vegetables").click(function(){
$.ajax({
dataType: "json",
url: "veggies.json",
data: 'json',
success: function{
if(object=="yang"){
.appendTo( "#yang" );
}
else if(object=="neutral"){
.appendTo( "#neutral" );
}
else if(object=="ying"){
.appendTo( "#ying" );
}
}
});
$("#vegetables").unbind('click');
});
});
and here is the json
ying{
"one": "cranberries",
"two": "cucumbers",
"three": "dandelion greens"
}
neutral{
"one": "alfalfa sprouts",
"two": "arrow root",
"three": "artichoke"
}
yang{
"one": "plantains",
"two": "plums",
"three": "pomegranates"
}

<style>
#categoryContainer{
text-align:center;
border: solid black 1px;
margin-bottom: 20px;
border-radius: 5px;
padding-bottom:20px;
}
.category{
display: inline-block;
width:33%;
box-sizing: border-box;
border: solid black 1px;
border-radius: 5px;
}
.foodBtnContainer{
text-align:center;
}
.foodBtn{
box-sizing: border-box;
width: 24%;
height: 56px;
border-radius: 20px;
box-shadow: none;
}
li{
list-style: none;
}
</style>
</head>
<body>
<div id="categoryContainer">
<h1>Categories</h1>
<div class="category" id="ying"><h2>Ying</h2></div>
<div class="category" id="neutral"><h2>Neutral</h2></div>
<div class="category" id="yang"><h2>Yang</h2></div>
</div>
<div class="foodBtnContainer">
<button class="foodBtn" id="vegetables" type="button">VEGETABLES</button>
<button class="foodBtn" id="fruit" type="button">FRUIT</button>
<button class="foodBtn" id="grains" type="button">GRAINS</button>
<button class="foodBtn" id="beans" type="button">BEANS</button>
<button class="foodBtn" id="nuts" type="button">NUTS</button>
<button class="foodBtn" id="oils" type="button">OILS</button>
<button class="foodBtn" id="spreads" type="button">SPREADS</button>
<button class="foodBtn" id="sweeteners" type="button">SWEETENERS</button>
<button class="foodBtn" id="seasonings" type="button">SEASONINGS</button>
<button class="foodBtn" id="seaweed" type="button">SEAWEED</button>
<button class="foodBtn" id="animal" type="button">ANIMAL</button>
<button class="foodBtn" id="seafoodShellfish" type="button">SEAFOOD/SHELLFISH</button>
<button class="foodBtn" id="supplementsHerbs" type="button">SUPPLEMENTS/HERBS</button>
<button class="foodBtn" id="teaBeverages" type="button">TEA/BEVERAGES</button>
<button class="foodBtn" id="alcohol" type="button">ALCOHOL</button>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#vegetables").click(function(){
$.ajax({
dataType: "json",
url: "veggies.json",
data: 'json',
type: 'GET',
success: function(data) {
// this will return a json object
// so i need to loop around
$.each(data, function(i, properties){
// i => index like ying, yang ,neutral
// since properties also is a object
$.each(properties, function(x, mydata) {
// x => index like one two three
// mydata => is value => cranberries
$('#' + i).append(mydata);
});
})
}
});
$("#vegetables").unbind('click');
});
});
</script>
</body>
and here is the veggies.json
{
"ying": {
"one": "cranberries",
"two": "cucumbers",
"three": "dandelion greens"
},
"neutral": {
"one": "alfalfa sprouts",
"two": "arrow root",
"three": "artichoke"
},
"yang": {
"one": "plantains",
"two": "plums",
"three": "pomegranates"
}
}
and you need to put the html file same with the location of the veggies.json
hope it would give you idea on how to make it better according to what you need to accomplish

JavaScript and OnClick Events, making classes hidden

I am trying to make a "calculator" as practice as I am learning Javascript. Basically, the user makes a password. After the password is made the user needs to enter the password again. If the passwords match, then a calculator will appear and the password box will disappear. The code works up until re entering the password, I can not get past this part and am stumped! Any advice would be appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript">
var pwd = prompt("Please enter your FAB password here", "");
function DisplayCalc(pwd2) {
var NewPwd = document.getElementById(pwd2);
if (Newpwd == pwd) {
document.getElementsByClassName(NotVisibleClass).style.visibility = 'visible';
document.getElementsByClassName(VisibleClass).style.visibility = 'hidden';
}
else {
alert("Wrong Password Twinkle Toes!!");
}
}
</script>
<style>
/* Need to style title to have a different color for every letter*/
.Red{
color: #f00;
}
.Orange{
color: orange;
}
.Yellow{
color: yellow;
}
.Green{
color: green;
}
.Blue{
color: blue;
}
.Purple{
color: purple;
}
/*Need to have the background change colors*/
.ResDivBy7{
background-color: red;
}
.ResDivBy6{
background-color: orange;
}
.ResDivBy5{
background-color: yellow;
}
.ResDivBy4{
background-color: green;
}
.ResDivBy3{
background-color: blue;
}
.ResDivBy2{
background-color: purple;
}
/*Need to hide elements */
.NotVisibleClass{
visibility: hidden;
}
/*Need to show elements*/
.VisibleClass{
visibility: visible;
}
</style>
<title>Secret Rainbow Calculator!!!</title>
</head>
<body>
<div class="header">
<h1>
<span class="Red">S</span><span class="Orange">E</span><span class="Yellow">C</span><span class="Green">R</span><span class="Blue">E</span><span class="Purple">T</span>
<span class="Red">R</span><span class="Orange">A</span><span class="Yellow">I</span><span class="Green">N</span><span class="Blue">B</span><span class="Purple">O</span><span class="Red">W</span>
<span class="Orange">C</span><span class="Yellow">A</span><span class="Green">L</span><span class="Blue">C</span><span class="Purple">U</span><span class="Red">L</span><span class="Orange">A</span><span class="Yellow">T</span><span class="Green">O</span><span class="Blue">R</span>
</h1>
</div>
<div class="VisibleClass">
<form action="">
<fieldset>
<label>Please Enter Your FABULOUS Password!</label>
<input type="password"
id="pwd2" />
<button type="button" onClick= DisplayCalc(pwd2)>
Click Me When Done!</button>
</fieldset>
</form>
</div>
<div class="NotVisibleClass">
<form action="">
<fieldset>
<input type="text" id="calcScreen" readonly="readonly"/>
<br>
<button type="button"> 1 </button>
<button type="button"> 2 </button>
<button type="button"> 3 </button>
<button type="button"> 4 </button>
<br>
<button type="button"> 5 </button>
<button type="button"> 6 </button>
<button type="button"> 7 </button>
<button type="button"> 8 </button>
<br>
<button type="button"> Enter </button>
<button type="button"> 0 </button>
<button type="button"> 9 </button>
<button type="button"> Clear </button>
<br>
<button type="button"> + </button>
<button type="button"> - </button>
<button type="button"> * </button>
<button type="button"> / </button>
</fieldset>
</form>
</div>
</body>
</html>

My console says that 'Newpwd' is not defined when comparing (Newpwd == pwd). Looking at your source, you need to capitalize the 'P' in 'Newpwd.'

<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript">
var pwd = prompt("Please enter your FAB password here", "");
function DisplayCalc(pwd2) {
var NewPwd = document.getElementById(pwd2).value;
if (NewPwd == pwd) {
document.getElementsByClassName('NotVisibleClass')[0].style.visibility = 'visible';
document.getElementsByClassName('VisibleClass')[0].style.visibility = 'hidden';
}
else {
alert("Wrong Password Twinkle Toes!!");
}
}
</script>
<style>
/* Need to style title to have a different color for every letter*/
.Red{
color: #f00;
}
.Orange{
color: orange;
}
.Yellow{
color: yellow;
}
.Green{
color: green;
}
.Blue{
color: blue;
}
.Purple{
color: purple;
}
/*Need to have the background change colors*/
.ResDivBy7{
background-color: red;
}
.ResDivBy6{
background-color: orange;
}
.ResDivBy5{
background-color: yellow;
}
.ResDivBy4{
background-color: green;
}
.ResDivBy3{
background-color: blue;
}
.ResDivBy2{
background-color: purple;
}
/*Need to hide elements */
.NotVisibleClass{
visibility: hidden;
}
/*Need to show elements*/
.VisibleClass{
visibility: visible;
}
</style>
<title>Secret Rainbow Calculator!!!</title>
</head>
<body>
<div class="header">
<h1>
<span class="Red">S</span><span class="Orange">E</span><span class="Yellow">C</span><span class="Green">R</span><span class="Blue">E</span><span class="Purple">T</span>
<span class="Red">R</span><span class="Orange">A</span><span class="Yellow">I</span><span class="Green">N</span><span class="Blue">B</span><span class="Purple">O</span><span class="Red">W</span>
<span class="Orange">C</span><span class="Yellow">A</span><span class="Green">L</span><span class="Blue">C</span><span class="Purple">U</span><span class="Red">L</span><span class="Orange">A</span><span class="Yellow">T</span><span class="Green">O</span><span class="Blue">R</span>
</h1>
</div>
<div class="VisibleClass">
<form action="">
<fieldset>
<label>Please Enter Your FABULOUS Password!</label>
<input type="password"
id="pwd2" />
<button type="button" onClick="DisplayCalc('pwd2')">
Click Me When Done!</button>
</fieldset>
</form>
</div>
<div class="NotVisibleClass">
<form action="">
<fieldset>
<input type="text" id="calcScreen" readonly="readonly"/>
<br>
<button type="button"> 1 </button>
<button type="button"> 2 </button>
<button type="button"> 3 </button>
<button type="button"> 4 </button>
<br>
<button type="button"> 5 </button>
<button type="button"> 6 </button>
<button type="button"> 7 </button>
<button type="button"> 8 </button>
<br>
<button type="button"> Enter </button>
<button type="button"> 0 </button>
<button type="button"> 9 </button>
<button type="button"> Clear </button>
<br>
<button type="button"> + </button>
<button type="button"> - </button>
<button type="button"> * </button>
<button type="button"> / </button>
</fieldset>
</form>
</div>
</body>
</html>

In the follwoing section :
if (Newpwd == pwd) {
document.getElementsByClassName(NotVisibleClass).style.visibility = 'visible';
document.getElementsByClassName(VisibleClass).style.visibility = 'hidden';
}
change 'Newpwd == pwd' to 'NewPwd.value == pwd'
Your code will still need some css related changes.
I would suggest you start using some developer tools (like the Chrome Browser's developer tools. Simply press F12 on the desired page, in Google Chrome, to open the Developer Tools page, and explore you code.)

As Justin H mentioned, the 'P' in your variable 'NewPwd' that's being used in your if statement has a lowercase P. JavaScript is a case sensitive language and there fore Newpwd is undefined. Capitalize the P in your if statement and you should be back up and running. In addition, you're just getting the document element by ID which will not return it's value. It will return an object. So, you also need to modify the defnition of the your variable NewPwd.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript">
var pwd = prompt("Please enter your FAB password here", "");
function DisplayCalc(pwd2) {
//Variable NewPwd with capital 'P'
var NewPwd = document.getElementById(pwd2).value;
//Use of Variable NewPwd used without capitalization of 'P'
if (Newpwd == pwd) { //Newpwd == pwd returns undefined
document.getElementsByClassName(NotVisibleClass).style.visibility = 'visible';
document.getElementsByClassName(VisibleClass).style.visibility = 'hidden';
}
else {
alert("Wrong Password Twinkle Toes!!");
}
}
</script>
<style>
/* Need to style title to have a different color for every letter*/
.Red{
color: #f00;
}
.Orange{
color: orange;
}
.Yellow{
color: yellow;
}
.Green{
color: green;
}
.Blue{
color: blue;
}
.Purple{
color: purple;
}
/*Need to have the background change colors*/
.ResDivBy7{
background-color: red;
}
.ResDivBy6{
background-color: orange;
}
.ResDivBy5{
background-color: yellow;
}
.ResDivBy4{
background-color: green;
}
.ResDivBy3{
background-color: blue;
}
.ResDivBy2{
background-color: purple;
}
/*Need to hide elements */
.NotVisibleClass{
visibility: hidden;
}
/*Need to show elements*/
.VisibleClass{
visibility: visible;
}
</style>
<title>Secret Rainbow Calculator!!!</title>
</head>
<body>
<div class="header">
<h1>
<span class="Red">S</span><span class="Orange">E</span><span class="Yellow">C</span><span class="Green">R</span><span class="Blue">E</span><span class="Purple">T</span>
<span class="Red">R</span><span class="Orange">A</span><span class="Yellow">I</span><span class="Green">N</span><span class="Blue">B</span><span class="Purple">O</span><span class="Red">W</span>
<span class="Orange">C</span><span class="Yellow">A</span><span class="Green">L</span><span class="Blue">C</span><span class="Purple">U</span><span class="Red">L</span><span class="Orange">A</span><span class="Yellow">T</span><span class="Green">O</span><span class="Blue">R</span>
</h1>
</div>
<div class="VisibleClass">
<form action="">
<fieldset>
<label>Please Enter Your FABULOUS Password!</label>
<input type="password"
id="pwd2" />
<button type="button" onClick= DisplayCalc(pwd2)>
Click Me When Done!</button>
</fieldset>
</form>
</div>
<div class="NotVisibleClass">
<form action="">
<fieldset>
<input type="text" id="calcScreen" readonly="readonly"/>
<br>
<button type="button"> 1 </button>
<button type="button"> 2 </button>
<button type="button"> 3 </button>
<button type="button"> 4 </button>
<br>
<button type="button"> 5 </button>
<button type="button"> 6 </button>
<button type="button"> 7 </button>
<button type="button"> 8 </button>
<br>
<button type="button"> Enter </button>
<button type="button"> 0 </button>
<button type="button"> 9 </button>
<button type="button"> Clear </button>
<br>
<button type="button"> + </button>
<button type="button"> - </button>
<button type="button"> * </button>
<button type="button"> / </button>
</fieldset>
</form>
</div>
</body>
</html>