I am just fooling around with some JavaScript, I am new to it so this is probably a simple solution. Basically what I want is for only 1 div to be visible at a time so if a user clicks on one link to expose a div the current div that is exposed will collapse and the new one clicked will appear.
I have included the code below:
<html>
<head>
<title> test</title>
<LINK href="blah.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript">
function toggle2(showHideDiv, switchTextDiv) {
var ele = document.getElementById(showHideDiv);
var text = document.getElementById(switchTextDiv);
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "restore";
}
else {
ele.style.display = "block";
text.innerHTML = "collapse";
}
}
function toggle22(showHideDiv2, switchTextDiv2) {
var ele = document.getElementById(showHideDiv2);
var text = document.getElementById(switchTextDiv2);
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "restore";
}
else {
ele.style.display = "block";
text.innerHTML = "collapse";
}
}
</script>
</head>
<body>
<div id="mainContent">
<div id="headerDiv">
<div id="titleText">Change Password - Click here ==></div><a id="myHeader" href="javascript:toggle2('myContent','myHeader');" >restore</a>
</div>
<div style="clear:both;"></div>
<div id="contentDiv">
<div id="myContent" style="display: none;">This is the content that is dynamically being collapsed.</div>
<!--DIV2 -->
<div id="headerDiv2">
<div id="titleText2">Change Username - Click here ==></div><a id="myHeader2" href="javascript:toggle22('myContent2','myHeader2');" >restore</a>
</div>
<div style="clear:both;"></div>
<div id="contentDiv2">
<div id="myContent2" style="display: none;">This is the content that is dynamically being collapsed.</div>
</div>
</div>
</body>
</html>
The CSS:
#headerDiv, #contentDiv {
float: left;
width: 510px;
}
#titleText {
float: left;
font-size: 1.1em;
font-weight: bold;
margin: 5px;
}
#myHeader {
font-size: 1.1em;
font-weight: bold;
margin: 5px;
}
#headerDiv {
background-color: #0037DB;
color: #9EB6FF;
}
#contentDiv {
background-color: #FFE694;
}
#myContent {
margin: 5px 10px;
}
#headerDiv a {
color: gold;
float: right;
margin: 10px 10px 5px 5px;
}
#headerDiv a:hover {
color: #FFFFFF;
}
#headerDiv2, #contentDiv2 {
float: left;
width: 510px;
}
#titleText2 {
float: left;
font-size: 1.1em;
font-weight: bold;
margin: 5px;
}
#myHeader2 {
font-size: 1.1em;
font-weight: bold;
margin: 5px;
}
#headerDiv2 {
background-color: #0037DB;
color: #9EB6FF;
}
#contentDiv2 {
background-color: #FFE694;
}
#myContent2 {
margin: 5px 10px;
}
#headerDiv2 a {
color: gold;
float: right;
margin: 10px 10px 5px 5px;
}
#headerDiv2 a:hover {
color: #FFFFFF;
}
style.display only reflects the style that's been explicitly set on the element. Unless you specify it with style="display:block" in HTML, the initial value of style.display will be empty, even though the default value of that property, applied by CSS cascading, is indeed block.
Related
This may be a duplicate, but I can't figure this out.
I can't figure out why the same modal is showing for both buttons. I've tried making separate classes for each modal but that didn't work.
// emailmodal.js
var emailModal = document.getElementById("email-modal");
var emailBtn = document.getElementById("email");
var emailSpan = document.getElementsByClassName("email-close")[0];
emailBtn.onclick = function() {
emailModal.style.display = "block";
}
emailSpan.onclick = function() {
emailModal.style.display = "none";
}
window.onclick = function(event) {
if (event.taget == emailModal) {
emailModal.style.display = "none";
}
}
// phonemodal.js
var phoneModal = document.getElementById("phone-modal");
var phoneBtn = document.getElementById("phone");
var phoneSpan = document.getElementsByClassName("phone-close")[0];
phoneBtn.onclick = function() {
phoneModal.style.display = "block";
}
phoneSpan.onclick = function() {
phoneModal.style.display = "none";
}
window.onclick = function(event) {
if (event.taget == phoneModal) {
phoneModal.style.display = "none";
}
}
.fa {
padding: 80px;
font-size: 50px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 10px 10px;
border-radius: 10%;
color: white;
transition: 0.7s;
}
.fa-envelope-o {
background: #199cad;
}
.fa-phone {
background: #121e88;
}
.container {
text-align: center;
padding: 50px;
}
.middle-colour {
color: #00ffff;
}
.email-modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.phone-modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.socials-modal-content {
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 25%;
color: white;
font-size: 20px;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #888888;
text-decoration: none;
cursor: pointer;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles/contact.css">
</head>
<body>
<div class="main">
<div class="container">
<div class="socials-3">
<a class="fa fa-envelope-o" id="email" href="#Email"></a>
<div id="email-modal" class="email-modal">
<div class="socials-modal-content">
<span class="close email-close">×</span>
<p>fun<span class="middle-colour">#</span>wbf<span class="middle-colour">.</span>com</p>
</div>
<script src="js/emailmodal.js"></script>
</div>
<a class="fa fa-phone" id="phone" href="#Phone"></a>
<div id="phone-modal" class="phone-modal">
<div class="socials-modal-content">
<span class="close phone-close">×</span>
<p>01234567890</p>
</div>
<script src="js/phonemodal.js"></script>
</div>
</div>
</div>
</div>
</body>
</html>
It's probably something simple but would be a big help if someone can find out the issue.
Edit:
Changed code to snippet.
Try giving your phone element variables their phone element equivalents. Right now they're all referring to email elements.
i.e. change this:
var phoneModal = document.getElementById("email-modal");
var phoneBtn = document.getElementById("email");
var phoneSpan = document.getElementsByClassName("email-close")[0];
to this:
var phoneModal = document.getElementById("phone-modal");
var phoneBtn = document.getElementById("phone");
var phoneSpan = document.getElementsByClassName("phone-close")[0];
Edit
You also have multiple typos: event.taget should be event.target, and you might want to use strict equality (===) instead of normal equality (==). Both equalities will work, however.
Here's a working example based on your code.
You can change the style of socials-modal-content in your CSS file.
For example, define two classes for email and phone like below code:
.socials-modal-content-email {
background-color: rgb(100, 800, 0);
background-color: rgba(0, 0, 0, 0.4);
margin: 15% auto;
padding: 20px;
border: 10px solid #888;
width: 25%;
color: green;
font-size: 30px;
}
.socials-modal-content-phone {
background-color: rgb(1, 0, 0);
background-color: rgba(1, 0, 0, 0.4);
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 25%;
color: white;
font-size: 20px;
}
Then in your HTML file spread both of them like:
<div class="socials-modal-content-email">
<div class="socials-modal-content-phone">
Overall, you can edit and combine your HTML and JS like:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles/contact.css">
</head>
<body>
<div class="main">
<div class="container">
<div class="socials-3">
<a class="fa fa-envelope-o" onclick="show_email()" id="email" href="#Email"></a>
<div id="email-modal" class="email-modal">
<div class="socials-modal-content-email">
<span class="close email-close" onclick="close_eamil()">×</span>
<p>fun<span class="middle-colour">#</span>wbf<span class="middle-colour">.</span>com</p>
</div>
</div>
<a class="fa fa-phone" id="phone" onclick="show_phone()" href="#Phone"></a>
<div id="phone-modal" class="phone-modal">
<div class="socials-modal-content-phone">
<span class="close phone-close" onclick="close_phone()">×</span>
<p>01234567890</p>
</div>
</div>
</div>
</div>-
</div>
</body>
</html>
<script type="text/javascript" >
var emailModal = document.getElementById("email-modal");
var phoneModal = document.getElementById("phone-modal");
function show_email(){
emailModal.style.display = "block";
}
function close_eamil(){
emailModal.style.display = "none";
}
function show_phone(){
phoneModal.style.display = "block";
}
function close_phone(){
phoneModal.style.display = "none";
}
</script>
there is a filter on the js, which consists of three identical buttons (named "green", "yellow", "red"), which are responsible for setting/removing the blur effect for the set of pictures located below.
When pressing the "green" button, a blur effect should be set for all pictures that have a value "green" of data-card property.
At the second click on the same button, the blur effect should be canceled for this category of pictures.
I solved this problem with a reception with a boolean flag:
let firstClick = true;
if (firstClick){
//..do at first click
firstClick = !firstClick;
}
else{
//..do at second click
firstClick = !firstClick;
}
However, the problem occurs when I click on the "green" button (this is the first click on the "green" button), and after that on another button, for example "red" (this is the first click on the "red" button). But the compiler perceives a click on the "red" button as a second click, although it is a different button.
The question is how to distinguish the behavior in different buttons?
In general, I solved the problem through a complete search and many if statements. Maybe there is an alternative way?
Project demo in codepen
//main.js
function app() {
const buttons = document.querySelectorAll('.service__btn');
const cards = document.querySelectorAll('.service__item');
let firstClick = true;
function setBlour(listOfCards) {
listOfCards.forEach(item => {
if (item.classList.contains(currentCategory)) {
item.classList.add('blur');
}
});
}
function resetBlour(listOfCards) {
listOfCards.forEach(item => {
if (item.classList.contains(currentCategory)) {
item.classList.remove('blur');
}
});
}
function highlightButton(butt) {
if (!butt.classList.contains('service__btn__clicked')) {
butt.classList.add('service__btn__clicked');
}
firstClick = !firstClick;
}
function unhighlight(butt) {
if (butt.classList.contains('service__btn__clicked')) {
butt.classList.remove('service__btn__clicked');
}
firstClick = !firstClick;
}
buttons.forEach(button => {
button.addEventListener('click', (event) => {
currentCategory = event.target.dataset.filter; //current category we get from clicked button
let matchedCards = document.querySelectorAll(`[data-card="${button.dataset.filter}"]`);
//is it first click?
if (firstClick) {
if (!matchedCards[0].classList.contains('blur')) { // each click we have set of matchedCards, it's easy to check one of them (the first for example) if it have blur
setBlour(matchedCards);
highlightButton(button);
} else { //it is a first clcik, but card have blur - so remove blur
resetBlour(matchedCards);
unhighlight(button);
}
}
//second click
else {
if (!matchedCards[0].classList.contains('blur')) { //if there is no blur - add blur
setBlour(matchedCards);
highlightButton(button);
} else { //second click and blur is present - so we need to remove it
resetBlour(matchedCards);
unhighlight(button);
}
}
});
});
}
app()
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style-type: none;
}
.container {
width: 1220px;
margin: 0 auto;
}
.service {
background: #EDF2EC;
padding-top: 40px;
padding-bottom: 70px;
}
.service__top {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.service__top-title {
font-family: 'Inika', serif;
font-weight: 400;
font-size: 40px;
line-height: 52px;
color: #499A18;
max-width: 306px;
}
.service__filter-btn {
margin-left: 142px;
}
.service__btn {
border: 1px solid #E06733;
border-radius: 5px;
padding: 12px 40px;
font-family: 'Inika', serif;
font-weight: 400;
font-size: 20px;
line-height: 26px;
color: #E06733;
}
.service__btn__clicked {
background: #E06733;
border: 1px solid #E06733;
border-radius: 5px;
color: #FFFFFF;
}
.service__btn+.service__btn {
margin-left: 32px;
}
.service__content {
column-count: 3;
gap: 0 116px;
}
.service__item {
margin-bottom: 55px;
text-align: center;
width: 330px;
height: 350px;
border-radius: 20px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
.service__item-title {
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 20px;
color: #E06733;
margin-top: 10px;
margin-bottom: 10px;
}
.service__item-text {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 20px;
color: #717171;
margin-bottom: 36px;
}
.service__item-description {
border-radius: 0px 0px 20px 20px;
border: 1px solid #e3e1d5;
display: none;
}
.blur {
filter: blur(5px);
}
.animation {
transform: scale(0);
opacity: 0;
}
<body>
<section class="service">
<div class="container">
<div class="service__top">
<h3 class="service__top-title">
Caption and Description
</h3>
<div class="service__filter-btn">
<button class="service__btn service__btn-type_green" data-filter="green"> Green</button>
<button class="service__btn service__btn-type_yellow" data-filter="yellow">Yellow</button>
<button class="service__btn service__btn-type_red" data-filter="red">Red</button>
</div>
</div>
<div class="service__content">
<div class="service__item green" data-card="green">
<div class="service__item-description">
<h4 class="service__item-title">Green color</h4>
<p class="service__item-text">Description</p>
</div>
</div>
<div class="service__item red" data-card="red">
<div class="service__item-description">
<h4 class="service__item-title">Red color</h4>
<p class="service__item-text">Description</p>
</div>
</div>
<div class="service__item yellow" data-card="yellow">
<div class="service__item-description">
<h4 class="service__item-title">Yellow color</h4>
<p class="service__item-text">Description</p>
</div>
</div>
<div class="service__item red" data-card="red">
<div class="service__item-description">
<h4 class="service__item-title">Red color</h4>
<p class="service__item-text">Description</p>
</div>
</div>
<div class="service__item green" data-card="green">
<div class="service__item-description">
<h4 class="service__item-title">Green color</h4>
<p class="service__item-text">Description</p>
</div>
</div>
<div class="service__item red" data-card="red">
<div class="service__item-description">
<h4 class="service__item-title">Red color</h4>
<p class="service__item-text">Description</p>
</div>
</div>
</div>
</div>
</section>
</body>
I am building a simple Drag N drop application demo,draggable was supposed to be dragged over dropzone and could be left there.
it is here, https://jsfiddle.net/yuzhangoscar/em4ns5v7/2/
The problem I am having is:
I cannot attach callback functions dragoverHandler and dropHandler to element dropzoneOne via .addEventListener()
The code snippet would work if I had attached dragoverHandler and dropHandler as attributes directly to the HTML element dropzone, e.g. ondrop="dropHandler(event)"
Can anyone help?
const draggableOne = document.getElementById('draggable-1');
const dropzoneOne = document.getElementById('dropzone-1');
function dragstartHandler(event) {
console.log('start');
event.dataTransfer.setData('text/plain', event.target.id);
event.currentTarget.style.backgroundColor = 'yellow';
}
function dragoverHandler(event) {
console.log('dragging over');
event.preventDefault();
}
function dropHandler(event) {
console.log('dropped');
const id = event.dataTransfer.getData('text/plain');
const draggableElement = document.getElementById(id);
event.target.appendChild(draggableElement);
event.dataTransfer.clearData();
}
draggableOne.addEventListener('dragstart', dragstartHandler);
dropzoneOne.addEventListener('ondragover', dragoverHandler);
dropzoneOne.addEventListener('ondrop', dropHandler);
.example-parent {
border: 2px solid #DFA612;
color: black;
display: flex;
font-family: sans-serif;
font-weight: bold;
}
.example-origin {
flex-basis: 100%;
flex-grow: 1;
padding: 10px;
}
.example-draggable {
background-color: #4AAE9B;
font-weight: normal;
margin-bottom: 10px;
margin-top: 10px;
padding: 10px;
}
.example-dropzone {
background-color: #6DB65B;
flex-basis: 100%;
flex-grow: 1;
padding: 10px;
}
<head>
<title>My Drag-and-Drop Example</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="example-parent">
<div class="example-origin">
<div id="draggable-1" class="example-draggable" draggable="true">
draggable
</div>
</div>
<div class="example-dropzone">
<div id="dropzone-1">
dropzone
</div>
</div>
</div>
<script src="app.js"></script>
</body>
It should be "drop" and "dragover", not "ondrop" / "ondragover". Also, your drop area is rather small.
const draggableOne = document.getElementById('draggable-1');
const dropzoneOne = document.getElementById('dropzone-1');
function dragstartHandler(event) {
console.log('start');
event.dataTransfer.setData('text/plain', event.target.id);
event.currentTarget.style.backgroundColor = 'yellow';
}
function dragoverHandler(event) {
console.log('dragging over');
event.preventDefault();
}
function dropHandler(event) {
console.log('dropped');
const id = event.dataTransfer.getData('text/plain');
const draggableElement = document.getElementById(id);
event.target.appendChild(draggableElement);
event.dataTransfer.clearData();
}
draggableOne.addEventListener('dragstart', dragstartHandler);
dropzoneOne.addEventListener('dragover', dragoverHandler);
dropzoneOne.addEventListener('drop', dropHandler);
.example-parent {
border: 2px solid #DFA612;
color: black;
display: flex;
font-family: sans-serif;
font-weight: bold;
}
.example-origin {
flex-basis: 100%;
flex-grow: 1;
padding: 10px;
}
.example-draggable {
background-color: #4AAE9B;
font-weight: normal;
margin-bottom: 10px;
margin-top: 10px;
padding: 10px;
}
.example-dropzone {
background-color: #6DB65B;
flex-basis: 100%;
flex-grow: 1;
padding: 10px;
}
#dropzone-1 {
min-height: 100px;
}
<head>
<title>My Drag-and-Drop Example</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="example-parent">
<div class="example-origin">
<div id="draggable-1" class="example-draggable" draggable="true">
draggable
</div>
</div>
<div class="example-dropzone">
<div id="dropzone-1">
dropzone
</div>
</div>
</div>
<script src="app.js"></script>
</body>
I'm trying to hide and show .sub-menu by clicking the .menu anchor, it works only by showing it. If I press to hide it has no reaction, what I am supposed to do and what is the mistake?
Here is the code.
HTML:
<div class="menu">
<a href="javascript:myFunction();" class="nav" onclick="myFunction()">
<div class="unu"></div>
<div class="doi"></div>
<div class="trei"></div>
</a>
<div id="sm">
FAQ
Support
Features
</div>
</div>
CSS:
nav div{
height:7px;
background-color: white;
margin: 5px 0;
border-radius: 25px;
}
.menu {
position: absolute;
display:inline-block;
text-align:center;
right:130px;
top:60px;
}
.unu {
width: 45px;
}
.doi {
width: 20px;
}
.trei {
width:35px;
}
#sm {
display: none;
}
JS:
function myFunction() {
var x = document.getElementById("sm")
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
If you use
console.log(`${x.style.display}`)
you will get
<empty string>
in your first attempt not
none
that is why you need to set
function myFunction() {
var x = document.getElementById("sm")
if (x.style.display === "" || x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
I will add a console.log in window.load event to see what is the value of the sm element when the page load at first. And you can also check what is new properties when you click button.
const myDiv = document.getElementById('sm');
const controlButton = document.querySelector('button')
window.addEventListener('load', () => {
console.log(`${myDiv.style.display}`);
})
controlButton.addEventListener('click', () => {
if (myDiv.style.display === "" || myDiv.style.display === "none") {
myDiv.style.display = "block";
} else {
myDiv.style.display = "none";
}
console.log(`${myDiv.style.display}`);
})
*,
*::before,
*::after{
box-sizing: border-box;
}
body {
font-family: sans-serif;
min-height: 100vh;
margin: 0;
background-color: bisque;
}
nav div{
height:7px;
background-color: white;
margin: 5px 0;
border-radius: 25px;
}
.menu {
position: absolute;
display:inline-block;
text-align:center;
right:130px;
top:60px;
}
.unu {
width: 45px;
}
.doi {
width: 20px;
}
.trei {
width:35px;
}
#sm {
display: none;
}
button{
position: absolute;
width: 5rem;
height: 5rem;
background-color: greenyellow;
top: 5rem;
left: 5rem;
}
<div class="menu">
<div class="unu"></div>
<div class="doi"></div>
<div class="trei"></div>
</a>
<div id="sm">
FAQ
Support
Features
</div>
</div>
<button>Click me</button>
Instead of using display property you can create a .class for toggling which is quite simple than checking styles.
const toggle = document.querySelector('.toggle');
const hidden = document.querySelector('.hidden');
toggle.addEventListener('click', event => {
// because anchor's default behaviour is redirecting
event.preventDefault();
hidden.classList.toggle('revealed');
});
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: grid;
place-items: center;
}
.toggle,
.hidden {
font-family: sans-serif;
font-size: 1.5rem;
}
.hidden {
position: absolute;
margin-top: 6rem;
display: none;
}
.hidden.revealed {
display: block;
}
Click Me For Toggling
<p class="hidden"> I was hidden Initially </p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Help</title>
<style>
nav div{
height:7px;
background-color: white;
margin: 5px 0;
border-radius: 25px;
}
.menu {
position: absolute;
display:inline-block;
text-align:center;
right:130px;
top:60px;
}
.unu {
width: 45px;
}
.doi {
width: 20px;
}
.trei {
width:35px;
}
.sm {
display: none;
}
.show {
display:block;
}
</style>
</head>
<body>
<div class="menu">
<a href="#">
<div class="unu">lll</div>
<div class="doi"></div>
<div class="trei"></div>
</a>
<div class="sm">
FAQ
Support
Features
</div>
</div>
<script>
var show = document.querySelector("a")
var x = document.querySelector(".sm")
show.addEventListener('click',()=>{
x.classList.toggle("show")
})
</script>
</body>
</html>
I made a lot of changes! You first I use Js Vanilla j. I relied on the "click" event on the "a" tag
By leaving your function in the link, it works but, once it appears, it disappears by itself again. Which means it doesn't overwrite the display property that was in the class sm.
In short, it works well; you can check on snipett
I am creating textarea tags as the user clicks a button. And i want the dynamically created texarea tags to remain as such when we close and open the browser again.
I am able to save the CONTENT of the textarea tag,but there is no point in it when the textarea tag itself doesnt remain after closing the browser.
ok: SO here is the code :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="A" onclick="add()" type="button">ADD</button>
<button id="S" onclick="save()" type="button">SAVE</button>
<button id="E" onclick="edit()" type="button">EDIT</button>
<button id="D" onclick="del('x')" type="button">DELETE</button>
</body>
<script type="text/javascript">
var text_new,x;
var i=0,j,y;
function add()
{
text_new=document.createElement("textarea");/*I WANT TO STORE THESE CREATED TAGS USING LOCAL STORAGE*/
text_new.id="a"+i.toString();
var t = document.createTextNode("");
text_new.appendChild(t);
console.log(text_new.id);
i++;
document.body.appendChild(text_new);
}
document.body.addEventListener("click", activate);
function activate()
{
if(document.activeElement.tagName.toLowerCase() ==="textarea")
{
x = document.activeElement.id;
y=x;
console.log(x);
console.log(typeof x);
}
}
function save()
{
document.getElementById(x).readOnly=true;
console.log(document.getElementById(x).value);
localStorage.y=document.getElementById(x).value;
document.getElementById(x).value=localStorage.y;
}
function edit()
{
document.getElementById(x).readOnly=false;
}
function del()
{
var element = document.getElementById(x);
element.remove();
}
</script>
</html>
Suggest you to try this.
Cookies are data, stored in small text files, on your computer.
When a user visits a web page, his name can be stored in a cookie.
Next time the user visits the page, the cookie "remembers" his name.
https://www.w3schools.com/js/js_cookies.asp
You can use html5 web storage, specifically the localStorage.
https://www.w3schools.com/html/html5_webstorage.asp
I hope this Helps!
ok i got it....
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
body
{
box-sizing: border-box;
background-image: url(images/note2.jpg);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
body, html {
height: 100%;
margin: 0;
}
button {
display: inline-block;
width: 150px;
background: black;
margin: 0 10px 0 0;
color: white;
font-size: 25px;
font-family: Oswald, Helvetica, Arial, sans-serif;
line-height: 1.8;
appearance: none;
box-shadow: none;
text-align: center;
border-radius: 20px;
border : 6px solid black;
}
#D:hover
{
background: red;
}
#S:hover
{
background: green;
}
button:hover
{
background-color: #417cb8
}
button:active
{
background-color: #417cb8;
box-shadow: 0 5px #27496d;
transform: translateY(5px);
}
textarea
{
height: 170px;
width: 500px;
border: 3px solid black;
border-radius: 20px;
resize: none;
font-family: Tahoma, Verdana, Segoe, sans-serif;
font-size: 20px;
padding: 10px;
letter-spacing: 2px;
opacity: 0.6;
text-overflow: auto;
}
#header
{
height: 100px;
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 40px;
text-align: center;
padding-top: 30px;
position: relative;
}
#buts
{
position: relative;
margin: 0 auto;
}
#con
{
position: relative;
text-align: center;
padding: 10px;
}
img
{
position: absolute;
height: 60%;
}
</style>
<body>
<div id="header">NOTE IT OR FORGET IT!
<img src="images/note1.png"> </div>
<div id="con">
<div id="buts">
<button id="A" onclick="add()" type="button">ADD</button>
<button id="S" onclick="save()" type="button">SAVE</button>
<button id="E" onclick="edit()" type="button">EDIT</button>
<button id="D" onclick="del('x')" type="button">DELETE</button>
</div>
</div>
</body>
<script type="text/javascript">
var text_new,x;
var i=0,j,y,num=0;
window.onload=function ()
{i=0;
for (var key in localStorage)
{
text_new=document.createElement("textarea");
var t = document.createTextNode(localStorage.getItem(key));
text_new.appendChild(t);
document.body.appendChild(text_new);
text_new.id=key;
i++;
}
}
/*window.onbeforeunload=function()
{
var x=document.querySelectorAll("textarea");
for(num=0;num<x.length;x++)
{
if
}
}
}*/
function add()
{
text_new=document.createElement("textarea");
text_new.id="a"+i.toString();
for(var key in localStorage)
{
if (text_new.id==key)
{
i++;
text_new.id="a"+i.toString();
}
}
var t = document.createTextNode("");
text_new.appendChild(t);
console.log(text_new.id);
i++;
document.body.appendChild(text_new);
}
document.body.addEventListener("click", activate);
function activate()
{
if(document.activeElement.tagName.toLowerCase() ==="textarea")
{
x = document.activeElement.id;
console.log(x);
}
}
function save()
{
if((document.getElementById(x).readOnly==false)&&(document.getElementById(x).value!=""))
{
document.getElementById(x).readOnly=true;
console.log(x);
console.log(document.getElementById(x).value);
localStorage.setItem(x,document.getElementById(x).value);
document.getElementById(x).value=localStorage.getItem(x);
}
}
function edit()
{
document.getElementById(x).readOnly=false;
}
function del()
{
var element = document.getElementById(x);
localStorage.removeItem(x);
element.remove();
}
</script>
</html>