Add text after pressing button in Javascript - 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>

Related

copying localStorage using 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.

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.

How can I update local html file after adding new element using javascript?

I am new to web development.
I am try to add a list item to a unorded list.
using javascript
html
<!DOCTYPE html>
<html>
<head>
<title>Item Add Test</title>
<script src="item.js"></script>
<link rel="stylesheet" type="text/css" href="item.css">
</head>
<body>
<input type="text" id="initem"></input>
<br /><br />
<button onclick="myFunction1()" id="submit">SUBMIT</button>
<ul id="menu">
<li>ABC</li>
<li>BLA</li>
</ul>
</body>
</html>
css item.css
body {
font-family: monospace;
text-align: center;
font-size: 1.5em;
}
input {
text-align: center;
width: 300px;
height: 30px;
border: 1px solid blue;
border-radius: 5px;
margin: 10px auto;
padding-left: 10px;
font-size: 1.2em;
font-weight: bold;
}
#submit {
font-size: 1em;
}
javascript item.js
function myFunction1() {
var name = document.getElementById("initem").value;
var node = document.createElement("LI");
var textnode = document.createTextNode(name);
node.appendChild(textnode);
document.getElementById("menu").appendChild(node);
}
I successfully add items to the list.
But when I refresh the page all items are gone.
How can I save the html file or update the html file after adding the items,so that if I refresh the page list items remain there.
You can save the text of <li> elements in the local storage and retrieve on load event of the body.
The snippet won't work for security reasons but I tried on Sublime Text and it's fine.
var li_texts = [];
function myFunction1() {
var name = document.getElementById("initem").value;
var node = document.createElement("LI");
var text = 'Test';
node.innerHTML = text;
document.getElementById("menu").appendChild(node);
li_texts.push(text);
localStorage.setItem("li_texts", JSON.stringify(li_texts));
}
function loadList(){
if (localStorage.getItem("li_texts") !== null) {
var stored_names = JSON.parse(localStorage.getItem("li_texts"));
for(i=0; i<stored_names.length; i++){
var node = document.createElement("LI");
node.innerHTML = stored_names[i];
document.getElementById("menu").appendChild(node);
}
}
else{
return;
}
}
body {
font-family: monospace;
text-align: center;
font-size: 1.5em;
}
input {
text-align: center;
width: 300px;
height: 30px;
border: 1px solid blue;
border-radius: 5px;
margin: 10px auto;
padding-left: 10px;
font-size: 1.2em;
font-weight: bold;
}
#submit {
font-size: 1em;
}
<!DOCTYPE html>
<html>
<head>
<title>Item Add Test</title>
<script src="item.js"></script>
<link rel="stylesheet" type="text/css" href="item.css">
</head>
<body onload="loadList()">
<input type="text" id="initem"></input>
<br /><br />
<button onclick="myFunction1()" id="submit">SUBMIT</button>
<ul id="menu">
<li>ABC</li>
<li>BLA</li>
</ul>
</body>
</html>

Highlight comment and remove class when delete button is clicked

I am new to web development and currently learning jQuery from codecademy.
I made a simple opinion pull.
Problem: Besides add comment, i would like to delete the comment when i highlight the comment and press trash button.
index.html
<!doctype html>
<html>
<head>
<!--Boostrap CSs stylesheet-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!--jQuery script-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!--Bootsrap js-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!--CSS stylesheet-->
<link href="index.css" media="screen" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea>
</div>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
<div class= "glyphicon glyphicon-pencil" ></div>
<div class= "glyphicon glyphicon-trash" ></div>
</div>
<ul class="posts">
</ul>
</div>
<!--JavaScript script-->
<script src="index.js"></script>
</body>
</html>
index.css
html,body {
font-family: courier, sans-serif;
color: #404040;
background-color: #eee;
}
.container {
width: 520px;
margin-top: 20px;
}
.button-group {
margin-bottom: 20px;
padding: 5px;
}
.counter {
display: inline;
margin-top: 0;
margin-bottom: 0;
margin-right: 10px;
}
.posts {
clear: both;
list-style: none;
padding-left: 0;
width: 100%;
}
.posts li {
background-color: #fff;
border: 1px solid #d8d8d8;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
margin-bottom: 10px;
word-wrap: break-word;
min-height: 42px;
}
index.js
var main = function() {
//btnPost
$('#btnPost').click(function() {
var post = $('.status-box').val();
$('<li>').text(post).prependTo('.posts');
$('.status-box').val('');
$('.counter').text('140');
$('#btnPost').addClass('disabled');
});
$('.status-box').keyup(function() {
var postLength = $(this).val().length;
var charactersLeft = 140 - postLength;
$('.counter').text(charactersLeft);
if(charactersLeft < 0) {
$('#btnPost').addClass('disabled');
}
else if(charactersLeft == 140) {
$('#btnPost').addClass('disabled');
}
else {
$('#btnPost').removeClass('disabled');
}
});
$('#btnPost').addClass('disabled');
//btnDelete
$('#btnDelete').click(function(){
});
}
$(document).ready(main);
I have created a fiddle to provide something close to the desired functionality. I'm not sure what you mean by "highlight" the comment, but what you are looking for is event delegation. Using jQuery's .on() function, you can listen for events on dynamically created elements:
$('body').on('click', '.btnDelete', function(){
$(this).closest('li').remove();
});
See this jsFiddle: http://jsfiddle.net/voveson/5gL44z6m/2/
And for more info on how the .on() function works, see here.

Why isn't this HTML button functioning

I am working through "Google Apps Script" by James Ferreira.
I have found several issues with code examples given so far and have been able to stumble my way through them.
I'm not great with HTML and this one has me stumped.
.gs
function startWorkflow() {
var html = HtmlService.createTemplateFromFile('startWorkflow').evaluate()
.setTitle('Start Workflow').setWidth(300)
.setSandboxMode(HtmlService.SandboxMode.NATIVE);
ui.showSidebar(html);
}
.html
<div id="wrapper">
<div>
<span>Let's get started with your workflow.
First;
Add an approver by entering their email address
in the Approvers box and clicking the add button.
When you are done adding appovers, click the Start Workflow button.</span>
</div>
<br>
<div>
<span class="sectionHeader">Approvers</span><br>
<div id="approvers"></div>
<div>
<form id="addApprover">
<input type="email" id="approver" placeholder="Email Address">
<input type="submit" class="button blueButton" value="Add">
</form>
</div>
<br>
<div class="center">
<span id="startButton" class="button redButton">Start Workflow</span>
</div>
</div>
<?!= HtmlService.createHtmlOutputFromFile('styles').getContent(); ?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
styles.html
<style type="text/css">
.sectionHeader {
color: #202020 ;
font-size: 18px;
text-decoration:underline;
margin-bottom: 20px;
}
.button {
color: #FFFFFF;
font-size: 12px;
moz-border-radius: 3px;
-webkit-border-radius: 3px;
padding: 3px;
border:0;
}
.blueButton {
background-color: #3366FF;
}
.redButton {
background-color: #C80000;
}
.button:hover {
opacity:0.7;
}
.center {
text-align: center:
}
#wrapper {
margin:2px 4px 3px 4px;
font-family: Verdana, Generva, sans-serif;
}
.reminder {
color: #FFFFFF;
background-color: #3366FF;
font-size: 10px;
moz-border-radius: 3x;
-webkit-border-radius: 3px;
padding: 3px;
}
The issue is with the "start workflow" button as I only have text.
This is the the HTML you are referencing:
<span id="startButton" class="button redButton">Start Workflow</span>
The span tag does support events like onclick and onmouseup. It would look like this:
<span id="startButton" class="button redButton" onmouseup="fncStartWorkFlow()">Start Workflow</span>
There needs to be a corresponding function in a <script> tag:
<script>
function fncStartWorkFlow() {
console.log('fncStartWorkFlow() ran!');
//more code here
};
</script>
Make those changes, then view the browser console to see if a message printed to the console.

Categories