I can not make the buttons workable

I can not make the buttons workable - javascript

I am trying to make a page with 2 questions with yes/no button using jQuery. I have used jQuery fade in/out options for this. But the buttons are not working. Can anyone help me with that??
I have given all the codes of my page with CSS and jQuery.
jQuery:
$(document).ready(function () {
$(".qusone").click(function () {
$(".one").fadeOut(100);
$(".two").delay(100).fadeIn(100);
});
$(".qustwo").click(function () {
$(".two").fadeOut(100);
$(".three").delay(100).fadeIn(100);
});
$(".qusthree").click(function () {
$(".three").fadeOut(100);
$(".full1").delay(2200).fadeIn(100);
});
$(".qusfour").click(function () {
$(".full1").fadeOut(100, Function() {
$(".four").delay(100).fadeIn(100);
});
});
});
CSS:
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
background: #EEF3FA;
text-shadow: none;
}
a {
text-decoration: none;
}
.left {
float: left;
}
.fix {
overflow: hidden;
}
.clear {
clear: both;
}
header {
background: #49639C;
text-align: center;
}
section {} footer {
text-align: center;
}
.main {
width: 750px;
margin: 0 auto;
}
.head {} .head > h1 {
color: #ffffff;
font-size: 40px;
padding: 10px;
}
.sec {
background: #6281B6;
margin-top: 15px;
border-radius: 20px 20px 0px 0px;
}
.sec > h2 {
background: url("../img/prize.png") no-repeat scroll left 80px center rgba(0, 0, 0, 0);
color: #ffffff;
font-weight: normal;
margin-bottom: 0px;
margin-top: 10px;
text-align: center;
padding: 25px;
}
.sec > h2 > span {
color: #E8ED1A;
}
.cove {
border: 1px solid #cccccc;
background: #ffffff;
padding-bottom: 10px;
}
.congrts {
background: none repeat scroll 0 0 #ffffff;
border: 1px solid #cccccc;
border-radius: 20px;
margin: 35px 15px 0px;
padding: 10px;
text-align: center;
}
.congrts > h1 {
background: none repeat scroll 0 0 #ffffff;
font-size: 30px;
margin: -30px auto 0;
text-align: center;
width: 280px;
color: #000000;
}
.congrts > p {
font-size: 16px;
margin: 5px 15px 8px;
text-align: left;
color: #000000;
}
.congrts > p > strong {} .prizes {
background: none repeat scroll 0 0 #ffffff;
border: 1px solid #cccccc;
border-radius: 20px;
margin: 35px 15px 0px;
padding: 10px;
text-align: center;
}
.prizes > h1 {
background: none repeat scroll 0 0 #ffffff;
font-size: 30px;
margin: -30px auto 0;
text-align: center;
width: 280px;
color: #000000;
}
.item {
border-bottom: 2px dashed #cccccc;
margin-bottom: 30px;
margin-top: 20px;
padding-bottom: 15px;
padding-left: 60px;
}
.img {} .img > img {
width: 250px;
}
.text > h1 {
font-size: 30px;
margin-bottom: 5px;
}
.text > p {
font-size: 35px;
}
.text > span {
color: #FF0000;
font-size: 35px;
}
.text {
margin-top: 5px;
margin-left: 15px;
}
.anchor {
border-radius: 15px;
}
.anchor > a {
background: none repeat scroll 0 0 #6bb155;
color: #ffffff;
font-size: 35px;
padding: 10px 164px;
text-align: center;
}
.anchor > a:hover {
text-shadow: none;
}
.fotter {
margin: 10px 0px;
}
.heiighrt {
height: 580px;
}
.kolo {
margin-top: 10px;
text-align: center;
margin-bottom: 5px;
}
.kolo > h1 {
color: #3B5998;
font-size: 35px;
}
.kolo > p {
color: #666666;
font-size: 17px;
margin-top: 10px;
}
.kolo > p > strong {}.span {
text-align: left;
font-size: 14px !important;
color: #666666;
margin-top: 10px;
}
.kolo1 {
border: 1px solid #cccccc;
padding: 5px 20px;
text-align: center;
background: #ffffff;
}
.pok {
margin: 15px auto;
width: 500px;
}
.pok > img {
float: left;
}
.pok > p {
float: left;
font-size: 35px;
font-weight: bold;
margin-left: 15px;
margin-top: 50px;
}
.anchortext {
margin: 5px auto;
}
.anchortext > a {
background: none repeat scroll 0 0 #6bb155;
border: 1px solid #000000;
border-radius: 50px;
color: #ffffff;
font-size: 40px;
padding: 2px 150px;
}
.anchortext1 {
margin: 5px auto;
}
.anchortext1 > a {
background: none repeat scroll 0 0 #6bb155;
border: 1px solid #000000;
border-radius: 50px;
color: #ffffff;
font-size: 35px;
line-height: 50px;
padding: 1px 70px;
}
.up1 {
padding: 2px 157px !important;
}
.up2 {
padding: 2px 143px !important;
}
.full {
background: none repeat scroll 0 0 #ffffff;
border: 1px solid #cccccc;
margin-top: 30px;
text-align: center;
}
.full h1 {
color: #3c599d;
font-size: 35px;
margin-bottom: 0px;
margin-top: 10px;
}
.full h2 {
font-size: 30px;
margin-bottom: 10px;
}
.full h2 span {
color: #3C599D;
}
.full1 {
text-align: center;
}
.full1 img {
margin-top: 150px;
width: 300px;
height: 20px;
}
.qus {
margin-bottom: 5px;
}
.two, .three, .four, .load, .ditiyo, .titiyo, .chortor{display:none;}
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div class="main head fix">
<h1>Message</h1>
</div>
</header>
<section>
<div class="main fix">
<div class="heiighrt one">
<div class="kolo">
<h1>We Need Your Comment</h1>
<p>We've selected you from 1,873,235 <strong>Mac mobile users in Australia</strong> to comment on a new app. The great news is you'll have a chance to <strong>win a cool iPad mini after this!</strong>
</p>
<p class="span">* Only 2 questions and take just 15 secs!</p>
</div>
<div class="kolo1">
<div class="pok fix">
<img src="img/ipad.png" alt="ipad on hand">
<p>Do you use Fb
<br>everyday?</p>
</div>
</div>
<div class="qusone">
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext">Yes
</div>
</div>
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext">No
</div>
</div>
</div>
</div>
</div>
<div class="heiighrt two">
<div class="full fix">
<h1>Question 1</h1>
<h2>Have You ever heard of <br><span>Facebook Home</span>?</h2>
<div class="qustwo">
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext1">Yes, i know
</div>
</div>
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext1">No, Never Heard of
</div>
</div>
</div>
<img src="img/ipad.png" alt="i pad on hand">
</div>
</div>
<div class="heiighrt three">
<div class="full fix">
<h1>Question 1</h1>
<h2>If you get a new iPad mini,<br>will you install<span>Facebook <br>Home</span>?</h2>
<div class="qusthree">
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext1">Yes, I love to
</div>
</div>
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext1">No, I don't like FB
</div>
</div>
</div>
<img src="img/ipad.png" alt="i pad on hand">
</div>
</div>
<div class="heiighrt load">
<div class="full1 fix">
<img src="img/loading.gif" alt="i pad on hand">
</div>
</div>
<div class="heiighrt four">
<div class="full full1 fix">
<h1>Thank You</h1>
<h2>You've helped in creating better apps for mobile users! Please proceed to see if<br> you will<br><strong>win the New iPad mini!</strong> </h2>
<img src="img/ipad.png" alt="i pad on hand">
<div class="qusfour">
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext1">I am feeling lucky Today!
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="main">
<p class="fotter">copyright 2013 Terms
Privacy
</p>
</div>
</footer>
Here the Fiddle

If you are going to want to bind your buttons that are hidden then my suggstion would be to switch to the following format
$(document).on('click', '.qustwo', function() { ...your code here... });
That should take care of it.

Try replacing your script by this:
$(document).ready(function () {
$(".qusone").click(function () {
$(".one").fadeOut(100);
$(".two").fadeIn(100);
});
$(".qustwo").click(function () {
$(".two").fadeOut(100);
$(".three").delay(100).fadeIn(100);
});
$(".qusthree").click(function () {
$(".three").fadeOut(100);
$(".full1").delay(2200).fadeIn(100);
});
$(".qusfour").click(function () {
$(".full1").fadeOut(100);
$(".four").delay(100).fadeIn(100);
});
});
You still need to clean up your code though to get intended flow.

Related

HTML and JavaScript Issue 'Uncaught TypeError: Cannot set property 'textContent' of null' found in console

So I have been following this youtube tutorial on how to create a login/sign up form and I've run into a problem. Whilst coding the JS, I tried testing out the continue button without any values submitted into the input groups, and nothing happened. So I went to check the console and I was met with this error message, "Uncaught TypeError: Cannot set property 'textContent' of null". The error occurs around the 'messageElement.textContent = message;' area. Any help would be greatly appreciated.
function setFormMessage(formElement, type, message) {
const messageElement = formElement.querySelector(".form__message");
messageElement.textContent = message;
messageElement.classList.remove("form__message--success", "form__message--error");
messageElement.classList.add(`form__message--${type}`);
}
function setInputError(inputElement, message) {
inputElement.classList.add("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = message;
}
function clearInputError(inputElement) {
inputElement.classList.remove("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = "";
}
document.addEventListener("DOMContentLoaded", () => {
const loginForm = document.querySelector("#login");
const createAccountForm = document.querySelector("#createAccount");
document.querySelector("#linkCreateAccount").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.add("form--hidden");
createAccountForm.classList.remove("form--hidden");
});
document.querySelector("#linkLogin").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.remove("form--hidden");
createAccountForm.classList.add("form--hidden");
});
loginForm.addEventListener("submit", e => {
e.preventDefault();
// Perform your AJAX/Fetch login
setFormMessage(loginForm, "error", "Invalid username/password combination");
});
document.querySelectorAll(".form__input").forEach(inputElement => {
inputElement.addEventListener("blur", e => {
if (e.target.id === "signupUsername" && e.target.value.length > 0 && e.target.value.length < 10) {
setInputError(inputElement, "Username must be at least 10 characters in length");
}
});
inputElement.addEventListener("input", () => {
clearInputError(inputElement);
});
});
});
#import url('https://fonts.googleapis.com/css2?family=Belleza&display=swap') * {
box-sizing: border-box;
}
/*Navugation Bar*/
nav {
z-index: 1;
height: 120px;
background: black;
box-shadow: grey;
overflow: hidden;
background-color: black;
position: sticky;
top: 0;
width: 100%;
}
nav ul {
float: centre;
text-align: center;
}
nav ul li {
display: inline-block;
line-height: 0px;
margin: 0px 15px;
padding: 30px;
}
nav ul li a {
position: sticky;
color: grey;
font-size: 20px;
text-transform: uppercase;
padding: 50px;
text-decoration: none;
width: 100px;
}
nav ul li a:hover {
color: white;
font-size: 30px
}
/*Home Page*/
.header-image {
padding: 0px;
position: sticky;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: auto;
width: 100%;
background-color: black;
height: 290px
}
#Home-page {
font-size: 2em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
.first-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 10px solid;
color: grey;
padding: 50px;
margin-top: 20%;
margin-bottom: 30%;
}
.first-container-h1 {
color: white;
text-align: center;
font-size: 4em;
border-bottom: 20px solid white;
}
.first-container-h2 {
color: white;
text-align: center;
font-size: 4em;
}
#second-container-main {
width: 80%;
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
.second-container-title {
background: white;
text-align: center;
font-size: 40px;
height: 6pc;
line-height: 90px;
}
.second-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 2px solid;
color: grey;
padding: 50px;
font-size: 20px;
}
.second-container:hover {
font-size: 1em;
color: white;
}
.logo {
float: center;
width: 20%;
float: center;
text-align: center;
color: white;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
background-color: black;
height: 100px;
border: none
}
/* Footer*/
.footer-wrapper {
width: 100%;
margin: 0 auto;
display: block;
}
footer {
width: 100%;
height: 300px;
float: right;
text-align: center;
position: relative;
bottom: 0;
background-color: black;
}
/*About Page*/
.About-me-page-header {
font-size: 1em;
margin: 0;
background-position: center;
background-size: cover;
background-color: grey;
position: relative;
text-align: left;
padding-top: 50px;
padding-left: 50px;
height: 400px;
border: white 10px solid;
background-color: rgb(0, 0, 0, .7);
color: white;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}
#About-page {
font-size: 1em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#About-page-main {
width: 80%;
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
.About-page-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 2px solid;
color: grey;
padding: 50px;
font-size: 1em;
}
.About-page-container:hover {
font-size: 30px;
color: white;
}
.about-page-title {
background: white;
text-align: center;
font-size: 40px;
height: 6pc;
line-height: 90px;
}
.AB-container-h {
color: white;
text-align: center;
}
/* Resources*/
.R-first-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 10px solid;
color: grey;
padding: 50px;
margin-top: 20%;
margin-bottom: 30%;
}
.R-first-container-h1 {
color: white;
text-align: center;
font-size: 4em;
}
/*Login Page*/
.About-me-page-header {
font-size: 1em;
margin: 0;
background-position: center;
background-size: cover;
background-color: grey;
position: relative;
text-align: left;
padding-top: 50px;
padding-left: 50px;
height: 400px;
border: white 10px solid;
background-color: rgb(0, 0, 0, .7);
color: white
}
#About-page {
font-size: 1em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#About-page-main {
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
/* Login in and Sign Up Form*/
#Login-page {
font-size: 2em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#Login-page-main {
--color-primary-dark: #009579;
--color-primary-dark: #007f67;
--color-secondary: #252c6a;
--color-primary-dark: #cc3333;
--color-success: #4bb544;
--color-error: red;
border-radius: 4px;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
max-width: 400px;
margin: 2rem;
padding: 5rem;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
border-radius: var(--border-radius);
background-color: rgba(0, 0, 0, .7);
color: white;
border: 3px solid white;
width: 1000px
}
.form--hidden {
display: none
}
.form>*:firstchild {
margin-top: 0;
}
.form>*:lastchild {
margin-bottom: 0;
}
.form__title {
margin-bottom: 2rem;
text-align: center;
font-size: 3rem;
}
.form__message {
margin-bottom: 1rem;
}
.form__message--success {
color: var(--color-success);
}
.form__message--error {
text-align: center;
color: var(--color-error);
}
.form__input-group {
margin-bottom: 2rem;
}
input,
select,
textarea {
color: white;
}
.form__input-error-message {
color: var(--color-error);
border-bottom: var(--color-error)
}
.form__input-error-message {
margin-top: 2rem;
font-size: 1.5rem;
color: var(--color-error);
}
.form__button {
width: 100%;
padding: 1rem 2rem;
font-weight: bold;
font-size: 1.1rem;
color: white;
background-color: rgb(0, 0, 0, .7);
outline: none;
cursor: pointer;
border: none;
border-radius: 20px
}
.form__button:hover {
background-color: white;
color: black
}
.form__button:active {
transform: scale(0.98)
}
.form__text {
font-size: 20px;
text-align: center;
cursor: pointer;
}
.form-text,
.form-textarea {
border-style: none;
}
.form__link {
text-decoration: none;
color: white
}
.form__link:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Clarte Mentale - Login</title>
<link rel="stylesheet" href="Style.css" />
</head>
<body id="Login-page">
<div class="header-image">
<a href="Home.html">
<img src="Website Header.png">
</a>
</div>
<nav>
<ul>
<li>Welcome</li>
<li>About</li>
<li>Resources</li>
<li>Login</li>
</ul>
</nav>
<div class="About-me-page-header">
<h1 style="font-size:48px">Login Page</h1>
<p style="font-size:35px">
Contents:
</p>
<ul style="font-size:25px">
<li>Login</li>
<li>Sign Up</li>
</ul>
</div>
<main id="Login-page-main">
<div class="container">
<div class="form-container">
<!-- Login FormUp Form-->
<form class="form" id="login">
<h1 class="form__title">Login</h1>
<div class="form__messsage form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username or Email" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text" style="margin-top: 35px;">
<a class="form__link" id="linkCreateAccount">Don't have an account? Create account</a>
</p>
</form>
<!-- Sign Up Form-->
<form class="form form--hidden" id="createAccount">
<h1 class="form__title">Create Account</h1>
<div class="form__messsage form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Email" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Confirm password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text" style="margin-top: 35px;">
<a class="form__link" id="linkLogin">Already have an account? Sign</a>
</p>
</form>
</main>
<footer>
<button class="logo" class="footer-wrapper" onclick="topFunction()" id="myBtn" title="Go to top">
<img src="Logo.png">
</button>
</footer>
<script src="Javascript.js"></script>
<script src="Login.js"></script>
</body>
</html>

You have <div class="form__messsage ... "> instead of <div class="form__message ... ">. Fixing that should work. GL.

Try and replace DomContentLoaded with load

How can I reverse the order of div elements upside down on 'onclick'?

I have the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>StackOverflow Question</title>
<style>
.container--wrap {
background-color: #000000;
border-radius: 15px;
margin: 5px;
overflow: hidden;
justify-content: stretch;
align-items: flex-end;
}
.scroller2{
height: 250px;
overflow-y: scroll;
}
.circle {
position: relative;
margin-bottom: 40px;
height: 20px;
display: flex;
align-items: center;
}
.circle::before {
content:"";
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 5px;
}
.circle::after {
position: absolute;
content: '';
left: 7.5px;
top: 20px;
width: 5px;
background: #4d4d4d;
height: 40px;
}
.minor::before {
background-color: purple;
}
.major::before {
background-color: red;
}
.gray::before {
background-color: gray;
}
.tlbtn {
background-color: #343434;
border-radius: 10px;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: robotobold;
}
#tltitle,.tlbtn{
display: inline-flex;
}
</style>
</head>
<body>
<script>
function btn1Click() {
document.getElementById("btn1").style.backgroundColor="#5c5c5c";
document.getElementById("btn2").style.backgroundColor="#343434";
}
function btn2Click() {
document.getElementById("btn2").style.backgroundColor="#5c5c5c";
document.getElementById("btn1").style.backgroundColor="#343434";
}
</script>
<div class="container--wrap-scroll scroller2" id="timeline">
<p id="tltitle" style="color: #D4E1E4; font-size: 20px; text-align: left; padding-top: 0px; padding-right: 10px;color: black;"><b>Timeline</b></p>
<div id="btn1" class="tlbtn" style="margin-bottom: -10px; background-color: #5c5c5c;" onclick="btn1Click();"><text style="font-size: 15px; font-family: robotobold;text-align: center;">Newest</text></div>
<div id="btn2" class="tlbtn" style="margin-bottom: -10px;" onclick="btn2Click();"><text style="font-size: 15px; font-family: robotobold; text-align: center;">Oldest</text></div>
<div class="circle major "><text style="color:red; font-family:robotolight; font-size: 12px;">Major Event | Yesterday</text></div>
<div class="circle gray"><text style="color:black; font-family:robotolight; font-size: 12px;">Information | 2 days ago</text></div>
<div class="circle gray"><text style="color:black; font-family:robotolight; font-size: 12px;">Information | 1 week ago</text></div>
<div class="circle minor"><text style="color:purple; font-family:robotolight; font-size: 12px;">Minor Event | 1 month ago</b></text></div>
</div>
</body>
</html>
When 'Oldest' is pressed, I would like the order of the div elements to reverse sort - please notice that the last circle has a line which goes below it, and I would like this to stay the same:
e.g. Major Event will be at the bottom when OLDEST is pressed and have a grey line below it as well.
Is there a way I can do this?
Screenshot:

If you want to use only CSS, you could try using Flexbox and switching between flex-direction column and column-reverse:
const timeline = document.getElementById('timeline');
const newestButton = document.getElementById('button--newest-first');
const oldestButton = document.getElementById('button--oldest-first');
newestButton.onclick = () => {
timeline.classList.remove('timeline--oldest-first');
timeline.classList.add('timeline--newest-first');
oldestButton.classList.remove('button--selected');
newestButton.classList.add('button--selected');
};
oldestButton.onclick = () => {
timeline.classList.add('timeline--oldest-first');
timeline.classList.remove('timeline--newest-first');
oldestButton.classList.add('button--selected');
newestButton.classList.remove('button--selected');
};
body {
margin: 0;
padding: 8px;
font-family: monospace;
font-size: 14px;
}
.header {
display: flex;
padding-bottom: 8px;
margin-bottom: 16px;
align-items: center;
border-bottom: 2px solid black;
}
.title {
margin-right: auto;
}
.button {
font-family: monospace;
font-size: 14px;
border-radius: 2px;
padding: 4px 8px;
margin-left: 8px;
cursor: pointer;
border: 0;
outline: none;
border: 2px solid black;
background: transparent;
}
.button--selected {
background: yellow;
}
.timeline {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.timeline--newest-first {
flex-direction: column;
}
.timeline--oldest-first {
flex-direction: column-reverse;
}
.circle {
position: relative;
margin-bottom: 16px;
height: 20px;
display: flex;
align-items: center;
}
.timeline--newest-first > .circle:last-child,
.timeline--oldest-first > .circle:first-child {
margin-bottom: 0;
}
.circle::before {
content:"";
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
margin-right: 16px;
border: 2px solid black;
}
.circle::after {
position: absolute;
content: '';
left: 9px;
top: 20px;
width: 2px;
background: #000;
height: 16px;
}
.timeline--newest-first > .circle:last-child::after,
.timeline--oldest-first > .circle:first-child::after {
display: none;
}
.minor::before {
background-color: purple;
}
.major::before {
background-color: red;
}
.gray::before {
background-color: gray;
}
<header class="header">
<strong class="title">TIMELINE</strong>
<button id="button--newest-first" class="button button--selected">
NEWEST
</button>
<button id="button--oldest-first" class="button">
OLDEST
</button>
</header>
<ul class="timeline timeline--newest-first" id="timeline">
<li class="circle major ">
Major Event | Yesterday
</li>
<li class="circle gray">
Information | 2 days ago
</li>
<li class="circle gray">
Information | 1 week ago
</li>
<li class="circle minor">
Minor Event | 1 month ago
</li>
</ul>

How to toggle single class in jquery without affecting same class elements?

I'm setting up a reddit-like commenting system on my website. Every comments has a little button in the right corner that collapses the comment.
I have the comment collapse by JQuery toggleClass.
$(".button").click(function() {
$('.bottomtext').toggleClass('bottomtext-small');
$('.upvote').toggleClass('upvote-small');
$('.downvote').toggleClass('downvote-small');
$('.main-content').toggleClass('main-content-small');
$('.button').toggleClass('button-small');
});
The comment collapsing works fine on one comment, but since I toggle the class, every comment collapses. How can I only affect the comment which button I am clicking?
JSFiddle: https://jsfiddle.net/j765rkpc/7/

It seems that you need to get the elements that have those class names and are part of the same post as the clicked button, here is how you can do that:
$(".button").click(function() {
const $post = $(this).closest('.post-container');
$post.find('.bottomtext').toggleClass('bottomtext-small');
$post.find('.upvote').toggleClass('upvote-small');
$post.find('.downvote').toggleClass('downvote-small');
$post.find('.main-content').toggleClass('main-content-small');
$post.find('.button').toggleClass('button-small');
});
.post-container {
background-color: yellow;
margin: auto;
position: relative;
display: flex;
width: 75%;
max-width: 1440px;
}
/*left side*/
.left-side {
position: relative;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 50px;
max-width: 50px;
min-width: 50px;
background: lightblue;
padding-left: 5px;
padding-right: 5px;
}
/*main post*/
.post {
margin: 0;
padding: 0;
flex-grow: 1;
}
.main-content p {
margin: 0;
padding: 0;
padding: 10px;
}
.main-content {
margin: 0;
padding: 0;
flex-grow: 1;
}
.contain img {
width: 50%;
}
.toptext {
margin: 0;
padding: 0;
padding-top: 10px;
padding-left: 10px;
height: 20px;
color: #808486;
font-size: 12px;
background-color: lightgrey;
}
.bottomtext {
margin: 0;
padding: 0;
padding-left: 5px;
height: 15px;
background: red;
font-size: 14px;
font-weight: bold;
color: #878a8c;
}
.bottomtext img {
margin-bottom: -2px;
padding-right: 5px;
}
.toptext b {
color: black;
}
.left-side .upvote {
padding-bottom: 5px;
}
.left-side .downvote {
padding-top: 7px;
}
.username {
color: blue;
}
.main-content-small {
margin: 0;
padding: 0;
flex-grow: 1;
display: none;
}
.contain-small img {
width: 50%;
display: none;
}
.bottomtext-small {
margin: 0;
padding: 0;
padding-left: 5px;
height: 15px;
background: red;
font-size: 14px;
font-weight: bold;
color: #878a8c;
display: none;
}
.left-side .upvote-small {
padding-bottom: 5px;
display: none;
}
.left-side .downvote-small {
padding-top: 7px;
display: none;
}
.button {
position: absolute;
top: 8px;
right: 10px;
background-color: white;
border: 1px solid black;
height: 14px;
width: 20px;
}
.button:hover {
background-color: grey;
}
.button-small {
position: absolute;
top: 5px;
right: 10px;
background-color: white;
border: 1px solid black;
height: 20px;
width: 7px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post-container">
<div class="left-side">
<div> <img class="upvote" src="https://i.imgur.com/AdwzPRs.png" height="15"> </div>
<div> <img class="downvote" src="https://i.imgur.com/XoJ1Jjy.png" height="15"> </div>
</div>
<div class="post">
<p class="toptext">
<input type="button" class="button"></input>
<span class="username">webdev18</span> 33 points 18 minutes ago
</p>
<div class="main-content">
<p class="contain-com">
When I want to collapse this comment by clicking the button in the corner...
</p>
<p class="bottomtext">
<img src="https://i.imgur.com/1IIJe1r.png" height="15">Respond
</p>
</div>
</div>
</div>
<div class="post-container">
<div class="left-side">
<div> <img class="upvote" src="https://i.imgur.com/AdwzPRs.png" height="15"> </div>
<div> <img class="downvote" src="https://i.imgur.com/XoJ1Jjy.png" height="15"> </div>
</div>
<div class="post">
<p class="toptext">
<input type="button" class="button"></input>
<span class="username">webdev18</span> 33 points 18 minutes ago
</p>
<div class="main-content">
<p class="contain-com">
...both comments collapse.
</p>
<p class="bottomtext">
<img src="https://i.imgur.com/1IIJe1r.png" height="15">Respond
</p>
</div>
</div>
</div>

Onclick function not working on first click

I have created a side popup in my website, but I have an issue. It works fine, but only on the second click. I want it to work on the first click. When I click on it two times, it works. I already tried some other blogs tricks but it's not working.
What's going wrong?
I created it using simple JS, you can see my code below:
function openNav() {
navMenuStatus = document.getElementById('popup').style.right;
if (navMenuStatus == '-300px') {
document.getElementById('popup').style.right = '0px';
} else {
document.getElementById('popup').style.right = '-300px';
}
}
.pmenu {
cursor: pointer;
width: 70px;
font-weight: 600;
color: #fff;
float: left;
}
.pmenu img {
padding: 5px 11px;
background-color: #fff000;
}
.pmenu p {
text-align: center;
padding: 10px 4px;
background-color: #356381;
margin: 0 0 0px;
font-size: 14px;
}
.pbody {
color: #fff;
float: left;
width: 300px;
background-color: #356381;
border-left: 5px solid #fff000;
}
.pbody p {
text-align: center;
font-size: 15px;
margin: 10px;
}
.pbody h4 {
text-align: center;
font-weight: 600;
margin: 0px;
color: #000;
background-color: #fff000;
padding: 10px 0px;
}
.pbody h5 {
font-size: 15px;
text-align: center;
background: #193e56;
padding: 15px;
}
.address {
text-align: center;
}
.address h6 {
color: #356381;
background-color: #fff000;
font-size: 14px;
padding: 10px 0px 10px 10px;
margin-top: 0px;
min-width: 245px;
text-align: left;
}
.aicon {
float: left;
width: 50px;
background-color: #193e56;
color: #fff;
padding: 14px 12px;
}
.aadd {
float: left;
color: #fff;
}
.popup {
position: absolute;
right: -300px;
top: 20px;
z-index: 3;
transition: 0.3s all;
}
<div class="popup" id="popup">
<div class="pmenu" onclick="openNav()">
<p>GET THE<br/>BOOK</p>
<img src="del.png">
</div>
<div class="pbody">
<h4>HOW TO GET THE PHONEBOOK</h4>
<p>Books were delivered to every house in Lakewood and surrounding areas during the month of February. </p>
<h5>If you did not receive one after this time you may pick one up at either one of the Wine on 9 locations.</h5>
<div class="address">
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>North location</b><br/> 6545 Rt 9 North, Howell, NJ 07731</h6>
</div>
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>South location</b><br/> 945 River Ave, Lakewood, NJ 08701</h6>
</div>
</div>
</div>
</div>
View on Codepen

Your code checks for a style attribute of right:-300px. Since there is no style attribute on #popup on load, the first click only sets a style attribute of right:-300px. Then, the second click sets it to "0", etc.
Note that style references the element's inline style and does not reference CSS applied by class.
I had some success by setting a default style attribute of -300px.
function openNav() {
navMenuStatus = document.getElementById('popup').style.right;
if (navMenuStatus == '-300px') {
document.getElementById('popup').style.right = '0px';
} else {
document.getElementById('popup').style.right = '-300px';
}
}
.pmenu {
cursor: pointer;
width: 70px;
font-weight: 600;
color: #fff;
float: left;
}
.pmenu img {
padding: 5px 11px;
background-color: #fff000;
}
.pmenu p {
text-align: center;
padding: 10px 4px;
background-color: #356381;
margin: 0 0 0px;
font-size: 14px;
}
.pbody {
color: #fff;
float: left;
width: 300px;
background-color: #356381;
border-left: 5px solid #fff000;
}
.pbody p {
text-align: center;
font-size: 15px;
margin: 10px;
}
.pbody h4 {
text-align: center;
font-weight: 600;
margin: 0px;
color: #000;
background-color: #fff000;
padding: 10px 0px;
}
.pbody h5 {
font-size: 15px;
text-align: center;
background: #193e56;
padding: 15px;
}
.address {
text-align: center;
}
.address h6 {
color: #356381;
background-color: #fff000;
font-size: 14px;
padding: 10px 0px 10px 10px;
margin-top: 0px;
min-width: 245px;
text-align: left;
}
.aicon {
float: left;
width: 50px;
background-color: #193e56;
color: #fff;
padding: 14px 12px;
}
.aadd {
float: left;
color: #fff;
}
.popup {
position: absolute;
right: -300px;
top: 20px;
z-index: 3;
transition: 0.3s all;
}
<div class="popup" id="popup" style="right:-300px">
<div class="pmenu" onclick="openNav()">
<p>GET THE<br/>BOOK</p>
<img src="del.png">
</div>
<div class="pbody">
<h4>HOW TO GET THE PHONEBOOK</h4>
<p>Books were delivered to every house in Lakewood and surrounding areas during the month of February. </p>
<h5>If you did not receive one after this time you may pick one up at either one of the Wine on 9 locations.</h5>
<div class="address">
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>North location</b><br/> 6545 Rt 9 North, Howell, NJ 07731</h6>
</div>
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>South location</b><br/> 945 River Ave, Lakewood, NJ 08701</h6>
</div>
</div>
</div>
</div>
Alternatively, you could use getComputedStyle to find the right property set in your stylesheet.
function openNav() {
navMenuStatus = window.getComputedStyle(document.getElementById('popup'), null).getPropertyValue('right');
if (navMenuStatus == '-300px') {
document.getElementById('popup').style.right = '0px';
} else {
document.getElementById('popup').style.right = '-300px';
}
}
.pmenu {
cursor: pointer;
width: 70px;
font-weight: 600;
color: #fff;
float: left;
}
.pmenu img {
padding: 5px 11px;
background-color: #fff000;
}
.pmenu p {
text-align: center;
padding: 10px 4px;
background-color: #356381;
margin: 0 0 0px;
font-size: 14px;
}
.pbody {
color: #fff;
float: left;
width: 300px;
background-color: #356381;
border-left: 5px solid #fff000;
}
.pbody p {
text-align: center;
font-size: 15px;
margin: 10px;
}
.pbody h4 {
text-align: center;
font-weight: 600;
margin: 0px;
color: #000;
background-color: #fff000;
padding: 10px 0px;
}
.pbody h5 {
font-size: 15px;
text-align: center;
background: #193e56;
padding: 15px;
}
.address {
text-align: center;
}
.address h6 {
color: #356381;
background-color: #fff000;
font-size: 14px;
padding: 10px 0px 10px 10px;
margin-top: 0px;
min-width: 245px;
text-align: left;
}
.aicon {
float: left;
width: 50px;
background-color: #193e56;
color: #fff;
padding: 14px 12px;
}
.aadd {
float: left;
color: #fff;
}
.popup {
position: absolute;
right: -300px;
top: 20px;
z-index: 3;
transition: 0.3s all;
}
<div class="popup" id="popup">
<div class="pmenu" onclick="openNav()">
<p>GET THE<br/>BOOK</p>
<img src="del.png">
</div>
<div class="pbody">
<h4>HOW TO GET THE PHONEBOOK</h4>
<p>Books were delivered to every house in Lakewood and surrounding areas during the month of February. </p>
<h5>If you did not receive one after this time you may pick one up at either one of the Wine on 9 locations.</h5>
<div class="address">
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>North location</b><br/> 6545 Rt 9 North, Howell, NJ 07731</h6>
</div>
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>South location</b><br/> 945 River Ave, Lakewood, NJ 08701</h6>
</div>
</div>
</div>
</div>
Perhaps better yet, use toggle() to toggle the element's CSS class in classList, as recommended by Arash Kazemi.
var trigger = document.getElementById('popup_trigger');
var popup = document.getElementById('popup');
function openNav() {
popup.classList.toggle('hide');
}
trigger.addEventListener('click', openNav);
.pmenu {
cursor: pointer;
width: 70px;
font-weight: 600;
color: #fff;
float: left;
}
.pmenu img {
padding: 5px 11px;
background-color: #fff000;
}
.pmenu p {
text-align: center;
padding: 10px 4px;
background-color: #356381;
margin: 0 0 0px;
font-size: 14px;
}
.pbody {
color: #fff;
float: left;
width: 300px;
background-color: #356381;
border-left: 5px solid #fff000;
}
.pbody p {
text-align: center;
font-size: 15px;
margin: 10px;
}
.pbody h4 {
text-align: center;
font-weight: 600;
margin: 0px;
color: #000;
background-color: #fff000;
padding: 10px 0px;
}
.pbody h5 {
font-size: 15px;
text-align: center;
background: #193e56;
padding: 15px;
}
.address {
text-align: center;
}
.address h6 {
color: #356381;
background-color: #fff000;
font-size: 14px;
padding: 10px 0px 10px 10px;
margin-top: 0px;
min-width: 245px;
text-align: left;
}
.aicon {
float: left;
width: 50px;
background-color: #193e56;
color: #fff;
padding: 14px 12px;
}
.aadd {
float: left;
color: #fff;
}
.popup {
position: absolute;
right: 0;
top: 20px;
z-index: 3;
transition: 0.3s all;
}
.popup.hide {
right: -300px;
}
<div class="popup hide" id="popup">
<div class="pmenu" id="popup_trigger">
<p>GET THE<br/>BOOK</p>
<img src="del.png">
</div>
<div class="pbody">
<h4>HOW TO GET THE PHONEBOOK</h4>
<p>Books were delivered to every house in Lakewood and surrounding areas during the month of February. </p>
<h5>If you did not receive one after this time you may pick one up at either one of the Wine on 9 locations.</h5>
<div class="address">
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>North location</b><br/> 6545 Rt 9 North, Howell, NJ 07731</h6>
</div>
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>South location</b><br/> 945 River Ave, Lakewood, NJ 08701</h6>
</div>
</div>
</div>
</div>

Because document.getElementById('popup').style.right is empty the first time you read it. The rule is not set for the element with id popup, instead it is set for the element with class popup.
A dirty quick solution would be checking for its equality with "0px". But a better way would be defining a class name .opened-popup with right equal to 0px. Then toggle that class on click. Like this:
function openNav() {
document.getElementById('popup').classList.toggle("opened-popup");
}
Look at this for a good solution:
https://codepen.io/anon/pen/EpyWQm

How to write jQuery or JavaScript equivalent for CSS

I would like to have an jQuery equivalent to CSS which when tab is clicked shows it content. For now, I'm able to get this from CSS only. I would like to have same function with jQuery or Javascript.
For example, now when SUN is clicked, it shows "It is Sunday" and when MON is clicked, it shows "It is Monday" and so on.
How can I have same functionality from jQuery or Javascript?
#import url('https://fonts.googleapis.com/cssfamily=Open+Sans:400,600,700');
* {
margin: 0;
padding: 0;
}
body {
padding: 2px;
background: #E5E4E2;
}
.tabinator {
background: #fff;
padding: 1px;
font-family: Open Sans;
margin-top: 10px;
}
.tabinator input {
display: none;
}
.tabinator label {
box-sizing: border-box;
display: inline-block;
padding: 5px 0.6%;
color: #ccc;
margin-bottom: -1px;
margin-left: -1px;
font-family: courier;
font-weight: bold;
}
.tabinator label:before {
content: '';
display: block;
width: 100%;
height: 15px;
background-color: #fff;
position: absolute;
bottom: -4px;
left: 0;
z-index: 10;
}
.tabinator label:hover {
color: red;
cursor: pointer;
}
.tabinator input:checked+label {
position: relative;
color: red;
font-weight: bold;
background: #fff;
border: 1px solid #bbb;
border-bottom: 1px solid #fff;
border-radius: 5px 5px 0 0;
font-size: 22px;
}
.tabinator input:checked+label:after {
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: 0 0 15px #939393;
}
#content1,
#content2,
#content3,
#content4,
#content5,
#content6,
#content7 {
display: none;
border-top: 1px solid #bbb;
padding: 3px;
margin-top: 2px;
}
#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4,
#tab5:checked~#content5,
#tab6:checked~#content6,
#tab7:checked~#content7 {
display: block;
box-shadow: 0 0 15px #939393;
}
<div class="tabinator">
<input type="radio" id="tab1" name="tabs" checked>
<label for="tab1">SUN</label>
<input type="radio" id="tab2" name="tabs">
<label for="tab2">MON</label>
<input type="radio" id="tab3" name="tabs">
<label for="tab3">TUE</label>
<input type="radio" id="tab4" name="tabs">
<label for="tab4">WED</label>
<input type="radio" id="tab5" name="tabs">
<label for="tab5">THU</label>
<input type="radio" id="tab6" name="tabs">
<label for="tab6">FRI</label>
<input type="radio" id="tab7" name="tabs">
<label for="tab7">SAT</label>
<div id="content1">
<p> This is Sunday</>
</div>
<div id="content2">
<p> This is Monday</p>
</div>
<div id="content3">
<p> This is Tuesday</p>
</div>
<div id="content4">
<p> This is Wednesday</p>
</div>
<div id="content5">
<p> This is Thursday</p>
</div>
<div id="content6">
<p> This is Friday</p>
</div>
<div id="content7">
<p> This is Saturday</p>
</div>

Is that your suitable ? (see snippet)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 2px;
background: #E5E4E2;
}
ul#daysList {
display: inline-block;
width: 100%;
list-style: none;
background: #fff;
padding: 1px 1px 0 1px;
font-family: Open Sans;
margin: 10px 0 0 0;
}
ul#daysList li {
position: relative;
box-sizing: border-box;
display: block;
float: left;
box-shadow: 0 0 15px #939393;
width: 70px;
height: 30px;
text-align: center;
line-height: 030px;
color: #ccc;
margin-bottom: -5px;
margin-left: -1px;
font-family: courier;
font-weight: bold;
}
ul#daysList li:hover {
color: red;
cursor: pointer;
}
ul#daysList li.currentDay {
color: red;
font-weight: bold;
background: #fff;
border: 1px solid #bbb;
border-bottom: 1px solid #fff;
border-radius: 5px 5px 0 0;
font-size: 22px;
}
ul#daysList li.currentDay:after {
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: 0 0 15px #939393;
}
.content {
display: none;
border-top: 1px solid #bbb;
padding: 0 7px;
margin-top: 0;
background: #fff;
width: 100%;
height: 40px;
line-height: 38px;
box-shadow: 0 0 15px #939393;
}
.currentContent {
display: inline-block;
}
</style>
</head>
<body>
<ul id="daysList">
<li data-day="content1" class="currentDay">SUN</li>
<li data-day="content2">MON</li>
<li data-day="content3">TUE</li>
<li data-day="content4">WED</li>
<li data-day="content5">THU</li>
<li data-day="content6">FRI</li>
<li data-day="content7">SAT</li>
</ul>
<div id="content1" class="content currentContent">
<p> This is Sunday</p>
</div>
<div id="content2" class="content">
<p> This is Monday</p>
</div>
<div id="content3" class="content">
<p> This is Tuesday</p>
</div>
<div id="content4" class="content">
<p> This is Wednesday</p>
</div>
<div id="content5" class="content">
<p> This is Thursday</p>
</div>
<div id="content6" class="content">
<p> This is Friday</p>
</div>
<div id="content7" class="content">
<p> This is Saturday</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function () { // Jquery ready. for complete page loaded
$("#daysList li").click(function () {
var
content_id = "#"+ $(this).data("day");
$("#daysList li").removeClass("currentDay");
$(this).addClass("currentDay");
$(".content").removeClass("currentContent");
$(content_id).addClass("currentContent");
});
}); // Jquery
</script>
</body>
</html>

We Keep Coding

JavaScript is the programming language of the Web.

I can not make the buttons workable - javascript

If you are going to want to bind your buttons that are hidden then my suggstion would be to switch to the following format $(document).on('click', '.qustwo', function() { ...your code here... }); That should take care of it.

Related

HTML and JavaScript Issue 'Uncaught TypeError: Cannot set property 'textContent' of null' found in console

How can I reverse the order of div elements upside down on 'onclick'?

How to toggle single class in jquery without affecting same class elements?

Onclick function not working on first click

How to write jQuery or JavaScript equivalent for CSS

Categories

Resources