copying localStorage using javascript - javascript

Good Evening Stackoverflow!
So I am running into an issue in which I am trying to create a notes app using javascript and I wanted to play around with localStorage. I have tried a couple of options but I can't seem to select all and then copy to the clipboard the localStorage, has anyone else ran accross this before?
<!DOCTYPE html>
<html>
<head>
<title>NotePad</title>
<style>
body {
font-family: Tahoma;
line-height: 1.6em;
background: #f4f4f4;
}
header, footer {
text-align: center;
}
#container {
width: 400px;
margin: 50px auto;
background: #FFFFa5;
overflow:hidden;
padding: 30px;
}
.clear {
text-decoration: none;
background: #333;
color: #fff;
padding: 10px;
}
.copy {
text-decoration: none;
background: #333;
color: #fff;
padding: 10px;
}
</style>
<script>
function getNote(){
if(localStorage.getItem('note')){
var note = localStorage.getItem('note');
} else {
var note = 'Go ahead and edit this note to save in local storage';
}
document.getElementById('note').innerHTML = note;
}
function saveNote(id){
var note = document.getElementById('note').innerHTML;
localStorage.setItem('note', note);
}
function clearNote(){
clear: localStorage.clear();
return false;
}
function copyNote(){
$("#note").select();
document.execCommand("copy");
return false;
}
</script>
</head>
<body>
<header>
<h1>My Notes!</h1>
</header>
<section id="container">
<div id="note" contenteditable="true" onkeyup='saveNote(this.id)'></div>
</section>
<footer>
<div>
Clear Note
</div>
<br>
<div>
Copy
</div>
<p>MyNote © 2017</p>
</footer>
<script>
getNote();
</script>
</body>
</html>

The select method does not select text. It fires the select event on that element (pretends the user selected that element themself), and since you have no event handlers for the select element, nothing happens. This question should help you create a function that selects your text.

Related

Add text after pressing button in Javascript

So I want to imitate a Survey where a Survey has:
Question Name
Options
The question name is basically just some text which can be changed on clicked.
Initially there is one option and it's checkbox to tick it. This option should also change when clicked.
Also there's is this button where should add a new option to a specific question and there will be one question with let's say 4 options and you can check any amount of them.
Now after the first question has been edited (put whatever text you want for the question name and as many different options you need) you should be able to add more questions and do the same thing.
I tried to do this and I managed to find some code which edits text on click but I don't know how I can add another option or another question. My code is as follows:
function help() {
// code to add another option
}
body {
background-color: #00ffaa;
font-family: Verdana;
text-align: center;
}
.questionName {
margin-top: 15px;
font-size: 20px;
}
.optionName {
margin-top: 8px;
font-size: 15px;
font-style: italic;
margin-left: 605px;
}
.box {
margin-top: 12px;
}
.option {
display: flex;
}
<html>
<head>
<title>Your Survey Form</title>
<link rel="stylesheet" href="DemoSurveyStyle.css">
</head>
<body>
<form>
<h1 id="myText" contenteditable="true">Survey Name</h1>
<div id="question">
<div class="questionName" contenteditable="true">Question</div>
<div class="option">
<div class="optionName" contenteditable="true">Option</div>
<input type="checkbox" class="box">
</div>
<button id="addOpButton" onclick="help()">Add Option</button>
</div>
</form>
<script src="DemoCode.js"></script>
</body>
</html>
If you could help me to how I should do this I would really appreciate. I think it's not very complicated just I have never done it and don't know how to do it.
here you can appendChild to your element
I have also update HTML
function help() {
// code to add another option
var q = document.getElementById('question');
const node = document.createElement('div');
node.classList.add("option");
node.innerHTML = '<div class="optionName" contenteditable="true">Option</div><input type="checkbox" class="box">';
q.appendChild(node);
}
help()
body {
background-color: #00ffaa;
font-family: Verdana;
text-align: center;
}
.questionName {
margin-top: 15px;
font-size: 20px;
}
.optionName {
margin-top: 8px;
font-size: 15px;
font-style: italic;
margin-left: 605px;
}
.box {
margin-top: 12px;
}
.option {
display: flex;
}
<html>
<head>
<title>Your Survey Form</title>
<link rel="stylesheet" href="DemoSurveyStyle.css">
</head>
<body>
<form>
<h1 id="myText" contenteditable="true">Survey Name</h1>
<div id="question">
<div class="questionName" contenteditable="true">Question</div>
</div>
<button type="button" id="addOpButton" onclick="help()">Add Option</button>
</form>
<script src="DemoCode.js"></script>
</body>
</html>

button change css style at switch to dark / lightmode

old
(Hello and thank you in advance, I would like to make a button with darkmode and if you click on it then it becomes darkmode and the button is then called white mode then when you click on it again it becomes white mode and the button is called dark mode again.)
new
(now the button change style is missing when you click on it)
function myFunction() {
var element = document.page;
element.classList.toggle("dark-mode");
}
<html>
<head>
<style>
.page {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
</style>
</head>
<body>
<div class="page">Hello</div>
<button onclick="myFunction()">dark mode</button>
</body>
</html>
I don't believe document.page is valid js. assign the class to body
document.getElementsByTagName('button')[0].textContent='dark-mode';
function myFunction() {
var element = document.getElementsByTagName('body')[0];
element.classList.toggle("dark-mode");
var button = document.getElementsByTagName('button')[0];
if(button.textContent == 'dark-mode')button.textContent='white-mode';
else button.textContent='dark-mode';
}
<html>
<head>
<style>
.page {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
</style>
</head>
<body>
<div class="page">Hello</div>
<button onclick="myFunction()"></button>
</body>
</html>

iFrame won't become visible when button is clicked

I have an iFrame in HTML code, and I created a script tag that I set on a submit button. I want the iFrame to be visible when I click on the submit button, but that is not working. Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
body {
font-family: Arial;
}
* {
box-sizing: border-box;
}
form.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
}
form.example button {
float: left;
width: 20%;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
form.example button:hover {
background: #0b7dda;
}
form.example::after {
content: "";
clear: both;
display: table;
}
#outerdiv
{
border:none;
width:100%;
height:500px;
overflow:hidden;
}
#innerIframe
{
border: none;
position:relative;
top:-190px;
width:100%;
height:900px;
}
</style>
</head>
<body>
<h2>Web Service</h2>
<script type="text/javascript">
function showIFrame() {
var iframe = document.getElementById("innerIframe");
iframe.style.visibility="visible";
}
</script>
<form class="example" method="post" style="margin:auto;max-width:500px">
<input type="text" placeholder="Search query" name="search2">
<button type="submit" name="submit" onclick="showIFrame()"><i class="fa fa-search"></i></button>
</form>
<br>
<div id="outerdiv" >
<iframe src={{results}} id="innerIframe" style="visibility: hidden;" scrolling="yes"></iframe>
</div>
</body>
</html>
{{results}} is the URL that is passed by the user in python Flask. So in the form the user types in a word, which then joins it to a URL and performs a search. The search works perfectly, but when the page is loaded on startup, it shows Not Found, the requested URL has not been found... and I understand why that happens as the URL hasn't been loaded yet. So I want to make the iFrame invisible, and once the submit button is pressed, the frame can be visible.
I have tried with jQuery as well, but it did not work.
All help and advice will be highly appreciated.
First pass "event" when you call the onClick function in your HTML code like this *onclick="showIFrame(event)
Then in your function, you accept the "event" as a parameter like this *function showIFrame(event) {
A click button most times trigers your page to refresh, so you have to stop that by preventing the default action. Add "event.preventDefault()" to your function like this *event.preventDefault()

Recording of anonymous edits of text on page

In the following code, I am allowing users to edit text content, save and recall changes from own "local storage". So every editor's browser "remembers" their own editing, and each editor sees his changes only. I want to realise an idea of the anonymous wiki and import every user edits and display the last one in the final HTML page.
function saveEdits() {
//get the editable element
var editElem = document.getElementById("edit");
//get the edited element content
var userVersion = editElem.innerHTML;
//save the content to local storage
localStorage.userEdits = userVersion;
//write a confirmation to the user
document.getElementById("update").innerHTML = "Готово";
}
function checkEdits() {
//find out if the user has previously saved edits
if (localStorage.userEdits !== null)
document.getElementById("edit").innerHTML = localStorage.userEdits;
}
body {
display: block;
padding: 50px;
margin: 50px;
width: 90%;
font-family: 'Oranienbaum', serif;
font-size: 30px;
margin-right: 50px;
height: 90%
}
#edit {
background-color: white;
margin: 5px;
padding: 0px;
text-align: inherit;
font-size: 40px;
font-family: 'Oranienbaum', serif;
}
#button {
background-color: silver;
border: none;
top: 100px;
margin: 5px;
padding: 10px;
font-family: 'Oranienbaum', serif;
font-size: 20px;
}
#update {
background-color: white;
top: 100px;
margin: 5px;
padding: 5px;
font-size: 20px;
}
hr {
display: block;
margin-left: auto;
margin-right: auto;
border-style: dashed;
border-width: 1px;
}
.footer {
background-color: inherit;
top: 100px;
margin: 5px;
padding: 5px;
font-size: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Indexmod Encyclopedia — anonymous real-time editing </title>
<script src="code.js" type="text/javascript" charset="utf-8"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<style>
#import url('https://fonts.googleapis.com/css?family=Oranienbaum');
</style>
</head>
<body onload="checkEdits()">
Indexmod Россия
<hr>
<div id="edit" contenteditable="true">
Here is Indexmod Encyclopedia anonymous real-time editing sandbox area
</div>
<hr>
<input type="button" id=button value="Сохранить" onclick="saveEdits()" />
<div id="update">Редактируй текст и нажми сохранить до следующего раза</div>
<p class="footer" id="footer"><span><script src="footer.js"></script></span>
</p>
</body>
</html>
While you're going to set item on local storage, the method goes to:
localStorage.setItem('userEdits', userVersion);
And get item
localStorage.getItem('userEdits');
Hope it would be help, This works for me.
See the reference: http://www.w3schools.com/html/html5_webstorage.asp

Clicking input field triggers jQuery function

I'm trying to create a selectable list that when you click on an item, it displays an input field that you can use to edit the description but until the item is clicked on, the input field is hidden.
However, when I select an item and then click on the input field, it unselects the item and the input field is hidden again.
I've recreated the issue here with just one list item. How can I allow for the user to click in the input field without triggering the jQuery function?
Also, the user will be able to click multiple items in the list so I've updated the jsbin with a second item.
If you don't want to change the html arrangement of the input , you can prevent the event propagation on click of the input element to its parent which in turn will avoid any class toggle.
The only addition you need is this.
$('.fund input').click(function(e) {
e.stopPropagation();
});
Here is the working sample
$('.fund').click(function() {
$(this).toggleClass('selected');
});
$('.fund input').click(function(e) {
e.stopPropagation();
});
* {
font-family: 'Lato', sans-serif;
}
.fund {
background-color: #fff;
width: 500px;
border: 1px solid #444;
height: 50px;
padding: 0 10px;
border-radius: 3px;
}
.fund:hover {
background-color: #efefef;
cursor: pointer;
}
.fund .description,
.fund .alt-description {
width: 50%;
float: left;
}
.fund .description {
line-height: 50px;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 700;
color: #555;
}
.fund .alt-description {
visibility: hidden;
line-height: 50px;
font-size: 14px;
}
.fund .alt-description input {
height: 30px;
font-size: 12px;
}
.fund.selected {
border: 1px solid #00cc00;
}
.fund.selected .description {
color: #00cc00;
}
.fund.selected .alt-description {
visibility: visible;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[be able to click in input but don't toggle div]">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,700' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<title>JS Bin</title>
</head>
<body>
<div class='fund'>
<div class='description'>
Fund Name
</div>
<div class='alt-description'>
Description:
<input type='text' value='Fund Name'>
</div>
</div>
</body>
</html>
This will do the trick:
$('.fund').click(function() {
$('.fund').removeClass('selected');
$(this).addClass('selected');
});
The issue is that you have alt-description within fund, so anytime you click on "fund" it will toggle the show hide of your alt-description input. Move the alt-description out of the fund class. Otherwise make the trigger description instead of fund.
<div class='fund'>
<div class='description1'>
Fund Name
</div>
</div>
<div class='alt-description1'>
Description: <input type='text' value='Fund Name'>
</div>
Here I change the javascript a little.
$('.fund').click(function() {
if(!$(this).hasClass('selected')){
$(this).toggleClass('selected');
}
});
So when ever the div with the .fund class has a class selected don't toggle the class.

Categories