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>
Related
I am trying to develop a simple Javascript function which highlights the chosen answer to red if the answer is incorrect, and green if correct. If another incorrect answer is chosen, the previous incorrect answer must switch to neutral background and the new incorrect answer must be in red. Also we must have the same functionality for multiple questions - the red and green for previous questions must remain as we move on to new questions.
I have an example here, but can someone help me add the above functionality?
HTML:
1. A sum of money is to be distributed among P, Q, R, and S in the proportion 5:2:4:3 respectively. If R gets ₹1000 more than S, what is the share of Q (in ₹)?
<div id="item" > </div>
<button id="incorrect" class="btn" name="q1" onClick="click_action();"> 500</button>
<button id="incorrect" class="btn" name="q1" onClick="click_action();"> 1000</button>
<button id="incorrect" class="btn" name="q1" onClick="click_action();"> 1500</button>
<button id="correct" class="btn" name="q1" onClick="click_action();"> 2000</button>
<br><br>
2. A trapezium has vertices marked as P, Q, R and S (in that order anticlockwise). The side PQ is parallel to side SR. Further, it is given that, PQ = 11 cm, QR = 4 cm, RS = 6 cm and SP = 3 cm. What is the shortest distance between PQ and SR (in cm)?
<br>
<div id="answer-buttons" class="btn-grid">
<button id="correct" class="btn" name="q2" onClick="click_action();"> 1.80 </button>
<button id="incorrect" class="btn" name="q2" onClick="click_action();"> 2.40 </button>
<button class="btn" id="incorrect" name="q2" onClick="click_action();"> 4.20 </button>
<button class="btn" id="incorrect" name="q2" onClick="click_action();"> 5.76 </button>
</div>
CSS
.btn {
--hue: var(--hue-neutral);
border: 10px solid hsl(var(--hue), 100%, 30%);
background-color: blue;
border-radius: 100px;
padding: 10px 30px;
color: white;
outline: none;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 10px;
margin: 20px 0;
}
JS
function click_action() {
var incorrect = document.getElementById("incorrect");
var correct = document.getElementById("correct");
if (incorrect.style.background != "red") {
incorrect.style.background = "red";
}
else if (correct.style.background != "green") {
correct.style.background = "green";
}
}
Though this not not the best way to do but you can achive something similar like this. And I will recommend you to view some articles regarding how to create quiz in javascript:
let incorrectarr = [];
let correctAnswer = [];
//getting all buttons
let buttons = document.querySelectorAll('.btn');
//looping through each button and implement the function
buttons.forEach(button => {
button.addEventListener('click', function() {
incorrectarr.push(button)
checkFunction(button);
showAnswer();
incorrectarr.forEach(e=>
e.style.background = 'red')
});
});
function checkFunction(a) {
//looping through button and keep the background color blue
buttons.forEach(button => {
button.style.background = "blue";
});
//if you console.log(id) you will get the id and according to the id change its style
if(a.id === "correct"){
a.style.background = "green"
}
if(a.id === "incorrect"){
a.style.background = "red"
}
}
let item = document.querySelectorAll('.item');
function showAnswer(){
item.forEach(i=>{
// console.log(i.children['correct'])
i.addEventListener('click',function(){
let correct = i.children['correct'];
correctAnswer.push(correct);
correctAnswer.forEach(e=>{
e.style.background = 'green'
})
})
})
}
.btn {
--hue: var(--hue-neutral);
border: 10px solid hsl(var(--hue), 100%, 30%);
background-color: blue;
border-radius: 100px;
padding: 10px 30px;
color: white;
outline: none;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 10px;
margin: 20px 0;
}
<body>
<div class="questions">
<p> 1. A sum of money is to be distributed among P, Q, R, and S in the proportion 5:2:4:3 respectively. If R gets ₹1000 more than S, what is the share of Q (in ₹)?</p>
<div class="item">
<button id="incorrect" class="btn"> 500</button>
<button id="incorrect" class="btn"> 1000</button>
<button id="incorrect" class="btn"> 1500</button>
<button id="correct" class="btn"> 2000</button>
</div>
</div>
<div class="questions" >
<p>2. A trapezium has vertices marked as P, Q, R and S (in that order anticlockwise). The side PQ is parallel to side SR. Further, it is given that, PQ = 11 cm, QR = 4 cm, RS = 6 cm and SP = 3 cm. What is the shortest distance between PQ and SR (in cm)?
</p>
<div class="item">
<button id="correct" class="btn"> 1.80 </button>
<button id="incorrect" class="btn"> 2.40 </button>
<button class="btn" id="incorrect"> 4.20 </button>
<button class="btn" id="incorrect"> 5.76 </button>
</div>
</div>
<script src="src/index.js">
</script>
</body>
If you haven't understand any single line of it let me know.
id attribute must be unique in html. You have the same id to more than one button. You can make a check like data-correct="1" and data-correct="0". Then you should move the event object to your javascript function and change the background color according to the equivalence of event.target.getAttribute("data-correct") to equals "1"
update your html:
<button class="btn" data-correct="0" name="q1"> 500</button>
<button class="btn" data-correct="0" name="q1"> 1000</button>
<button class="btn" data-correct="1" name="q1"> 1500</button>
<button class="btn" data-correct="0" name="q1"> 2000</button>
and init click listeners:
function init() {
const buttons = [...document.getElementsByClassName("btn")];
buttons.forEach(button => {
button.addEventListener("click", click_action)
})
}
init()
and click_action function
function click_action(e) {
const correctAttribute = e.target.getAttribute("data-correct");
if(Boolean(+correctAttribute)) {
e.target.style.background = "green";
}else {
e.target.style.background = "red";
}
}
now green when clicking on correct answers and red when clicking on wrong answers
I have an image displayed in my website. and I want to write a JavaScript code to change that image when clicking on a given button and I want to get another image displayed when clicking on another button so on and so forth. Let me show you how I have tried to solve this problem:
HTML:
<div class ="container image">
<figure>
<img src="alpaca/backgrounds/blue50.png" id="picture" class ="show1" />
</figure></div>
Javascript:
const image = document.getElementById("picture");
function showImg() {
image.src = "blue50.png";
//hide previously shown image
for ( i = 1; i < 18; i++) {
var obj = document.getElementById( "picture" + i );
if (obj != null)
obj.className = 'hide1';
}
var obj = document.getElementById( "picture" + id );
if (obj != null)
obj.className = 'show1';
}
CSS:
.container {
position: absolute;
bottom:60px;
left: -140px;
}
.image {
position:absolute;
}
.eye {
position:absolute;
z-index: 10;
}
.mouth {
position:absolute;
z-index: 8;
}
.nose {
position:absolute;
z-index: 8;
}
.show1{display:block;}
.hide1{display:none;}
.leftButton {
color: black;
text-align:right;
font-size:35px;
font-family: 'sofia';
border-radius: 30px;
background-color:rgb(252, 228, 228);
position:absolute;
bottom: -410px;
left:200px;
}
You see, what I need is for instance , when clicking on the button "blue60" of "Backgrounds" I should get another background image and this as to be the same for others buttons. Right now, when clicking on the button "blue60" I get nothing. Please , help me solve this problem.
<div id="Backgrounds" ><p class="para">Backgrounds</p>
<button type="button" onclick="showImg(1)" src="Alpaca/backgrounds/blue50" class="rightSubButton">Blue50</button>
<button type="button" onclick="showImg(2)" src="Alpaca/backgrounds/blue60" class ="rightSubButton">Blue60</button>
<button type="button" onclick="showImg(3)" src="Alpaca/backgrounds/blue70" class ="rightSubButton">Blue70</button>
<button type="button" onclick="showImg(4)" class ="rightSubButton">Darkblue30</button>
<button type="button" onclick="showImg(5)" class ="rightSubButton">Darkblue50</button>
<button type="button" onclick="showImg(6)" class ="rightSubButton">Darkblue70</button>
<button type="button" onclick="showImg(7)" class="rightSubButton">Green50</button>
<button type="button" onclick="showImg(8)" class ="rightSubButton">Green60</button>
<button type="button" onclick="showImg(9)" class ="rightSubButton">Green70</button>
<button type="button" onclick="showImg(10)" class ="rightSubButton">Grey40</button>
<button type="button" onclick="showImg(11)" class ="rightSubButton">Grey70</button>
<button type="button" onclick="showImg(12)" class ="rightSubButton">Grey80</button>
<button type="button" onclick="showImg(13)"class ="rightSubButton">Red50</button>
<button type="button" onclick="showImg(14)"class ="rightSubButton">Red60</button>
<button type="button" onclick="showImg(15)"class ="rightSubButton">Red70</button>
<button type="button" onclick="showImg(16)"class ="rightSubButton">Yellow50</button>
<button type="button" onclick="showImg(17)"class ="rightSubButton">Yellow60</button>
<button type="button" onclick="showImg(18)"class ="rightSubButton">Yellow70</button>
</div>
<div id="Ears" ><p class="para">Ears</p>
<button type="button" class="rightSubButton">Default</button>
<button type="button" class ="rightSubButton">Tilt-backward</button>
<button type="button" class ="rightSubButton">Tilt-forward</button>
</div>
You can change the src property of the desired HTMLImageElement in order to change its image:
const image = document.getElementById('...');
function showImg(number) {
image.src = '...'; // Path or URL to image
}
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>
I have problem with removing div containing button. First I clone and add button, then change its class from 'add' to 'remove'. Then I try to remove div containing button with 'remove' but I can't access remove functions.
<div class="margin"></div>
<div class='new'>
<button type="button" class="btn btn-success add"><i class="fas fa-plus"></i></button>
</div>
<script>
$(document).ready(function() {
var div = document.getElementById('new');
$(".add").click(function(){
clone = div.cloneNode(true);
$(clone).insertAfter(".margin");
$("button.add:not(:last)).removeClass('add').addClass('remove');
$(".remove").click(function(){
console.log('inside')
//$(this).parent('div').remove();
});
});
</script>
document.getElementById('new') ... ur element does not have an ID. Its class-name is 'new' but not its ID. Some corrections should make it work:
$(document).ready(function() {
var div = document.getElementById('new');
$(".add").click(function(){
clone = div.cloneNode(true);
$(clone).insertAfter(".margin");
$("button.add:not(:last)").removeClass('add').addClass('remove');
$(".remove").click(function(){
console.log('inside')
//$(this).parent('div').remove();
});
})
});
.add {
background: green;
}
.remove {
background: red;
}
button {
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="new">
<button type="button" class="btn btn-success add">
<i class="fas fa-plus"></i> new
</button>
</div>
<div class="margin"></div>
Edit:
Is there a more elegant way to do this?
Maybe like so:
$('.add').on('click', function() {
$(this).clone()
.toggleClass('add remove')
.on('click', function() {
$(this).remove()
})
.prependTo('#new');
})
.add {
background: green;
}
.remove {
background: red;
}
button {
color: white;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="new">
<button type="button" class="btn btn-success add">
<i class="fas fa-plus"></i> new
</button>
</div>
I have created a form with an add and delete button :
<p-growl [(value)]="msgs"></p-growl>
<div class="center" appMcard>
<form [formGroup]="GroupRMPM_FG">
<div formArrayName="GroupId_Name" *ngFor="let control of GroupRMPM_FG.controls.GroupId_Name.controls; let i= index">
<input type="text" pInputText [formControl]="control.controls.Group_Id_Name"/>
<button pButton type="button" class="delete-btn " *ngIf="GroupRMPM_FG.controls.GroupId_Name.controls.length > 1" (click)="deleteGroup(i)" icon="fa-minus" >
</button>
<button *ngIf="GroupRMPM_FG.controls.GroupId_Name.controls.length == i+1" pButton type="button" (click)="addNewGroup()" icon="fa-plus formcontainer" class="add-btn formcontainer"></button>
</div>
</form>
</div>
CSS
.center {
width: 40%;
height : 100%;
min-height: 40vh;
margin:auto;
text-align: center;
vertical-align: center;
background-color: #F3F3F3;
padding: 20px;
}
input {
font-family: 'bnppSans';
}
.delete-btn {
background-color: #E61D00;
border-color: #E61D00;
}
.add-btn {
background-color: #24b3c7;
border-color: #24b3c7;
}
.delete-btn:hover {
background-color: #c61a01 !important;
border-color: #c61a01 !important;
}
Actually here's what I get
The problem is when I add new fields to the text-align: center in center class, it is not working as expected. I would want the input to be centered like the first field and the buttons get shifted to the right
Your CSS work perfect as it has to, you have to add dummy html element like button/div when there is no second button at right side.
<form [formGroup]="GroupRMPM_FG">
<div formArrayName="GroupId_Name" *ngFor="let control of GroupRMPM_FG.controls.GroupId_Name.controls; let i= index">
<input type="text" pInputText [formControl]="control.controls.Group_Id_Name"/>
<button pButton type="button" class="delete-btn " *ngIf="GroupRMPM_FG.controls.GroupId_Name.controls.length > 1" (click)="deleteGroup(i)" icon="fa-minus" >
</button>
<button *ngIf="GroupRMPM_FG.controls.GroupId_Name.controls.length == i+1" pButton type="button" (click)="addNewGroup()" icon="fa-plus formcontainer" class="add-btn formcontainer"></button>
<----add dummy element here---->
<button *ngIf="GroupRMPM_FG.controls.GroupId_Name.controls.length != i+1" pButton type="button" class="dummyElement"></button>
</div>
</form>
CSS:
.dummyElement,.dummyElement:hover{
background-color:transparent;
color:transparent;
border-color:transparent;
pointer-events: none;
}
Note: Anyway you have to hide new dummy element and set to default cursor.
Here is working DEMO of my above answer.
.center{
text-align:center;
width:100%;
}
.dummyButton{
background-color:transparent;
color:transparent;
border-color:transparent;
pointer-events: none;
}
<div class='center'>
<div>
<input type='text'><input type="button" value="click"><input type="button" value="click" class="dummyButton">
<br>
<input type='text'><input type="button" value="click"><input type="button" value="click" class="dummyButton">
<br>
<input type='text'><input type="button" value="click"><input type="button" value="click">
<br>
</div>
</div>