I am trying to query a cloned element in my dom and queryselector can not find it. Specifically #reply_form brings up nothing despite the id being used in the template. I've also tried ("#reply_form"+post_id) since I re id it at the bottom before pushing it to the dom and nothing. I'm all out of ideas.
Here is the code:
<template id="reply_template">
<div class="lk">
<img class="profile_image" />
<div>
<div class="user">
<div class="reply_author"></div>
<div class="reply-body"></div>
</div>
<div class="reply">
<div class="d-flex align-items-center">
<i id="upvote" class="fas fa-arrow-up hover"></i>
<span id="upvote_count_badge" class="badge bg-secondary"></span>
<i id="downvote" class="fas fa-arrow-down hover"></i>
</div>
<div class="reply_comment" id="reply">Reply</div>
<div id="post_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal">
<i class="fas fa-award hover"></i>
</div>
</div>
<div id="vl" class="vl"></div>
<form id="reply_form" class="form-hidden">
<img class="profile_image"/>
<input class="cmt-reply" type="text" placeholder="Write a reply2"/>
</form>
<div id="reply_loader"><!--Nested Replies go here--></div>
</div>
</div>
</template>
<script>
function loadReplies(post_id, count) {
var reply_loader = document.querySelector('#reply_loader'+post_id)
var reply_template = document.querySelector('#reply_template');
if (count==0) {
fetch('/_load_replies?f='+post_id).then((response) => {
// Convert the response data to JSON
response.json().then((data) => {
for (var i = 0; i < data.length; i++) {
//add_post(template, counter)
// Clone the HTML template
let template_clone = reply_template.content.cloneNode(true);
// Query & update the template content
let post_id=data[i].post_id;
let post_url=data[i].post_url;
let author=data[i].author;
let author_id=data[i].author_id;
let post_saved=data[i].current_user.post_saved;
let post_upvoted=data[i].current_user.post_upvoted;
let post_downvoted=data[i].current_user.post_downvoted;
let current_user=data[i].current_user.current_user;
let is_moderator=data[i].current_user.is_moderator;
let is_big_top_moderator=data[i].current_user.is_big_top_moderator;
let awards=data[i].awards;
let media_url=data[i].media_url;
let community=data[i].community;
profile_images=template_clone.querySelectorAll(".profile_image");
for(var k=0; k<profile_images.length; k++) {
profile_images[k].src=data[i].post_profile_image;
}
let top=data[i].author;
top+=" "+moment(data[i].timestamp).fromNow();
if (awards) {
top+=' ';
for(var key in awards) {
top+=awards[key]+' '+key;
}
}
if (post_upvoted) {
template_clone.querySelector("#upvote").setAttribute("style", "color: white");
template_clone.querySelector("#downvote").setAttribute("style", "color: gray");
} else if (post_downvoted) {
template_clone.querySelector("#upvote").setAttribute("style", "color: gray");
template_clone.querySelector("#downvote").setAttribute("style", "color: white");
} else {
template_clone.querySelector("#upvote").setAttribute("style", "color: gray");
template_clone.querySelector("#downvote").setAttribute("style", "color: gray");
}
template_clone.querySelector("#upvote").setAttribute("onclick", "vote("+post_id+",1)");
template_clone.querySelector("#downvote").setAttribute("onclick", "vote("+post_id+",0)");
template_clone.querySelector("#post_award_modal").setAttribute("onclick", "build_award_modal("+post_id+")");
template_clone.querySelector(".reply_author").innerHTML=top
template_clone.querySelector(".reply-body").innerHTML=data[i].body;
template_clone.querySelector("#upvote_count_badge").innerHTML=data[i].upvotes-data[i].downvotes;
//it finds #reply no problem
template_clone.querySelector("#reply").addEventListener("click", (e)=>{
e.target.classList.toggle("blue");
//It can not find this at all no matter what. I re id it at the bottom
console.log(template_clone.querySelector("#reply_form"+post_id))
template_clone.querySelector("#reply_form"+post_id).setAttribute("style", "color: blue")
template_clone.querySelector("#vl")
});
//re id
template_clone.querySelector("#upvote").id="upvote"+post_id;
template_clone.querySelector("#upvote_count_badge").id="upvote_count_badge"+post_id;
template_clone.querySelector("#downvote").id="downvote"+post_id;
template_clone.querySelector("#reply_loader").id="reply_loader"+post_id;
template_clone.querySelector("#reply").id="reply"+post_id;
template_clone.querySelector("#reply_form").id="reply_form"+post_id;
template_clone.querySelector("#vl").id="vl"+post_id;
reply_loader.appendChild(template_clone);
}
})
})
}
}
</script>
Here is a code snippet:
function open_form(post_id) {
console.log("reply"+post_id)
document.getElementById("#reply"+post_id).classList.toggle("blue")
document.getElementById("#reply_form"+post_id).classList.toggle("open")
document.getElementsByID("#vl"+post_id).classList.toggle("open");
}
.like-comment, .reply_comment{
cursor: pointer;
}
.vl{
border-left: 1px solid white;
border-bottom: 1px solid white;
border-bottom-left-radius: 30px;
width: 5%;
top: 25px;
position: absolute;
height: 100%;
left: -20px;
display: none;
}
.thumb.open, .vl.open, .form-hidden.open{
display: flex;
}
.form-hidden{
position: relative;
transform: translateX(35px);
display: none;
}
.profile_image{
width: 30px;
height: 30px;
border-radius: 50%;
}
.cmt-reply{
width: 75%;
height: 30px;
padding: 5px;
border-radius: 8px;
border: none;
margin-left: 5px;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<link href="/static/css/style.css" rel="stylesheet">
<script src="https://js.stripe.com/v3/"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<!--Broken Code here-->
<div class="reply_comment" id="reply64" onclick="open_form(64)">Reply</div>
<div id="vl64" class="vl"></div>
<form id="reply_form64" class="form-hidden">
<img class="profile_image" src="/avatars/1be25219994e4ef695e1c6f0d4d128ac_m.png">
<input class="cmt-reply" type="text" placeholder="Write a reply2">
</form>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
When using getElementById you don't need to pass # in the string. check following snippet.
function open_form(post_id) {
console.log("reply" + post_id)
document.getElementById("reply" + post_id).classList.toggle("blue");
document.getElementById("reply_form" + post_id).classList.toggle("open");
document.getElementById("vl" + post_id).classList.toggle("open");
}
.like-comment,
.reply_comment {
cursor: pointer;
}
.vl {
border-left: 1px solid white;
border-bottom: 1px solid white;
border-bottom-left-radius: 30px;
width: 5%;
top: 25px;
position: absolute;
height: 100%;
left: -20px;
display: none;
}
.thumb.open,
.vl.open,
.form-hidden.open {
display: flex;
}
.form-hidden {
position: relative;
transform: translateX(35px);
display: none;
}
.profile_image {
width: 30px;
height: 30px;
border-radius: 50%;
}
.cmt-reply {
width: 75%;
height: 30px;
padding: 5px;
border-radius: 8px;
border: none;
margin-left: 5px;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<link href="/static/css/style.css" rel="stylesheet">
<script src="https://js.stripe.com/v3/"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<!--Broken Code here-->
<div class="reply_comment" id="reply64" onclick="open_form(64)">Reply</div>
<div id="vl64" class="vl"></div>
<form id="reply_form64" class="form-hidden">
<img class="profile_image" src="/avatars/1be25219994e4ef695e1c6f0d4d128ac_m.png">
<input class="cmt-reply" type="text" placeholder="Write a reply2">
</form>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
Here is getElementById documentation on mdn.
Related
I have a problem. I want to use a cookie banner for my website.
I have the problem that I built my website with Boostrap. And as soon as I insert this code into my real website, the banner is displayed at the top and no longer in the style.
So it's displayed above stored. How can I insert this code so that it works properly?
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cookie Consent Banner</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="cookiePopup" class="hide">
<img src="cookie.png" />
<p>
Our website uses cookies to provide your browsing experience and
relevant information. Before continuing to use our website, you agree &
accept of our Cookie Policy & Privacy.
</p>
<button id="acceptCookie">Accept</button>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
style.css
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #f5f8ff;
}
#cookiePopup {
background-color: #ffffff;
position: absolute;
font-size: 14px;
width: 70vw;
max-width: 42.85em;
box-shadow: 0 0 2em rgba(5, 0, 31, 0.15);
font-family: "Poppins", sans-serif;
text-align: justify;
line-height: 1.8em;
padding: 2em 1.4em;
border-radius: 6px;
transition: all 0.5s ease-in;
}
#cookiePopup img {
display: block;
width: 3.75em;
transform: translateZ(0);
position: relative;
margin: auto;
}
#cookiePopup p {
text-align: center;
margin: 1.4em 0;
}
#cookiePopup button {
background-color: #6859fe;
border: none;
color: #ffffff;
font-size: 1.2em;
padding: 1em 1.4em;
display: block;
position: relative;
margin: auto;
border-radius: 5px;
}
#cookiePopup a {
color: #6859fe;
}
.hide {
visibility: hidden;
bottom: 0;
right: 2em;
}
.show {
visibility: visible;
bottom: 2em;
right: 2em;
}
#media only screen and (max-width: 37.5em) {
#cookiePopup {
width: 100%;
}
.hide {
bottom: 2em;
right: 0;
}
.show {
right: 0;
bottom: 0;
}
}
script.js
let popUp = document.getElementById("cookiePopup");
//When user clicks the accept button
document.getElementById("acceptCookie").addEventListener("click", () => {
//Create date object
let d = new Date();
//Increment the current time by 1 minute (cookie will expire after 1 minute)
d.setMinutes(2 + d.getMinutes());
//Create Cookie withname = myCookieName, value = thisIsMyCookie and expiry time=1 minute
document.cookie = "myCookieName=thisIsMyCookie; expires = " + d + ";";
//Hide the popup
popUp.classList.add("hide");
popUp.classList.remove("show");
});
//Check if cookie is already present
const checkCookie = () => {
//Read the cookie and split on "="
let input = document.cookie.split("=");
//Check for our cookie
if (input[0] == "myCookieName") {
//Hide the popup
popUp.classList.add("hide");
popUp.classList.remove("show");
} else {
//Show the popup
popUp.classList.add("show");
popUp.classList.remove("hide");
}
};
//Check if cookie exists when page loads
window.onload = () => {
setTimeout(() => {
checkCookie();
}, 2000);
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home - Brand</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cabin:700&display=swap">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/fontawesome5-overrides.min.css">
<link rel="stylesheet" href="assets/css/Footer-Dark.css">
<link rel="stylesheet" href="assets/css/Hero-Clean-Reverse.css">
<link rel="stylesheet" href="assets/css/untitled.css">
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
<link rel="stylesheet" href="assets/css/style.css" />
/>
</head>
<body id="page-top" data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="77" style="background: var(--bs-body-bg);font-family: Cabin, sans-serif;--bs-primary: #42DCA3;--bs-primary-rgb: 66,220,163;">
<div id="cookiePopup" class="hide">
<img src="assets/img/cookie.png" />
<p>
Our website uses cookies to provide your browsing experience and
relevant information. Before continuing to use our website, you agree &
accept of our Cookie Policy & Privacy.
</p>
<button id="acceptCookie">Accept</button>
</div>
<nav class="navbar navbar-light navbar-expand-md fixed-top" id="mainNav">
<div class="container"><a class="navbar-brand" href="index.html">Name</a><button data-bs-toggle="collapse" class="navbar-toggler navbar-toggler-right" data-bs-target="#navbarResponsive" type="button" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" value="Menu"><i class="fa fa-bars"></i></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item nav-link"><a class="nav-link active" href="kontakt.html" style="background: rgba(255,255,255,0);">Kontakt</a></li>
<li class="nav-item nav-link"></li>
<li class="nav-item nav-link"></li>
</ul>
</div>
</div>
</nav>
</section>
<section class="mb-5"></section>
<footer class="text-center bg-dark" style="background: rgb(0,0,0);">
...
</footer>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/smart-forms.min.js"></script>
<script src="assets/js/grayscale.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
If your banner is displayed at the top and no longer in the style it could be some problem in the css;
Try commenting out these css one at a time, and by reloading the page you can see if one of them is the culprit:
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/fontawesome5-overrides.min.css">
<link rel="stylesheet" href="assets/css/Footer-Dark.css">
<link rel="stylesheet" href="assets/css/Hero-Clean-Reverse.css">
<link rel="stylesheet" href="assets/css/untitled.css">
Alternatively, you can put the css "style.css" inside the html code and add !important
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home - Brand</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css"><!--EDIT for coding-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cabin:700&display=swap">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/fontawesome5-overrides.min.css">
<link rel="stylesheet" href="assets/css/Footer-Dark.css">
<link rel="stylesheet" href="assets/css/Hero-Clean-Reverse.css">
<link rel="stylesheet" href="assets/css/untitled.css">
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"/>
<!--<link rel="stylesheet" href="assets/css/style.css" />-->
</head>
<!-- Stylesheet on the html -->
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #f5f8ff;
}
#cookiePopup {
background-color: #ffffff;
position: absolute;
font-size: 14px;
width: 70vw;
max-width: 42.85em;
box-shadow: 0 0 2em rgba(5, 0, 31, 0.15);
font-family: "Poppins", sans-serif;
text-align: justify;
line-height: 1.8em;
padding: 2em 1.4em;
border-radius: 6px;
transition: all 0.5s ease-in;
}
#cookiePopup img {
display: block;
width: 3.75em;
transform: translateZ(0);
position: relative;
margin: auto;
}
#cookiePopup p {
text-align: center;
margin: 1.4em 0;
}
#cookiePopup button {
background-color: #6859fe;
border: none;
color: #ffffff;
font-size: 1.2em;
padding: 1em 1.4em;
display: block;
position: relative;
margin: auto;
border-radius: 5px;
}
#cookiePopup a {
color: #6859fe;
}
.hide {
visibility: hidden;
bottom: 0;
right: 2em;
}
.show {
visibility: visible;
bottom: 2em;
right: 2em;
}
#media only screen and (max-width: 37.5em) {
#cookiePopup {
width: 100%;
}
.hide {
bottom: 2em;
right: 0;
}
.show {
right: 0;
bottom: 0;
}
}
</style>
<body id="page-top" data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="77" style="background: var(--bs-body-bg);font-family: Cabin, sans-serif;--bs-primary: #42DCA3;--bs-primary-rgb: 66,220,163;">
<!--COOKIES-->
<div id="cookiePopup" class="hide">
<img src="cookie.png" />
<p>
Our website uses cookies to provide your browsing experience and
relevant information. Before continuing to use our website, you agree &
accept of our Cookie Policy & Privacy.
</p>
<button id="acceptCookie">Accept</button>
</div>
<nav class="navbar navbar-light navbar-expand-md fixed-top" id="mainNav">
<div class="container"><a class="navbar-brand" href="index.html">Name</a><button data-bs-toggle="collapse" class="navbar-toggler navbar-toggler-right" data-bs-target="#navbarResponsive" type="button" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" value="Menu"><i class="fa fa-bars"></i></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item nav-link"><a class="nav-link active" href="kontakt.html" style="background: rgba(255,255,255,0);">Kontakt</a></li>
<li class="nav-item nav-link"></li>
<li class="nav-item nav-link"></li>
</ul>
</div>
</div>
</nav>
<!--Section-->
<section class="mb-5"></section>
<!--Footer-->
<footer class="text-center bg-dark" style="background: rgb(0,0,0);">
...
</footer>
<!-- Script -->
<script>
let popUp = document.getElementById("cookiePopup");
//When user clicks the accept button
document.getElementById("acceptCookie").addEventListener("click", () => {
//Create date object
let d = new Date();
//Increment the current time by 1 minute (cookie will expire after 1 minute)
d.setMinutes(2 + d.getMinutes());
//Create Cookie withname = myCookieName, value = thisIsMyCookie and expiry time=1 minute
document.cookie = "myCookieName=thisIsMyCookie; expires = " + d + ";";
//Hide the popup
popUp.classList.add("hide");
popUp.classList.remove("show");
});
//Check if cookie is already present
const checkCookie = () => {
//Read the cookie and split on "="
let input = document.cookie.split("=");
//Check for our cookie
if (input[0] == "myCookieName") {
//Hide the popup
popUp.classList.add("hide");
popUp.classList.remove("show");
} else {
//Show the popup
popUp.classList.add("show");
popUp.classList.remove("hide");
}
};
//Check if cookie exists when page loads
window.onload = () => {
setTimeout(() => {
checkCookie();
}, 2000);
};
</script>
<footer class="text-center bg-dark" style="background: rgb(0,0,0);">
...
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js"></script><!--EDIT for coding-->
<script src="assets/js/smart-forms.min.js"></script>
<script src="assets/js/grayscale.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
In my browser works fine
I am trying to make a simple To-Do like application. I want the "Tasks" which I add to remain even after closing the window or at least after refreshing. I tried to achieve that using MongoDB but I couldn't.
I think a simpler way to achieve this is by using arrays but I am not able to understand how to do that.
Please suggest me some way to achieve the above results....
let div = document.getElementById('tasks');
let add = document.getElementById('add');
let newTask = document.getElementById('newTask');
let c = 0;
add.addEventListener("click", function () {
let cbox = document.createElement("input");
let d = document.createElement("div");
let newt = newTask.value;
newTask.value = null;
cbox.type = "checkbox";
cbox.id = "check";
div.append(d);
d.id = "nd";
d.append(cbox);
d.append(newt);
c += 1;
if (c === 12) {
add.disabled = true;
newTask.value = "Stack Overflow";
}
});
/* body {
background-color: #42f5f5
} */
.card {
margin: 0 auto;
float: none;
/* margin-bottom: 10px; */
/* border: none; */
/* background-color: rgb(248, 179, 88); */
}
.container {
margin-top: 2.5rem;
}
#title {
width: 200px;
border: none;
font-size: larger;
font-weight: bold;
}
#newTask {
width: 200px;
}
#add {
margin-top: 1rem;
}
#newTask {
margin-top: 1rem;
}
#plus {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
}
#nd {
font-size: 20px;
margin-top: 5px;
margin-bottom: 10px;
}
#check {
margin-left: 20px;
height: 15px;
width: 15px;
margin-right: 10px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="ToDo.css" rel="stylesheet">
<title>To-Do</title>
</head>
<body>
<div class="container">
<div class="card" style="width: 35rem;height: 42rem;">
<div class="card-body">
<p style="font-size: 2rem;font-weight: bold;">
<input type="text" class="form-control" id="title" placeholder="Title">
</p>
<p id="main">
<div id="tasks">
</div>
<form class="form-inline">
<div class="form-group mx-sm-3 mb-2">
<input type="text" class="form-control" id="newTask" autocomplete="off"
placeholder="Enter new task">
</div>
<button type="button" class="btn btn-primary mb-2" id="add">Add Task</button>
</form>
</p>
</div>
</div>
</div>
<script src="ToDo.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
You can use localStorage to save data in browser storage.
here's link to documentation for localStorage .
//to set data in local storage
localStorage.setItem('myCat', 'Tom')
//to get data from localStorage
const cat = localStorage.getItem('myCat');
//to remove data from localStorage
localStorage.removeItem('myCat');
//for object you can stringify them
var myObj = [{name:"test", time:"Date 2017-02-03T08:38:04.449Z"}];
localStorage.setItem('item', JSON.stringify(myObj));
//Then when you want to retrieve data, you need to parse the string to object again.
var getObj = JSON.parse(localStorage.getItem('item'));
Hello I am creating a game similar to Simon. Where a user has to memorize a random color generated by the random color generator. When a button is clicked it is supposed to play a sound. I am able to play all the sounds when I click the buttons. I created a function that recognizes when the enter key is pressed to start the game. The game generates a random color with a corresponding sound and the user is supposed to click the same color. I am getting a ERROR NOT FOUND sounds/undefined.mp3 and also a DOM Exception: no supported source was found. It seems not to be able to find the right file.
function nextSequence() {
level = level + 1;
randomNumber = Math.floor(Math.random * 4);
randomChosenColor = buttonColors[randomNumber];
gamePattern.push(randomChosenColor);
console.log(gamePattern);
//$("#" + randomChosenColor).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
animatePress(randomChosenColor);
playSound(randomChosenColor);
// animatePress(randomChosenColor);
}
$(".btn").click(function() {
var userChosenColor = $(this).attr("id");
userClickedPattern.push(userChosenColor);
console.log(userClickedPattern);
playSound(userChosenColor);
animatePress(userChosenColor);
});
function playSound(variable) {
$("#" + variable).ready(function() {
var audio = new Audio("sounds/" + variable + ".mp3");
audio.play();
});
}
$(document).on('keypress', function(e) {
if(e.which == 13) {
var h1header = document.getElementById("level-started").innerHTML = "Level " + level;
nextSequence();
started = true;
}
});
h1 {
text-align: center;
margin-bottom: 5%;
font-family: "Ubuntu";
font-size: 3rem;
}
body {
text-align: center;
}
.container {
width: 50%;
margin: auto;
}
.btn {
display: inline-block;
width: 200px;
height: 200px;
border: 10px solid black;
border-radius: 6%;
margin: 25px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
.pressed {
box-shadow: 0 0 20px white;
background-color: grey;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Simon Game</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400;900&family=Ubuntu:wght#300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="intro" id = "level-started">Press Enter Key to start </h1>
<div class="container">
<div class="row">
<div class="btn green" type="button" id="green">
</div>
<div class="btn red" type="button" id="red">
</div>
</div>
<div class="row">
<div class="btn yellow" type="button" id="yellow">
</div>
<div class="btn blue" type="button" id="blue">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script type="text/javascript" src="index.js">
</script>
</body>
<footer>© Hello World </footer>
</html>
const adder = document.querySelector('.adder')
const gridcont = document.querySelector('.gridbox')
const text = document.querySelector('p')
const button = document.querySelector('.button')
const popup = document.querySelector('.popup-wrapper')
const popuptext = document.querySelector('.popup-content')
const close = document.querySelector('.popup-close')
const notecard = document.querySelector('.card')
const notetext = document.querySelector('.card-text')
const pi = document.querySelector('p')
let counter = 0;
let html;
let note;
let html2
/*close.addEventListener('click', e =>{
popup.style.display ='none'
}) */
popup.addEventListener('click', e=>{
popup.style.display ='none'
})
const template = note =>{
html = `<div class="card">
<div class="card-body">
<h5 class="card-title">Note ${counter}</h5>
<p class="card-text">${note}</p>
<button class="button" type="button">view detail</button>
</div>
</div>`
gridcont.innerHTML += html
}
adder.addEventListener('submit', e =>{
e.preventDefault()
note = adder.add.value
if(note.length){
counter++
template(note)
adder.reset()
}
})
gridcont.addEventListener('click', e =>{
if(e.target.classList.contains('button')){
popup.style.display = 'block'
popuptext.innerHTML = html
}
});
.card{
margin-left: 2rem;
margin-top: 2rem;
}
.form-control{
max-width: 500px;
}
.blu{
color: blue;
}
.gridbox{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.button{
color:white;
background-color: rgb(41, 41, 241);
border-color: rgb(41, 41, 241);;
}
.card-text{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
.popup-wrapper{
display: none;
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.popup{
font-family: arial;
text-align: center;
width: 100%;
max-width: 500px;
margin: 10% auto;
padding: 20px;
background: white;
position: relative;
}
.popup-close{
position: absolute;
top: 5px;
right: 8px;
cursor: pointer;
}
.card-text-show{
overflow: unset;
text-overflow: unset;
max-width: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Note taker</title>
</head>
<body>
<div class="head text-center">
<header>
<h1>Note taker app</h1>
<h8 class="blu">add note:</p>
</header>
<form class="adder">
<input class="form-control m-auto" type="text" name="add" placeholder="Enter your note here">
</form>
</div>
<div class="gridbox">
</div>
<div class="popup-wrapper">
<div class="popup">
<div class="popup-close">x</div>
<div class="popup-content">
<h5 class="card-title"> </h5>
<p class="card-text"> </p>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
im trying to make note taker app and each time i add the note and click the view detail button
it shows me only the content of last item added regardless of which one i press i dont know how to write with loop or forEach method i tried it but i failed can anyone explain what to do here im a begginer JS
const adder = document.querySelector('.adder')
const gridcont = document.querySelector('.gridbox')
const text = document.querySelector('p')
const button = document.querySelector('.button')
const popup = document.querySelector('.popup-wrapper')
const popuptext = document.querySelector('.popup-content')
const close = document.querySelector('.popup-close')
const notecard = document.querySelector('.card')
const notetext = document.querySelector('.card-text')
const pi = document.querySelector('p')
let counter = 0;
let html;
let note;
let html2
/*close.addEventListener('click', e =>{
popup.style.display ='none'
}) */
popup.addEventListener('click', e=>{
popup.style.display ='none'
})
const template = note =>{
html = `<div class="card">
<div class="card-body">
<h5 class="card-title">Note ${counter}</h5>
<p class="card-text">${note}</p>
<button class="button" type="button">view detail</button>
</div>
</div>`
gridcont.innerHTML += html
}
adder.addEventListener('submit', e =>{
e.preventDefault()
note = adder.add.value
if(note.length){
counter++
template(note)
adder.reset()
}
})
gridcont.addEventListener('click', e =>{
if(e.target.classList.contains('button')){
popup.style.display = 'block'
popuptext.innerHTML = html
}
});
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Note taker</title>
</head>
<body>
<div class="head text-center">
<header>
<h1>Note taker app</h1>
<h8 class="blu">add note:</p>
</header>
<form class="adder">
<input class="form-control m-auto" type="text" name="add" placeholder="Enter your note here">
</form>
</div>
<div class="gridbox">
</div>
<div class="popup-wrapper">
<div class="popup">
<div class="popup-close">x</div>
<div class="popup-content">
<h5 class="card-title"> </h5>
<p class="card-text"> </p>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
I dont really know many methods so i just use one way im stuck on this project for 4 days
CSS
.card{
margin-left: 2rem;
margin-top: 2rem;
}
.form-control{
max-width: 500px;
}
.blu{
color: blue;
}
.gridbox{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.button{
color:white;
background-color: rgb(41, 41, 241);
border-color: rgb(41, 41, 241);;
}
.card-text{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
.popup-wrapper{
display: none;
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.popup{
font-family: arial;
text-align: center;
width: 100%;
max-width: 500px;
margin: 10% auto;
padding: 20px;
background: white;
position: relative;
}
.popup-close{
position: absolute;
top: 5px;
right: 8px;
cursor: pointer;
}
.card-text-show{
overflow: unset;
text-overflow: unset;
max-width: 200px;
}
On popuptext.innerHTML = html line you are making the mistake, so what is happening is you are setting the innerHTML of popuptext as variable html, so this line tries find html variable and goes to part of this code,
const template = note =>{
html = `<div class="card">
<div class="card-body">
<h5 class="card-title">Note ${counter}</h5>
<p class="card-text">${note}</p>
<button class="button" type="button">view detail</button>
</div>
</div>`
gridcont.innerHTML += html
}
and then it finds the HTML variable here, however the value of this html variable will be whatever you have set it to earlier, so if you add three notes then the value of the html variable will be innerhtml of the latest/last note that you added.
To fix that I have made a change as popuptext.innerHTML = e.target.parentElement.innerHTML, this line makes sure that whatever element you are clicking that element's associated innerhtml is added to the popup.
const adder = document.querySelector('.adder')
const gridcont = document.querySelector('.gridbox')
const text = document.querySelector('p')
const button = document.querySelector('.button')
const popup = document.querySelector('.popup-wrapper')
const popuptext = document.querySelector('.popup-content')
const close = document.querySelector('.popup-close')
const notecard = document.querySelector('.card')
const notetext = document.querySelector('.card-text')
const pi = document.querySelector('p')
let counter = 0;
let html;
let note;
let html2
/*close.addEventListener('click', e =>{
popup.style.display ='none'
}) */
popup.addEventListener('click', e=>{
popup.style.display ='none'
})
const template = note =>{
html = `<div class="card">
<div class="card-body">
<h5 class="card-title">Note ${counter}</h5>
<p class="card-text">${note.substring(0,6)}...<span class="only-popup">${note}</span></p>
<button class="button" type="button">view detail</button>
</div>
</div>`
gridcont.innerHTML += html
}
adder.addEventListener('submit', e =>{
e.preventDefault()
note = adder.add.value
if(note.length){
counter++
template(note)
adder.reset()
}
})
gridcont.addEventListener('click', e =>{
if(e.target.classList.contains('button')){
popup.style.display = 'block'
let temp = `<div class="card">
<div class="card-body">
<h5 class="card-title">${e.target.parentElement.querySelector('.card-title').innerText}</h5>
<p class="card-text">${e.target.parentElement.querySelector('.only-popup').innerText}</p>
<button class="button" type="button">view detail</button>
</div>
</div>`
popuptext.innerHTML = temp
}
});
.card{
margin-left: 2rem;
margin-top: 2rem;
}
.form-control{
max-width: 500px;
}
.blu{
color: blue;
}
.gridbox{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.button{
color:white;
background-color: rgb(41, 41, 241);
border-color: rgb(41, 41, 241);;
}
.card-text{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
.popup-wrapper{
display: none;
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.popup{
font-family: arial;
text-align: center;
width: 100%;
max-width: 500px;
margin: 10% auto;
padding: 20px;
background: white;
position: relative;
}
.popup-close{
position: absolute;
top: 5px;
right: 8px;
cursor: pointer;
}
.only-popup{
display:none;
}
.card-text-show{
overflow: unset;
text-overflow: unset;
max-width: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Note taker</title>
</head>
<body>
<div class="head text-center">
<header>
<h1>Note taker app</h1>
<h8 class="blu">add note:</p>
</header>
<form class="adder">
<input class="form-control m-auto" type="text" name="add" placeholder="Enter your note here">
</form>
</div>
<div class="gridbox">
</div>
<div class="popup-wrapper">
<div class="popup">
<div class="popup-close">x</div>
<div class="popup-content">
<h5 class="card-title"> </h5>
<p class="card-text"> </p>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Problem: My password generator will not work until I move my slider. However, I would like the value to default to 8. So if someone loads page, and clicks generate PW, a random pw of 8 would populate.
//generate a password function
function passwordGenerator () {
// Length of the password?
var passwordLength = document.getElementById('num').value;
// characters options for PW
const values = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!##$%^&*()";
// defining password
var password = "";
// creating a loop to choose password
for (var i = 1; i <= passwordLength; i++) {
password = password + values.charAt(Math.floor(Math.random() * Math.floor(values.length -1)));
}
// adding the password to the content area
document.getElementById('display').value = password;
}
// adjust value when moving slider
function sliderMove(){
document.getElementById('num').value = document.getElementById('slider1').value;
document.getElementById('num').textContent = document.getElementById('num').value;
}
//copy to clipboard
function selectText() {
const input = document.getElementById('display');
input.focus();
input.select();
document.execCommand('copy')
}
.backgroundWhite {
background-color: white;
border: darkgray 2px solid;
padding-bottom: 25px;
}
.backgroundGray {
background-color: lightgray;
width: 100%;
height: 500%;
}
.passwordBox {
width: 500px;
height: 200px;
text-align: center;
}
body {
height: 100%;
background-color: lightgray;
}
.headText {
padding: 50px;
}
.buttonOnClick {
margin: 20px;
}
.passGenButton {
color: white;
background-color: red;
margin-right: 15%;
height: 40px;
border-radius: 12px;
}
.copyButton {
margin-left: 15%;
background-color: darkgray;
color: white;
height: 40px;
border-radius: 12px;
}
textarea {
padding: 20px;
font-size: 19px;
color: #4f4f4f;
}
.titleClass {
padding-top: 10px;
}
#media (max-width: 537px) {
.passGenButton {
color: white;
background-color: red;
margin-right: 1%;
height: 40px;
border-radius: 12px;
}
.copyButton {
margin-left: 1%;
background-color: darkgray;
color: white;
height: 40px;
border-radius: 12px;
}
.passwordBox {
width: 400px;
height: 200px;
text-align: center;
}
.backgroundWhite {
background-color: white;
border: darkgray 2px solid;
padding-bottom: 25px;
padding-left: 20px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="app.js"></script>
<title>Random Password Generator</title>
</head>
<body>
<div class="conatiner backgroundGray">
<div class="row">
<div class="col-12">
<div class="topText">
<!-- Header -->
<h1 class="text-center text-dark headText">Password Generator</h1>
</div>
<div class="container">
<div class='row'>
<div class="col-lg-12 col-sm-12 text-center">
<div class="content backgroundWhite">
<!-- Sub Header -->
<h4 class="titleClass">Generate a Password</h4>
<br />
<!-- Slider -->
<div class="slidecontainer">
<p>Select PW Length</p>
<input id="slider1" type="range" min="8" max="128" value="8" onchange="sliderMove()"
class="robClass">
<span id="num">8</span>
</div>
<br />
<!-- Password Box -->
<textarea class="passwordBox" type="text" id="display"
placeholder="Your Secure Password"></textarea>
<br />
<button onclick="passwordGenerator()" class="passGenButton buttonOnClick">Generate
Password</button>
<button class="buttonOnClick copyButton" defaultValue="8" onclick="selectText()">Copy to
clipboard</button>
<div id='length'></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have played with HTML and JS. I have tried to create a var num = 8;
no luck.
Does anyone have any ideas on how I can do this?
At the start of your passwordGenerator function:
var passwordLength = document.getElementById('num').value;
This element (<span id="num">8</span>) doesn't have a value attribute, so your function will try to generate a password with a length equal to undefined.
You should get the value from your slider instead:
var passwordLength = document.getElementById('slider1').value;
You can also simplify your function sliderMove function:
function sliderMove() {
document.getElementById('num').textContent = document.getElementById('slider1').value;
}