classList.toggle in Javascript

classList.toggle in Javascript - javascript

I'm trying to assign .hidden to certain elemement when class is not present and remove class .hidden if this class is already assigned to this element. In other words - I just want to toggle class.
I wrote code
var isHidden = document.getElementById("inputSelected").classList.toggle("hidden");
but it doesn't work. But when I console log classList.contains
var isHidden = document.getElementById("inputSelected").classList.contains("hidden");
it returns false - which means, that this class it not assigned. So why it doesn't toggle?
More code:
<!DOCTYPE html>
<html>
<head>
<title>Kalkulator dat</title>
<meta name="description" content="Kalkulator dat. Ile dni minęło od wskazanej daty? Jaka będzie data za daną ilość dni?">
<link rel="StyleSheet" type="text/css" href="style.css">
</head>
<body>
<h1>Kalkulator dat</h1>
<div id="daysPassed">
<h2>Ile pełnych dni minęło?</h2>
<form id=daysPassedForm">
<label for="firstDateDP">Data początkowa:</label>
<input type="date" id="firstDate">
<fieldset>
<input type="radio" id="toToday" name="todayOrSelected">
<label for="toToday">Do dziś</label>
<input type="radio" id="toSelected" name="todayOrSelected">
<label for="toSelected">Do wskazanej daty</label>
<p id="inputSelected">(<input type="date" id="selectedEndDate">)</p>
</fieldset>
<input type="submit" value="Oblicz">
</form>
</div>
<div id="daysPassedResult" class="result">
<p id="daysPassedInfo">Od wskazanej daty minęło x dni</p>
</div>
<div id="dateIndicate">
<h2>Jaka będzie data?</h2>
<form id="dateIndicateForm">
<ul>
<li>
<label for="firstDateDI"><span>Data początkowa:</span></label>
<input type="date" id="firstDateDI">
</li>
<li>
<label for="numberOfDays"><span>Liczba pełnych dni:</span></label>
<input type="number" id="numberOfDays" step="1">
</li>
<li>
<input type="submit" value="Oblicz">
</li>
</ul>
</form>
</div>
<div id="dateIndicateResult" class="result">
<p id="dateIndicateResult">Po x dniach od y będzie</p>
</div>
<script src="script.js"></script>
</body>
</html>
div {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
margin-bottom: 7px;
}
body {
margin: 0 auto;
width: 40%;
background-color: #FFCA51;
}
div {
padding: 5px;
border-radius: 15px;
}
p {
margin: 8px 0 8px 0;
}
ul {
list-style-type: none;
padding: 0;
}
h1 {
text-align: center;}
fieldset {
border: none;
}
input {
margin: 2px;
padding: 1px;
}
span {
width: 115px;
text-align: right;
display: inline-block;
}
#daysPassed {
background-color: #E8A849;
padding-left: 16px;
}
#inputSelected {
margin: 0 0 0 8px;
display: inline-block;
}
#daysPassedResult {
background-color: #FFA75D;
}
#dateIndicate {
background-color: #E87A49;
padding-left: 16px;
margin-top: 20px;
}
#dateIndicateResult {
background-color: #FF6D51;
}
.result {
margin: 8px 0 8px 16px;
padding-left: 12px;
max-width: 50%;
}
.hidden {
display: none;}
function preparePage() {
document.getElementById("inputSelected").classList.toggle("hidden");
document.getElementById("daysPassedResult").classList.toggle("hidden");
document.getElementById("dateIndicateResult").classList.toggle("hidden");
}
window.onload = function() {
preparePage();
};
Right now second and third line of preparePage works, but first (#inputselected) doesn't

DOMTokenList Reference from Mozilla:
toggle ( token ) - removes token from string and returns false. If token doesn't exist it's added and the function returns true
Your code actually works, but it seems that the issue is not caused by the DOMTokenList .toggle() function, but by a CSS id #inputSelected:
#inputSelected {
margin: 0 0 0 8px;
display: inline-block; /* will never let .hidden to actually set the "display: none". */
}
.hidden {
display: none;
}
A simple way to fix it is to define:
.hidden {
display: none !important;
}
or define display: inline-block; in a separate class.
If the problem really is the .toggle, DOMTokenList still has:
.contains
.add
.remove
Otherwise, you can use jQuery or manage the element.className by hand.

Related

How do I check two fields for identity using an external script like "signup.js"?

I work with Electron.
I have three files in my project.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/styles.css">
<script src="../js/preload.js"></script>
<script src="../js/signup.js"></script>
</head>
<body>
<form action="" onsubmit="return validate()">
<label for="email"><b>Почта</b></label>
<input type="text" placeholder="Введите почту..." name="email" required>
<label for="psw"><b>Пароль</b></label>
<input type="password" placeholder="Введите пароль..." id="psw" required>
<label for="psw-repeat"><b>Подтверждение пароля</b></label>
<input type="password" placeholder="Повторите пароль..." id="psw-repeat" required>
<hr>
<p id = "terms">Создавая аккаунт, вы соглашаетесь с нашими условиями пользования и приватности.</p>
<button type="submit" class = registerbtn>Зарегистрироваться</button>
</form>
</body>
</html>
styles.css
#import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght#300&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
body {
font-family: 'Raleway', sans-serif;
}
.sign_up {
padding: 16px;
}
input[type=text],
input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
font-family: 'Raleway', sans-serif;
}
hr
{
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
.registerbtn {
background-color: darkcyan;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.registerbtn:hover {
opacity: 1;
}
a {
color: dodgerblue;
}
#warning {
color: crimson;
}
signup.js
function validate()
{
var password = document.getElementById(psw).value;
var password_repeat = document.getElementById(psw-repeat).value
if(password != password_repeat)
{
document.getElementById(psw).insertAdjacentHTML("afterend", "<p id = \"warning\">Пароли не совпадают!</p>")
}
}
The project itself is written in Russian. I want to use the file signup.js to check the identity of the fields "psw" and "psw-repeat", but when the program runs, nothing happens. As for the content of the fields, they are emptied when the button is clicked.

The onsubmit value should only have method call, not with "return".
So, I suggest you to use something like this:
onsubmit="validate()"
Documentation
Also, the submit button have issue with "class" css, it should look like this:
<button type="submit" class="register btn">Зарегистрироваться</button>

Javascript file partially running

So I taught myself coding a few years ago, and got it just enough to put together a few tools for work. I recently had to migrate my site out of CodePen and onto an actual web server. Now I'm having an issue where part of my javascript is executing properly (a portion that empties all other input fields when a user enters an input field using JQuery), but the button that calculates an answer will not work. I believe the .click is not picking it up. Either way I'm not getting error messages, the button just does nothing when I press it.
When I put the code in a snippet to share with you guys, it works (just like it did in CodePen), but the exact same code on my web host does not work. I'm really at a loss here and any help would be greatly appreciated. I feel like I'm missing some small line of code that's supposed to be included in all web files.
$(document).ready(function() {
//Clear out input fields when not selected
$("#sg").focusin(function() {
$("#density").val("");
});
$("#density").focusin(function() {
$("#sg").val("");
});
$("#pounds").focusin(function() {
$("#grams").val("");
$("#percentage").val("");
});
$("#grams").focusin(function() {
$("#percentage").val("");
$("#pounds").val("");
});
$("#percentage").focusin(function() {
$("#pounds").val("");
$("#grams").val("");
});
$(".input_field").focusin(function() {
$("#density").removeClass('highlight');
$("#sg").removeClass('highlight');
$("#pounds").removeClass('highlight');
$("#grams").removeClass('highlight');
$("#percentage").removeClass('highlight');
});
//Calculate on press of enter
$("#button").keypress(function(e) {
if (e.which == 13) {
alert("this is working");
}
});
$("#button").click(function() {
calculateButton();
});
//Calculate values on button hit
function calculateButton() {
function numberWithCommas(x) {
x = x.toString();
var pattern = /(-?\d+)(\d{3})/;
while (pattern.test(x))
x = x.replace(pattern, "$1,$2");
return x;
}
function removeCommas(x) {
x = x.replace(",", "");
return x;
}
var results = 0;
//Pulling information from input cells
var densityStr = document.getElementById("density").value;
var sgStr = document.getElementById("sg").value;
var poundsStr = document.getElementById("pounds").value;
var gramsStr = document.getElementById("grams").value;
var percentageStr = document.getElementById("percentage").value;
//remove commas from string and then convert string to number
var densityNum = Number(removeCommas(densityStr));
var sgNum = Number(removeCommas(sgStr));
var poundsNum = Number(removeCommas(poundsStr));
var gramsNum = Number(removeCommas(gramsStr));
var percentageNum = Number(removeCommas(percentageStr));
if (densityStr.length !== 0) {
var sgConversion = densityNum / 8.3454;
$("#sg").val(sgConversion.toFixed(3));
$("#density").addClass('highlight');
} else if (sgStr.length !== 0) {
var densityConversion = sgNum * 8.3454;
$("#density").val(densityConversion.toFixed(3));
$("#sg").addClass('highlight');
}
if (poundsStr.length !== 0) {
$("#pounds").addClass("highlight");
densityNum = document.getElementById("density").value;
var gramsConversion = poundsNum * 119.83;
var percentageConversion = poundsNum / densityNum * 100;
$("#grams").val(gramsConversion.toFixed(0));
$("#percentage").val(percentageConversion.toFixed(2));
} else if (gramsStr.length !== 0) {
$("#grams").addClass("highlight");
densityNum = document.getElementById("density").value;
var poundsConversion = gramsNum / 119.83;
var percentageConversion = poundsConversion / densityNum * 100;
$("#pounds").val(poundsConversion.toFixed(2));
$("#percentage").val(percentageConversion.toFixed(2));
} else if (percentageStr.length !== 0) {
$("#percentage").addClass("highlight");
densityNum = document.getElementById("density").value;
var percentageDec = percentageNum / 100;
var poundsConversion = densityNum * percentageDec;
var gramsConversion = poundsConversion * 119.83;
$("#pounds").val(poundsConversion.toFixed(2));
$("#grams").val(gramsConversion.toFixed(2));
}
}
});
body {
margin: 0;
font-family: 'Lato', sans-serif;
background: #d2d2d2;
}
p {
text-align: center;
}
conatiner {
max-width: 1024px;
margin: 0 auto;
}
#navbarContainer {
background: #F44336;
overflow: hidden;
width: 100%;
margin: 0;
}
.navbar {
float: left;
display: block;
font-family: 'Lato', sans-serif;
height: 40px;
width: 200px;
line-height: 40px;
text-align: center;
background: #F44336;
text-decoration: none;
color: #212121;
}
.navbar:hover {
background: #E57373;
color: white;
}
.active {
background: #C62828;
color: white;
}
#formContainer {
width: 450px;
background: #FDFFFC;
margin: 50px auto;
padding: 0px;
border-radius: 8px;
overflow: hidden;
}
#formContainer header {
width: 100%;
height: 130px;
background-color: #3cba54;
overflow: auto;
color: white;
}
header h1 {
margin: 35px 0 0 0;
text-align: center;
line-height: 30px;
}
header h3 {
line-height: 40px;
text-align: center;
margin: 0;
}
#heading {
background-color: #3cba54;
height: 40px;
color: white;
margin-bottom: 25px;
margin-left: -30px;
}
#heading h3 {
line-height: 40px;
}
form {
padding: 20px 0 0 20px;
text-align: center;
}
label {
display: inline-block;
width: 220px;
text-align: right;
}
#myForm .input_field {
margin-left: 20px;
margin-bottom: 10px;
font-size: 20px;
padding-left: 10px;
width: 125px;
height: 35px;
font-size: 17px;
border-radius: 3px;
background-color: #E0E0E0;
border: none;
}
#button {
display: block;
border-radius: 6px;
width: 200px;
height: 50px;
padding: 8px 15px 8px 15px;
margin: 0 auto;
margin-bottom: 50px;
font-size: 16px;
box-shadow: 0 6px #540000;
background-color: #FF3636;
border: none;
outline: none;
}
#button:active {
background-color: #B81B1B;
box-shadow: 0 1px #27496d;
transform: translateY(5px);
}
.highlight {
background: #FFEB3B !important;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="container">
<div id="navbarContainer">
<a class="navbar" id="62" href="https://s.codepen.io/awheat/debug/MpMrEo/yYAyLDjQWgKr">326 IAC 6-2 Tool</a>
<a class="navbar" id="63" href="https://s.codepen.io/awheat/debug/gWmazm/NQkzYnjeQZyA">326 IAC 6-3 Tool</a>
<a class="navbar active" id="voc" href="https://s.codepen.io/awheat/debug/qVpPNm/VGAWNnJYBjZr">VOC Conversion Tool</a>
</div>
<div id="formContainer">
<header>
<h1>VOC Conversion Tool</h1>
<h3>(for conversion of VOC data to other units)</h3>
</header>
<form id="myForm">
<label>Density of Coating (lbs/gal): </label><input type="text" id="density" class="input_field">
<label>Specific Graviy: </label><input type="text" id="sg" class="input_field">
<div id="heading">
<h3>VOC Content</h3>
</div>
<label>Pounds per Gallon (lbs/gal): </label><input type="text" id="pounds" class="input_field">
<label>Grams per Liter (g/L): </label><input type="text" id="grams" class="input_field">
<label>Percentage (%): </label><input type="text" id="percentage" class="input_field"><br><br>
<input type="button" id="button" value="Calculate" autofocus>
</form>
</div>
</div>
</body>
</html>

Sometimes putting script tags before the elements on the page can cause issues. You can try to put the scripts at the bottom of the body like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="navbarContainer">
<a class="navbar" id="62" href="https://s.codepen.io/awheat/debug/MpMrEo/yYAyLDjQWgKr">326 IAC 6-2 Tool</a>
<a class="navbar" id="63" href="https://s.codepen.io/awheat/debug/gWmazm/NQkzYnjeQZyA">326 IAC 6-3 Tool</a>
<a class="navbar active" id="voc" href="https://s.codepen.io/awheat/debug/qVpPNm/VGAWNnJYBjZr">VOC Conversion Tool</a>
</div>
<div id="formContainer">
<header>
<h1>VOC Conversion Tool</h1>
<h3>(for conversion of VOC data to other units)</h3>
</header>
<form id="myForm">
<label>Density of Coating (lbs/gal): </label><input type="text" id="density" class="input_field">
<label>Specific Graviy: </label><input type="text" id="sg" class="input_field">
<div id="heading">
<h3>VOC Content</h3>
</div>
<label>Pounds per Gallon (lbs/gal): </label><input type="text" id="pounds" class="input_field">
<label>Grams per Liter (g/L): </label><input type="text" id="grams" class="input_field">
<label>Percentage (%): </label><input type="text" id="percentage" class="input_field"><br><br>
<input type="button" id="button" value="Calculate" autofocus>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

How to create a new div each time a button is clicked?

This is my code:
function newMentee() {
document.getElementById('new-mentee-form').style.display="block";
document.getElementById('mentees').style.display="none";
}
function addMentee() {
document.getElementById('new-mentee-form').style.display="none";
document.getElementById('mentees').innerHTML=document.getElementById('name').value+'<br><br>'+document.getElementById('rating').value+'<br><br>'+document.getElementById('comments').value;
document.getElementById('mentees').setAttribute("style","display:block;background-color:black;width:10em;height:10em;margin-top:5em;margin-left:2em;padding:2em;border-radius:2em;word-wrap:break-word;");
}
* {
margin: 0;
padding: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
background-color: #3b4149;
}
header {
background-color: #181b1e;
width: 100%;
height:15em;
}
header h1 {
color:white;
text-align: center;
line-height: 5em;
font-size: 3em;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
display: block;
float:left;
width: 25%;
text-align: center;
line-height: 2.5em;
color:white;
background-color: #1376d8;
}
ul li ul li {
display: none;
}
ul li:hover {
background-color: #18e288;
opacity: 0.7;
}
ul li:hover ul li {
display: block;
width:100%;
}
#new-mentee-form {
padding-top: 3em;
color:white;
background-color: black;
width:20em;
height:30em;
margin-top: 3em;
border-radius: 2em;
display: none;
}
input,textarea {
padding: 0.5em;
color:white;
}
#submit {
border-radius: 2em;
}
#submit:hover {
background-color: #18e288;
}
textarea {
resize:none;
}
#mentees {
color:white;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="delta.css">
<script type="text/javascript" src="delta.js">
</script>
</head>
<body>
<header>
<h1>Mentee List</h1>
</header>
<nav>
<ul>
<li>List of Mentees</li>
<li onclick="newMentee();">Add a mentee</li>
<li>Remove a mentee</li>
<li>Make an edit
<ul>
<li>Add Details</li>
<li>Remove Details</li>
</ul>
</li>
</ul>
</nav>
<div id="mentees">
</div>
<center>
<div>
<div id="new-mentee-form">
Name:<br><br><input type="text" name="name" id="name"><br><br>
Rating:<br><br><input type="text" id="rating" value=""><br><br>
Comments:<br><br><textarea name="name" rows="8" cols="28" id="comments" maxlength="30"></textarea><br><br>
<input type="submit" name="submit" value="Submit" id="submit" onclick="addMentee();">
</div>
</div>
</center>
</body>
</html>
My goal is to create a new div(this will be displayed like a card) with all the details entered by the user each time "Add Mentee" in the navigation bar is clicked. I do not want to store the data in an external file. Is there any way to retrieve the previous data from innerHTML and add a new div to the existing content of innerHTML? The problem I'm facing is that each time "Add Mentee" is clicked the previous data is wiped out. I want to do this in VanillaJS.

while assigning new value to innerHTML, you can append it with old value as
document.getElementById('mentees').innerHTML+='<br >' + document.getElementById('name').value+'<br><br>'+document.getElementById('rating').value+'<br><br>'+document.getElementById('comments').value;

div.innerHTML = div.innerHTML + newDiv
Or
div.appendChild(newDiv)
See ref:
https://www.w3schools.com/jsref/met_node_appendchild.asp

Trying to get $(document).on('Click') to work for a p tag

I am trying to get my document.on function to work when the user clicks on the p tag that has a class called card. So far the function is non responsive. What should I change so the function will respond when I click on the p tag that has a class called card. Here is my HTML and JQuery code.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Contacts">
<title>Contacts</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
var first = $('input.first').val();
var last = $('input.last').val();
var desc = $('textarea').val();
$('div.right').append("<p class='card'><h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4></p><p class='back'>"+desc+"</p>");
return false;
});
$(document).on('click', 'p.card', function(){ //this is the function I am trying to get to work.
alert("test");
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="left">
<form action="#">
<p >First name: <input type="text" name="fname" class="first"></p>
<p >Last name: <input type="text" name="lname" class="last"></p>
<p class="desc">Description:</p>
<p><textarea rows="4" cols="50"></textarea></p>
<button>Add User</button>
</form>
</div>
<div class="right">
</div>
</div>
</body>
Here is my css code
*{
/* outline: 2px dotted red;*/
border: 0 none;
padding: 0;
margin: 0;
}
div.wrapper{
width: 970px;
min-height: 100px;
margin-left: auto;
margin-right: auto;
}
div.left{
border: 2px solid black;
width: 500px;
display: inline-block;
}
div.right{
width: 200px;
display: inline-block;
height: 100px;
vertical-align: top;
padding-right: 100px;
text-align: center;
}
p{
margin-left: 80px;
margin-top: 20px;
font-size: 20px;
width: 400px;
}
p.email{
margin-left: 45px;
}
button{
margin: 30px;
height: 20px;
width: 100px;
margin-left: 75px;
text-align: center;
}
div.card{
margin-left: 100px;
margin-bottom: 20px;
border: 2px solid black;
width: 300px;
height: 100px;
text-align: center;
}
p.back{
display: none;
margin: 0px;
padding: 0px;
text-align: center;
}
textarea{
border: 2px solid black;
}

Somehow the p.class you were appending was broken, it was below the other elements and was not being identified as the sender by jQuery event.
The following works fine:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Contacts">
<title>Contacts</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
var first = $('input.first').val();
var last = $('input.last').val();
var desc = $('textarea').val();
var p = $('<p class="card">');
p.append("<h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4><p class='back'>"+desc+"</p>");
$('div.right').append(p);
return false;
});
$(document).on('click', 'p.card', function(){ //this is the function I am trying to get to work.
alert("test");
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="left">
<form action="#">
<p >First name: <input type="text" name="fname" class="first"></p>
<p >Last name: <input type="text" name="lname" class="last"></p>
<p class="desc">Description:</p>
<p><textarea rows="4" cols="50"></textarea></p>
<button>Add User</button>
</form>
</div>
<div class="right">
</div>
</div>
</body>

your code were not right , the appending elements not formatted as your wish , thats why the click function not working, check the below snippt i have fixed your code, hope fully this will help you
$(document).ready(function(){
$('button').click(function(){
var first = $('input.first').val();
var last = $('input.last').val();
var desc = $('textarea').val();
$('div.right').append('<p class="card"></p>');
$('.card').html("<h1> first +' '+last</h1><h4>Click for description!'</h4><p class='back'>+desc+</p>"
);
});
$(document).on('click', 'p.card', function(){ //this is the function I am trying to get to work.
alert("test");
});
});
* {
/* outline: 2px dotted red;*/
border: 0 none;
padding: 0;
margin: 0;
}
div.wrapper {
width: 970px;
min-height: 100px;
margin-left: auto;
margin-right: auto;
}
div.left {
border: 2px solid black;
width: 500px;
display: inline-block;
}
div.right {
width: 200px;
display: inline-block;
height: 100px;
vertical-align: top;
padding-right: 100px;
text-align: center;
}
p {
margin-left: 80px;
margin-top: 20px;
font-size: 20px;
width: 400px;
}
p.email {
margin-left: 45px;
}
button {
margin: 30px;
height: 20px;
width: 100px;
margin-left: 75px;
text-align: center;
}
div.card {
margin-left: 100px;
margin-bottom: 20px;
border: 2px solid black;
width: 300px;
height: 100px;
text-align: center;
}
p.back {
display: none;
margin: 0px;
padding: 0px;
text-align: center;
}
textarea {
border: 2px solid black;
}
<div class="wrapper">
<div class="left">
<form action="#">
<p >First name:
<input type="text" name="fname" class="first">
</p>
<p >Last name:
<input type="text" name="lname" class="last">
</p>
<p class="desc">Description:</p>
<p>
<textarea rows="4" cols="50"></textarea>
</p>
<button>Add User</button>
</form>
</div>
<div class="right"> </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

looks like You're misusing the header tags.
I tried your DOM structure, and what's happening is that when Firefox/Chrome sees an invalid <h1> tag inside the <p>, it automatically closes the <p> tag. You can clearly see this in Developer Tools.
You should use <span> tags instead of header tags, check this it Works here
JS CODE:
$('div.right')
.append('<p class="card"><span>'+first+'<==>'+last+'</span>Click for Description!!!</p>');

Using developer tools inpsection, you'll see your added html is
<p class="card"></p><h1> </h1><h4>'Click for description!'</h4><p></p><p class="back"></p>`
No matter what I've tried, I can't get Firefox to create insert that html as you want it!! it's like it doesn't want to put h1/h4 inside a p so decides to close the p early!
change to
$('div.right').append("<div class='card'><h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4></div><p class='back'>"+desc+"</p>");
and it all goes good - indeed, it's odd, that you already have css for div.card, but not p.card!!

You could do it in Javascript and impliment jquery in the function:
var div = document.getElementById('someid');
function foo(e) {
//Jquery Here
}
div.addEventListener('click', foo);
This is what I use for a lot of my functions.

Wrap card with <div/> instead of <p/> and it should work. As you have other block elements inside <p/>. It's breaking your html.
$('div.right').append("<div class='card'><h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4><p class='back'>"+desc+"</p></div>");
And then change 'p.card' to 'div.card'.

JQuery to do list project

This is a To Do List Project using html css and jquery
Every time i add something the list moves down , i don't know if it is because of css or jquery, you can see the code down below to check it, please help!!
It's always trying to be at the same level as the new list that is being added via JQuery.
Also when i did some validation so that when the user enters nothing it doesn't add it to the list, this worked for monday but all other days it didn't work even though i used the tag in script.js
http://mohammadhalawi.6te.net/To%20Do%20List/Index.html
I uploaded it online if you want to check it out
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery MealPlaner</title>
<link rel="stylesheet" type="text/css" href="Normalize.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="jquery-ui-1.11.4/jquery-ui.min.css" rel="stylesheet">
</head>
<body>
<div class="container" id="todoListWrapper">
<h1>The JQuery To Do List</h1>
<div id="todoList" class="clearfix">
<ul>
<li class="listTitle">Monday</li>
<li class="addItem">
<input type="text" class="inputItem" placeholder="add new item...">
</li>
</ul>
<ul >
<li class="listTitle">Tuesday</li>
<li class="addItem">
<input type="text" class="inputItem" placeholder="add new item...">
</li>
</ul>
<ul >
<li class="listTitle">Wednesday</li>
<li class="addItem">
<input type="text" class="inputItem" placeholder="add new item...">
</li>
</ul>
<ul >
<li class="listTitle">Thursday</li>
<li class="addItem">
<input type="text" class="inputItem" placeholder="add new item...">
</li>
</ul>
<ul>
<li class="listTitle">Friday</li>
<li class="addItem">
<input type="text" class="inputItem" placeholder="add new item...">
</li>
</ul>
<ul>
<li class="listTitle">Saturday</li>
<li class="addItem">
<input type="text" class="inputItem" placeholder="add new item...">
</li>
</ul>
<ul >
<li class="listTitle" >Sunday</li>
<li class="addItem">
<input type="text" placeholder="add new item...">
</li>
</ul>
</div>
</div>
<div id="trash">
Drop Here!
</div>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script>
window.jQuery || document.write('<script src="JQuery.js"><\/script>');
</script>
<script src="jquery-ui-1.11.4/jquery-ui.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
CSS
body
{
background-color: darkgray;
}
#todoListWrapper
{
width: 960px;
text-align: center;
margin: 0 auto;
padding: 20px 10px 30px;
background: white;
}
.clearfix:after
{
content: "";
display: table;
clear: both;
}
#todoList ul
{
width: 133px;
margin: 0;
padding:0;
position: relative;
display: inline-block;
list-style: none;
}
#todoList li
{
background: none;
padding: 5px;
border: none;
margin: 0;
text-align: left;
font-size: 12px;
}
#todoList li:hover
{
background: #eee;
}
#todoList li.listTitle
{
background: #444;
color: white;
padding: 10px;
text-align: center;
font-size: 14px;
}
#todoList li.listTitle:hover,
#todoList li.listTitle:active
{
cursor: default;
transform: none;
}
#todoList .emptySpace
{
background: #fc3;
border: dashed 1px #777;
height: 10px;
width: 120px;
}
#todoList li.addItem
{
display: none;
position: absolute;
top: 0;
background: none;
padding: 0;
width: 111px;
margin: 5px 4px;
}
#todoList ul:hover li.addItem
{
display: block;
}
#todoList li.addItem input
{
width: 100%;
padding: 4px;
}
#todoList li.addItem :active
{
transform: none;
}
#trash
{
background: rgba(178,73,38,0.7);
height: 300px;
width: 400px;
position: relative;
top: 90px;
left: 35%;
line-height: 300px;
color: white;
font-weight: bold;
font-size: 18px;
text-align: center;
padding: 0;
}
SCRIPT
$(function()
{
$('#todoList ul').sortable({
items: "li:not('.listTitle, .addItem')",
connectWith:"ul",
dropOnEmpty:true,
placeholder: "emptySpace"
});
$('input').keydown(function(e){
if(e.keyCode == 13 && $('input').val()!="")
{
var item = $(this).val();
$(this).parent().parent().append('<li style="font-size:13px;cursor:pointer;display:block;">'+ item + '</li>');
$(this).val("");
}
});
$('#trash').droppable({
drop: function(event, ui)
{
ui.draggable.remove();
}
});
});

Do the following: remove display inline-block , alter the margin and add float:left;
#todoList ul {
//display: inline-block;
float:left;
margin: 0 2px;
}
for the second question do the following:
if(e.keyCode == 13 && $(this).val().trim()!="")

I just stepped through your example. The reason that only your first input box works is because of this line:
if(e.keyCode == 13 && $('input').val()!="")
$('input') returns an array of all the elements matching the selector, meaning all the input boxes. When you ask for the val(), you'll get the value of the first input box in the array, which is "" unless you're typing in the first input box. So nothing happens unless you're on Monday.
You need to get the input box that you're typing into. To do that, change your line to this:
if(e.keyCode == 13 && e.target.value != "")
e.target is the target of the event, which is the input box that you're typing in.

We Keep Coding

JavaScript is the programming language of the Web.

classList.toggle in Javascript - javascript

Related

How do I check two fields for identity using an external script like "signup.js"?

Javascript file partially running

How to create a new div each time a button is clicked?

Trying to get $(document).on('Click') to work for a p tag

JQuery to do list project

Categories

Resources