Develop Reference

How to add CSS after click through javascript and remove it if not clicked

I have encountered a problem with javascript clicking to change CSS!
I hope that the outer frame and text of the clicked option can be thickened after clicking, but the ones that are not selected should not be thickened! I
have tried several ways of writing, but I still don't know how To complete this requirement, I hope to get everyone's help, thank you.
let plan = document.querySelector('.plan');
let price = document.querySelector('.price');
let item = document.querySelectorAll('.item');
for (var i = 0; i < item.length; i++) {
item[i].addEventListener('click', showplan, false);
}
function showplan(e) {
//Originally intended to increase this way, but it seems that it can't be written like this
// e.target.closesst('li').classList.add('bold')
// e.target.closesst('h2').classList.add('bold')
const planSelected = e.target.closest('li').querySelector('h2');
const priceSelected = e.target.closest('li').querySelector('p');
plan.textContent = planSelected.textContent;
price.textContent = priceSelected.textContent;
}
#charset "UTF-8";
.product＿list {
display: flex;
}
.product＿list .item {
border: 1px solid #ccc;
border-radius: 6px;
text-align: center;
padding: 20px;
margin: 20px;
}
.product＿list .item h2 {
margin-bottom: 16px;
}
.product＿list .item:hover {
border: 1px solid #222;
}
.show {
border: 2px solid blue;
padding: 20px;
}
.bold {
border: 3px solid;
font-weight: 900;
}
<ul class="product＿list">
<li class="item">
<h2>coke</h2>
<p>$100</p>
</li>
<li class="item">
<h2>beef</h2>
<p>$600</p>
</li>
</ul>
<h2 class="show">Your food of choice is <span class="plan"></span>The total price is<span class="price"></span></h2>

You need to toggle the class, you can do that by removing it from every item and only setting it to the selected one:
item.forEach(el => el.classList.remove('active'))
e.currentTarget.classList.add('active')
Also you have a CSS specificity issue:
when using only .bold, the border would be overriden by .product＿list .item
Note, try using currentTarget
const plan = document.querySelector('.plan');
const price = document.querySelector('.price');
const item = document.querySelectorAll('.item');
function showplan(e) {
const target = e.currentTarget;
const closestLi = target.closest('li');
const planSelected = closestLi.querySelector('h2');
const priceSelected = closestLi.querySelector('p');
item.forEach(el => el.classList.remove('active'))
target.classList.add('active')
plan.textContent = planSelected.textContent;
price.textContent = priceSelected.textContent;
}
item.forEach(el => el.addEventListener('click', showplan));
#charset "UTF-8";
.product＿list {
display: flex;
}
.product＿list .item {
border: 1px solid #ccc;
border-radius: 6px;
text-align: center;
padding: 20px;
margin: 20px;
}
.product＿list .item h2 {
margin-bottom: 16px;
}
.product＿list .item:hover,
{
border: 1px solid #222;
}
.product＿list .active {
border: 3px solid red;
font-weight: 900;
color: red;
}
.show {
border: 2px solid blue;
padding: 20px;
}
<ul class="product＿list">
<li class="item">
<h2>coke</h2>
<p>$100</p>
</li>
<li class="item">
<h2>beef</h2>
<p>$600</p>
</li>
</ul>
<h2 class="show">Your food of choice is <span class="plan"></span>The total price is<span class="price"></span></h2>

How to add CSS after click through javascript and remove it if not clicked?
Suppose we have a class"item",we want change "h1"
add class:
e.currentTarget.classList.add('item')
remove class:
e.currentTarget.classList.remove('item')
toggle class:
e.currentTarget.classList.toggle('item')
toggle means:
(If h1 has this class,remove,if not,add)

With jQuery, two :radios and their corresponding labels:
var $plan = $('.plan');
var $price = $('.price');
var $item = $('.item');
$('.item').on('click', showplan);
function showplan(e) {
const plan = $(this).find('h2').text();
const price = $(this).find('p').text();
$plan.text(plan);
$price.text(price);
}
#charset "UTF-8";
.product＿list {
display: flex;
}
.product＿list .item {
border: 1px solid #ccc;
border-radius: 6px;
text-align: center;
padding: 20px;
margin: 20px;
cursor: pointer;
}
.product＿list input {
display: none;
}
.product＿list .item h2 {
margin-bottom: 16px;
}
.product＿list .item:hover {
border: 1px solid #222;
}
.show {
border: 2px solid blue;
padding: 20px;
}
.product＿list input:checked + label {
outline: 2px solid black; /* Prevent jumping. */
border: 1px solid black;
font-weight: 900;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product＿list">
<input type="radio" name="product" id="coke">
<label class="item" for="coke">
<h2>coke</h2>
<p>$100</p>
</label>
<input type="radio" name="product" id="beef">
<label class="item" for="beef">
<h2>beef</h2>
<p>$600</p>
</label>
</div>
<h2 class="show">Your food of choice is <span class="plan">?</span>. The total price is <span class="price">?</span>.</h2>

img form with overlay function

I have a picture, which should open an overlay on click.
The overlay should be closed by a click as well.
I had an almost working version with a button, but the picture was shifted.
I tried a form function and it looks much better, but I only see the overlay flickering before it's disappearing. So the onclick function doesn't work anymore.
function on() {
document.getElementById("overGeld").style.display = "block";
}
function off() {
document.getElementById("overGeld").style.display = "none";
}
css: #overGeld {
display: none;
width: 380px;
height: 350px;
background-color: aliceblue;
position: absolute;
border: none;
margin-left: -50px;
padding: 10px;
line-height: 130%;
}
<div id="spendMö">
<form class="bildbt" onclick="on()">
<input type="image" class="bilder" id="geld" src="hund-geld.jpg">
</form>
<div id="overGeld" onclick="off()">
<a>.....</a>
</div>

input type="image" is a submit button -
you need to use <imgor <button type="button" or a link with a preventDefault
document.getElementById("spendMö").addEventListener("click", function(e) {
let imgStyle = document.getElementById("overGeld").style;
imgStyle.display = imgStyle.display === "block" ? "none" : "block";
})
#overGeld {
display: none;
width: 380px;
height: 350px;
top: 100px;
background-color: aliceblue;
position: absolute;
border: none;
margin-left: -50px;
padding: 10px;
line-height: 130%;
}
<div id="spendMö">
<img class="bilder" id="geld" src="https://previews.123rf.com/images/helga1981/helga19811605/helga1981160500142/56492101-hund-in-den-gl%C3%A4sern-h%C3%A4lt-in-seine-pfoten-eine-menge-geld-isoliert-auf-wei%C3%9Fem-hintergrund.jpg">
<div id="overGeld">
Over Geld
</div>
</div>

How to show another div when clicking on a div?

Good afternoon ,
I know this question has been asked a lot of times here, but all the answers there are not working for the problem I have.
I have a div called .title3 . When the user clicks it I want another div called .Content3 to be shown . But unfortunatelly it doesn't work the way I want to.
Here is a part of my html code where I found this problem :
<body style="background-color:#171717">
<div class="pseudo3">
<div class="one3">
<div class="Content3">
<p class="close">X</p>
<form action="order.php">
<input type="text" value="First & Last Name">
<input type="email" value="Your e-mail">
<input type="text" value="Your phone number">
<textarea>Write your feedback here</textarea>
<button>Send</button>
</form>
</div>
<div onmouseclick="showDiv()" class="title3">
FEEDBACK
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
function showDiv() {
var x = document.getElementsByClassName("title3");
if ( x.click === true ){
document.getElementsByClassName("Content3").style.display = "block";
}
}
</script>
</body>
CSS:
/* The Form Style */
form {
width: 100%;
height: 100%;
}
form input {
width: 100%;
height: 35px;
color: #8b8b8b;
font-family: 'Lato', sans-serif;
background-color: #171717;
padding: 12px;
border: 0;
outline: none;
border-top: 0.15px solid #262323;
border-left: 0.15px solid #262323;
border-right: 0.15px solid #262323;
}
form textarea {
min-width: 100%;
max-width: 100%;
min-height: 200px;
max-height: 200px;
color: #8b8b8b;
font-family: 'Lato', sans-serif;
background-color: #171717;
padding: 12px;
border: 0;
outline: none;
border-top: 0.15px solid #262323;
border-left: 0.15px solid #262323;
border-right: 0.15px solid #262323;
}
form button {
width: 100%;
height: 45px;
position: relative;
top: -3px;
color: #8b8b8b;
font-family: 'Lato', sans-serif;
background-color: #171717;
border: 0.15px solid #262323;
outline: none;
font-size: 20px;
}
input:focus,
textarea:focus,
button:focus{
background-color: #212020;
border-top: 0.15px solid #1f1616;
border-left: 0.15px solid #1f1616;
border-right: 0.15px solid #1f1616;
}
/* Content3 style */
.Content3 {
width: 300px;
height: 350px;
position: absolute;
z-index: 2;
display:none;
}
/* one3 style */
.one3 {
width: 300px;
height: 350px;
transition: 0.3s ease;
position: relative;
background-color: #141414;
}
/* pseudo3 style */
.pseudo3 {
width: 320px;
padding: 10px;
border-top: 2px solid #b95e1c;
border-bottom: 2px solid #ad7145;
background-image:
linear-gradient(#b95e1c, #ad7145),
linear-gradient(#b95e1c, #ad7145);
background-size: 2px 100%;
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
}
/* title3 style */
.one3 .title3 {
padding: 30px;
font-size: 24px;
color: #8b8b8b;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
/* close style */
.close{
color: #8b8b8b;
font-size: 24px;
position:absolute;
left:-11px;
top:-62px;
z-index:3;
border-top: 0.5px solid #1f1616;
border-left: 0.5px solid #1f1616;
border-right: 0.5px solid #1f1616;
border-bottom: 0.5px solid #1f1616;
padding:10px 17px;
background-color:#212121;
transition: 0.2s ease-in-out;
}
.close:hover{
background-color: #8b8b8b;
color:#212121;
cursor:pointer;
transition: 0.2s ease-in-out;
}
JavaScript:
function showDiv() {
var x = document.getElementsByClassName("title3");
if ( x.click === true ){
document.getElementsByClassName("Content3").style.display = "block";
}
}
There are no error messages, but when I click my .title3 div it's not showing the div with class .Content3

You have many problems in your code. I will try to cover most of them
You use onmouseclick. That is not a valid javascript event. Use onclick.
You are trying to assign to variable x the HTML element with class title3. Here are 2 problems:
2.1. You do not need to assign the element you just clicked on to a variable inside the click function. You already have that element with event.target
2.2. By using getElementsByClassName you get a HTML Collection not a single element. ( see the plural Elements word ) You can get it using querySelector or by adding an id to it and use getElementById ( see the singular Element ). But again, you do not need to retrive it like that. You can use the event.target. As you click on it.
if ( x.click === true ){ . Why you need to check if the element is clicked, when the entire function is called only when that element is clicked ? Redundant check and not correct.
here again. See point 2.2
do not name your HTML attributes with capital letters. use content3
Do not import jquery, as you do not need it.
Check code below
function showDiv() {
document.querySelector(".Content3").style.display = "block";
}
.Content3 {
display:none
}
<div class="pseudo3">
<div class="one3">
<div class="Content3">
<p class="close">X</p>
<form action="order.php">
<input type="text" value="First & Last Name">
<input type="email" value="Your e-mail">
<input type="text" value="Your phone number">
<textarea>Write your feedback here</textarea>
<button>Send</button>
</form>
</div>
<div onclick="showDiv()" class="title3">
FEEDBACK
</div>
</div>
</div>
Useful links:
onclick event
getElementsByClassName
querySelector
event.target

You dont need jQuery to do that, you can also delete your onmouseover and use just this:
<script>
//add listener for click on your .title3
document.getElementsByClassName("title3")[0].addEventListener('click', function(e){
//prevent default action if any (dont need that in this case, but useful, if .title3 would be <a> tag)
e.preventDefault();
//set style
document.getElementsByClassName("Content3")[0].style.display = "block";
});
</script>

Can you use data property for this topic.
<div class="titles">
<button data-id="1">open 1</button>
<button data-id="2">open 2</button>
<button data-id="3">open 3</button>
</div>
<div class="contents">
<p data-id="1">context</p>
<p data-id="2">context</p>
<p data-id="3">context</p>
</div>
When any button clicked, take data-id and do anything inside of contents div with data-id. If you cannot understand I can send any example for this.

Building a Pyramid with CSS and jQuery

I am trying to build a very simple pyramid construction kit. The user can add a block or remove one.
This works fine using the code below. However, currently I am specifying the next block's width using css (.item1 {200px;}, .item2 {300px;}. The problem is, I don't know how many blocks the user will add eventually and therefore, I cannot specify this in CSS. I would like to calculate the width of each additional block's width based on the previous block's width + 100px (previous width + 100px). Unfortunately, I don't know how to do this...Any help would be appreciated.
simple pyramid pic
$(document).ready(function() {
//Add Block Functionality
$('#add-block .button').click(function() {
var $block = $('<li><div class="item"><input class="input" type="text" placeholder="#" maxlength="2"></div></li>');
$('.pyramid').append($block);
$('ul li div').addClass(function(index) {
return "item" + index;
}) //this is to increase the item to item 1, item2, item3 etc.
});
//Remove Block Functionality
$('#remove-block .button').click(function() {
$('.pyramid li').last().remove();
}
)
});
.item {
margin: 0 auto;
position: relative;
display: flex;
justify-content: center;
}
.item0 {
height: 0px;
width: 0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 60px solid #0488e0;
}
li div.item:not(.item0) {
border-bottom: 60px solid #0488e0;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
margin-top: 10px;
height: 0;
}
.item1 {
width: 200px;
/*plus 100px to create the trapezoid*/
}
.item2 {
width: 300px;
/*plus 100px to create the trapezoid*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pyramid">
<li>
</li>
</ul>
<section class="buttons">
<div id="add-block">
<span>Add Block</span>
<div class="button">+
</div>
</div>
<div id="remove-block">
<span>Remove Block</span>
<div class="button">-
</div>
</div>
</section>

You can get the last .item width then append your desire number var lastwidth = $('.pyramid li:last-child .item').width();
$(document).ready(function() {
//Add Block Functionality
$('#add-block .button').click(function() {
var lastwidth = $('.pyramid li:last-child .item').width();
if(lastwidth == null){
var plus = 0;
} else {
var plus = lastwidth + 100;
}
var $block = $('<li><div class="item" style="width:' + plus + 'px"><input class="input" type="text" placeholder="#" maxlength="2"></div></li>');
$('.pyramid').append($block);
//$('ul li div').addClass(function(index) {
//return "item" + index;
//}) //this is to increase the item to item 1, item2, item3 etc.
});
//Remove Block Functionality
$('#remove-block .button').click(function() {
$('.pyramid li').last().remove();
}
)
});
.item {
margin: 0 auto;
position: relative;
display: flex;
justify-content: center;
}
.item0 {
height: 0px;
width: 0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 60px solid #0488e0;
}
li div.item:not(.item0) {
border-bottom: 60px solid #0488e0;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
margin-top: 10px;
height: 0;
}
.item1 {
width: 200px;
/*plus 100px to create the trapezoid*/
}
.item2 {
width: 300px;
/*plus 100px to create the trapezoid*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pyramid">
<li>
</li>
</ul>
<section class="buttons">
<div id="add-block">
<span>Add Block</span>
<div class="button">+
</div>
</div>
<div id="remove-block">
<span>Remove Block</span>
<div class="button">-
</div>
</div>
</section>

How can I Validate forms with jquery?

Thanks to some awesome people on stack overflow i was able to get my classes toggled and got my form slide up and down correctly. I'm having issues validating the form before it becomes submitted. Could someone help me with a step in the right direction? I just want the validation to check that the fields have some text in them before allowing the submit.
Assignment 6
<!-- video https://youtu.be/XEoWYcolaEM -->
<style>
body {
background-color: #fff;
font-family: arial, sans-serif;
font-size: 100%;
}
a {
color: blue;
}
#welcome p strong {
color: navy;
font-size: 1.2em;
}
#welcome p:first-of-type {
margin-bottom: 50px;
}
section {
margin-bottom: 50px;
}
/* main container */
#main {
width: 960px;
margin: 50px auto;
border: 2px solid #000;
padding: 20px;
background-color: #e0e0ff;
position: relative;
box-sizing: border-box;
}
/* form container */
#loginDiv {
width: 300px;
position: absolute;
left: 650px;
top: 6px;
z-index: 100;
border: 1px solid navy;
}
/* paragraph that shows the text "Login" which is clicked on to display/remove the form */
#login {
margin: 0;
cursor: pointer;
background-color: rgb(255,255,255);
padding: 5px 0 2px 30px;
}
#login:hover {
background-color: rgb(110,138,195);
}
/* plus sign icon for login form */
.plus {
background: url(img_open.png) no-repeat 8px 7px;
background-color: rgb(110,138,195);
}
/* minus sign icon for login form */
.minus {
background: url(img_close.png) no-repeat 8px 7px;
}
/*form is hidden when the page loads */
#loginDiv form {
padding: 10px 10px 10px 10px;
display: none;
background-color: rgb(255,255,255);
}
#loginDiv label {
display: block;
width: 100px;
margin: 0 15px 0 0;
}
#loginDiv input {
font-size: 1.2em;
border: 1px solid navy;
}
#loginDiv input:focus {
background-color: rgb(110,138,195);
border: 2px solid navy;
}
#loginDiv input[type=button] {
width: 100px;
}
footer {
text-align: center;
margin-top: 50px;
margin-bottom: 10px;
padding: 20px;
border-top: 1px solid #000;
}
/* ad is not shown when the page loads */
#ad {
width: 300px;
height: 300px;
border: 1px solid #000;
background-color: yellow;
position: absolute;
left: 330px;
top: -500px; /* you can change this inbitially for viewing purposes only but be sure to set it back */
box-sizing: border-box;
background-image: url(ad.jpg);
background-repeat: no-repeat;
}
/* close button on ad */
#adbtn {
width: 50px;
height: 50px;
border: 2px solid #000;
border-top-width: 1px;
border-right-width: 1px;
background-color: #fff;
font-size: 3em;
text-align: center;
cursor: pointer;
box-sizing: border-box;
position: absolute;
top: 0px;
right: 0px;
}
</style>
<script src="jquery-1.12.3.min.js" type="text/javascript"></script>
<script>
//Fading in Advertisent
$(document).ready(function(){
$("#ad").animate({
top: '100px',
},(5000));
//Closing The Advertisement
$("#adbtn").click(function(){
$("#ad").fadeOut(5000);
});
$(".plus").click(function(){
$("form").slideToggle(1000); // half second duration
$(this).toggleClass("plus").toggleClass("minus");
$('button').click(function(){
$("form").val(1);
});
}); // end function
}); // end function
</script>
</head>
<body>
<!-- main container -->
<div id="main">
<section id="loginDiv">
<!-- when this is clicked on the below form should be displayed and plus sign should change to minus sign-->
<p id="login" class="plus">Login</p>
<form>
<p>
<label for="username">Username:</label>
<input type="text" name="username" id="username">
</p>
<p>
<label for="pw">Password:</label>
<input type="password" name="pw" id="pw">
</p>
<p>
<input type="button" value="Submit">
</p>
<!-- placeholder for response if form data is correct/incorrect -->
<p id="error"> </p>
</form>
</section>
<section id="welcome">
<h1>Welcome to the Local jQuery User Group Website</h1>
<p> <strong>Click the login button at the top of the page to login. To become a member please Register</strong> </p>
<h2>About this page layout:</h2>
<p> The main container (parent) has 'relative' positioning so that the 'login' container can be absolutley positioned with respect to
that main container. Otherwise, it would default to being absolutley positioned with respect to the window. </p>
<p> In order for the login panel to be placed on top of the page we need to use absolute positioning, otherwise,
it would move the rest of the content down as done in the FAQ assignment. Technically, absolute positioning takes that element out of
the normal flow of the document, so that it is on top of the page. The 'ad' is also absolutely positioned to the same main container. </p>
</section>
<section>
<h2>This week's agenda:</h2>
<p>There will be a live meeting this Tuesday evening from 7:00pm to 8:00pm PST using our WebEx Conferencing Software.
It will be recorded! Please note that the code samples will be available on our GitHub repository. </p>
</section>
<footer> Copyright © Local jQuery User Group </footer>
<!-- ad which is absolutely positioned -500px from the top so you do not see it when page loads-->
<div id="ad">
<div id="adbtn"> X </div>
</div>
<!-- end main container -->
</div>
</body>
</html>

Take a look into jQuery Validate.
This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options.

I hope you can learn from this. I'll just give you an example with one of your fields and a submit button. Initially the submit button is disabled, then you can use the keypress event to check if 1 or more characters are entered and enable the submit button.
Fiddle: https://jsfiddle.net/stevenng/8w89v3tp/1/
HTML:
<label for="username">Username:</label>
<input type="text" name="username" id="username">
<button class="js-submit">submit</button>
JS:
var $submit = $('.js-submit');
var $username = $('#username');
$submit.attr('disabled', true);
$username.keypress(function() {
if ( $username.val().length > 0 ) {
$submit.attr('disabled', false);
}
});
$submit.on('click', function(){
// do something
});