Simple Javascript onclick image gallary is not working - javascript

I've tried to apply similar code to an existing Stackoverflow topic which applies the following code: http://jsfiddle.net/zsNF5/4/
The problem is: I get the message Uncaught ReferenceError: ic1 is not defined when I click my button.
function ImageCollection(images) {
this.images = images;
this.i = 0;
this.no = function(imgId) {
var img = document.getElementById(imgId);
this.i++;
if (this.i == images.length)
this.i = 0;
img.src = images[this.i];
}
this.yes = function(imgId) {
var img = document.getElementById(imgId);
this.i++;
if (this.i == images.length)
this.i = 0;
img.src = images[this.i];
}
}
var ic1 = new ImageCollection(
['images/test.jpg', 'images/no1.jpg', 'images/no2.jpg']
);
The variable ic1 is defined in the code, that's why I'm confused.
This is my html:
<!DOCTYPE html>
<html>
<head>
<title>Face or no face</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="javascript.js"></script>
</head>
<body>
<div class="title">
<h1 >IS THIS A FACE?</h1>
</div>
<img class="photo" src="images/test.jpg">
<div class="container">
<form method="post" action="store.php">
<input type='button' class="button1" value='NO' onclick='ic1.no("container")' />
<input type='button' class="button2" value='YES' onclick='ic1.yes("container")' />
</form>
</div>
</body>
</html>
I hope I'm clear as my JS skills are obviously very limited. Thanks!

You're using var keyword to define ic1. This limits it to the closest scope which might not be window. To define it as a global do
window.ic1 = new ImageCollection(
['images/test.jpg', 'images/no1.jpg', 'images/no2.jpg']
);

Where is your <img id='container' like in your example in the link?
This is the html code from the working example-
<img id='container' src="data:image/jpeg;base64,/bla bla bla base 64" >
<input type='button' value='next' onclick='ic1.next("container")' />
<input type='button' value='prev' onclick='ic1.prev("container")' />
And this is your code with class and not id
<div class="container">
And in your function you are looking for var img = document.getElementById(imgId);
So try to replace class with id like <div id="container">

Related

Remove dynamically created elements in a form

I know this is a basic questions, but I am working on making a dynamic form and was having a bit of trouble figuring out how to delete elements that share the same class. I have looked around on the web and other posts for a means to accomplish this, but still was unable to figure it out.
I am new to this so I apologize for the basic question. Below, I have pasted the relevant code and my attempt at this. Would anyone be able to assist me?
var ingCounter = 1;
var dirCounter = 1;
var limit = 10;
function addIngredient(divName){
if (ingCounter == limit) {
alert("You have reached the add limit");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<div class='ingredientSet'><input class='ingredientInput' type='text' name='ingredients[]'><button class='deleteIngredientButton' type='button' onClick='removeElement('directionSet');'>X</button></div>";
document.getElementById(divName).appendChild(newdiv);
ingCounter++;
}
}
function addDirection(divName){
if (dirCounter == limit) {
alert("You have reached the add limit");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<div class='directionSet'><input class='directionInput' type='text' name='directions[]'><button class='deleteDirectionButton' type='button'>X</button></div>";
document.getElementById(divName).appendChild(newdiv);
dirCounter++;
}
}
function removeElement(elementId) {
// Removes an element from the document
var element = document.getElementById(elementId);
element.parentNode.removeChild(element);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homemade</title>
<!-- Required program scripts -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<!-- Style Sheets-->
<link rel="stylesheet" href="/styles/navBarStyle.css">
<link rel="stylesheet" href="/styles/myRecipesStyle.css">
<link rel="stylesheet" href="/styles/createRecipeStyle.css">
<link rel="stylesheet" href="/styles/errorMessageStyle.css">
</head>
<body>
<!-- Background image -->
<img id="background" src="/images/foodBackground.jpg" alt="">
<div id="newRecipeContainer">
<div id="closeButtonContainer">
<div id="backButton"><a id="back" href="/recipes/myRecipes">← My Recipes</a></div>
</div>
<form id="createRecipeForm" action="/recipes/createRecipe" method="POST" enctype="multipart/form-data">
<label id="formSubHeading">Create Your Homemade Recipe</label>
<%- include('../_partial/_messages'); -%>
<div id="recipeNameContainer">
<label id="recipeNameLabel">Title</label>
<input id="recipeNameInput" type="text" name="recipeName">
</div>
<div id="recipeImage">
<label id="recipeImageLabel">Add An Image of Your Meal</label>
<input id="recipeImageInput" type="file" accept="image/*" name="recipeImage"/>
<label id="recipeImageInputLabel" for="recipeImageInput" name="recipeImage">Choose A File</label>
</div>
<div id="recipeDescription">
<label id="recipeDescriptionLabel">Description</label>
<textarea id="recipeDescriptionInput" name="recipeDescription" cols="30" rows="10" maxlength="2000"></textarea>
</div>
<div class="ingredientsContainer">
<label id="ingredientsLabel">Ingredients</label>
<button id="addIngredientButton" type="button" onClick="addIngredient('allIngredients');">Add Another Ingredient</button>
<div id="allIngredients">
<div class="ingredientSet">
<input class="ingredientInput" type="text" name="ingredients[]">
</div>
</div>
</div>
<div class="directionsContainer">
<label id="directionsLabel">Directions</label>
<button id="addDirectionButton" type="button" onClick="addDirection('allDirections');">Add Another Direction</button>
<div id="allDirections">
<div class="directionSet">
<input class="directionInput" type="text" name="directions[]">
</div>
</div>
</div>
<div id="createRecipeButtonContainer">
<button id="createRecipeButton" type="submit">Create Recipe</button>
</div>
</form>
</div>
</body>
<!-- Required scripts to run app -->
<script src="/controls/newRecipeControl.js"></script>
<script src="/controls/errorMessageControl.js"></script>
</html>
Thanks for any help.
In your code you are using getElementById but there is no id called directionSet its a class.
You can simply use parentElement and remove to remove the newly added dynamic inputs by calling an onClick function.
In the onClick function removeElement() - this refers to the elements we have clicked and it will remove from the form.
var ingCounter = 1;
var dirCounter = 1;
var limit = 10;
function addIngredient(divName) {
if (ingCounter == limit) {
alert("You have reached the add limit");
} else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<div class='ingredientSet'><input class='ingredientInput' type='text' name='ingredients[]'><button class='deleteIngredientButton' type='button' onClick='removeElement(this);'>X</button></div>";
document.getElementById(divName).appendChild(newdiv);
ingCounter++;
}
}
function addDirection(divName) {
if (dirCounter == limit) {
alert("You have reached the add limit");
} else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<div class='directionSet'><input class='directionInput' type='text' name='directions[]'><button class='deleteDirectionButton' onClick='removeElement(this);' type='button'>X</button></div>";
document.getElementById(divName).appendChild(newdiv);
dirCounter++;
}
}
function removeElement(elementId) {
// Removes an element from the document
elementId.parentElement.remove()
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homemade</title>
</head>
<body>
<!-- Background image -->
<div id="newRecipeContainer">
<div id="closeButtonContainer">
<div id="backButton"><a id="back" href="/recipes/myRecipes">← My Recipes</a></div>
</div>
<form id="createRecipeForm" action="/recipes/createRecipe" method="POST" enctype="multipart/form-data">
<label id="formSubHeading">Create Your Homemade Recipe</label>
<div id="recipeNameContainer">
<label id="recipeNameLabel">Title</label>
<input id="recipeNameInput" type="text" name="recipeName">
</div>
<div id="recipeImage">
<label id="recipeImageLabel">Add An Image of Your Meal</label>
<input id="recipeImageInput" type="file" accept="image/*" name="recipeImage" />
<label id="recipeImageInputLabel" for="recipeImageInput" name="recipeImage">Choose A File</label>
</div>
<div id="recipeDescription">
<label id="recipeDescriptionLabel">Description</label>
<textarea id="recipeDescriptionInput" name="recipeDescription" cols="30" rows="10" maxlength="2000"></textarea>
</div>
<div class="ingredientsContainer">
<label id="ingredientsLabel">Ingredients</label>
<button id="addIngredientButton" type="button" onClick="addIngredient('allIngredients');">Add Another Ingredient</button>
<div id="allIngredients">
<div class="ingredientSet">
<input class="ingredientInput" type="text" name="ingredients[]">
</div>
</div>
</div>
<div class="directionsContainer">
<label id="directionsLabel">Directions</label>
<button id="addDirectionButton" type="button" onClick="addDirection('allDirections');">Add Another Direction</button>
<div id="allDirections">
<div class="directionSet">
<input class="directionInput" type="text" name="directions[]">
</div>
</div>
</div>
<div id="createRecipeButtonContainer">
<button id="createRecipeButton" type="submit">Create Recipe</button>
</div>
</form>
</div>
</body>
</html>

Function will not update variable

The variable status is set to "uncheck" and needs to be updated to "done" using the change() function.
Ultimately what needs to happen When button with id randomIdTwo is pressed, The completeTodo() function is called which causes the list item to be removed from its current div "list", appended to the div "complete-list", and the change() function updates the value of the "status" variable from "uncheck" to "done".
Everything works except the change() function.
document.getElementById('button').addEventListener('click', function addTodo() {
var value = document.getElementById('input').value;
var status = "uncheck";
var randomId = Math.random();
var randomIdTwo = Math.random();
function change() {
status = "done";
};
const item = `<li>
<div class="item">
<div class="complete">
<button id="` + randomIdTwo + `" class="${status}"></button>
</div>
<p class="text">${value}</p>
<div class="remove">
<button id="` + randomId + `" class="todo"></button>
</div>
</div>
</li>`;
const position = "beforeend";
list.insertAdjacentHTML(position, item);
document.getElementById(randomId).addEventListener('click', function removeTodo() {
var item = this.closest('li');
item.remove();
});
document.getElementById(randomIdTwo).addEventListener('click', function completeTodo() {
var item = this.closest('li');
item.remove();
document.getElementById("completelist").appendChild(item);
change();
});
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="Resources/CSS/reset.min.css">
<link rel="stylesheet" type="text/css" href="Resources/CSS/style.css">
</head>
<body>
<div class="container">
<header>
<div id="datetime"></div>
<div id="ampm"></div>
<input type="text" id="input" placeholder="Add an item" />
<button id="button" type="button"><img src="./img/additem4.png"></button>
</header>
<div id="list">
</div>
<div id="divline"></div>
<div id="completelist">
</div>
</div>
<script src="resources/JS/app.js"></script>
</body>
</html>
Changing the status variable doesn't change the class of the element. You need to update the button's classList
document.getElementById('button').addEventListener('click', function addTodo() {
var value = document.getElementById('input').value;
var status = "uncheck";
var randomId = Math.random();
var randomIdTwo = Math.random();
function change(button) {
button.classList.add("done");
button.classList.remove("uncheck");
};
const item = `<li>
<div class="item">
<div class="complete">
<button id="` + randomIdTwo + `" class="${status}"></button>
</div>
<p class="text">${value}</p>
<div class="remove">
<button id="` + randomId + `" class="todo"></button>
</div>
</div>
</li>`;
const position = "beforeend";
list.insertAdjacentHTML(position, item);
document.getElementById(randomId).addEventListener('click', function removeTodo() {
var item = this.closest('li');
item.remove();
});
document.getElementById(randomIdTwo).addEventListener('click', function completeTodo() {
var item = this.closest('li');
item.remove();
document.getElementById("completelist").appendChild(item);
change(this);
});
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="Resources/CSS/reset.min.css">
<link rel="stylesheet" type="text/css" href="Resources/CSS/style.css">
</head>
<body>
<div class="container">
<header>
<div id="datetime"></div>
<div id="ampm"></div>
<input type="text" id="input" placeholder="Add an item" />
<button id="button" type="button"><img src="./img/additem4.png"></button>
</header>
<div id="list">
</div>
<div id="divline"></div>
<div id="completelist">
</div>
</div>
<script src="resources/JS/app.js"></script>
</body>
</html>
You're using string interpolation to set the class initially, but string interpolation does not create a data-binding between the resultant element and the variable. So change() is being called, and status is being updated, but the value of the element you created via a string isn't seeing that change, so it's not being updated.
You would need to access the element in the DOM and change it's classList manually.

How to get answer only the image on which mouse is, in the text box?

Here is the JS code:
function flag(){
document.getElementById("f1").value = "country1";
document.getElementById("f1").value = "country2";
}
function clean(){
document.getElementById("country1").value = "";
document.getElementById("country2").value = "";
}
HTML code
<!DOCTYPE html>
<html>
<head>
<title>Flag name</title>
<script src="flag.js"></script>
<script src="C:\Users\DELL\Desktop\jq\jquery.3.js"></script>
<link rel="stylesheet" text="text/css" href="flag.css">
</head>
<body>
<img src="C:\Users\DELL\Desktop\flag1.png" id="flag1" onmouseover="flag()" onmouseout="clean()">
<img src="C:\Users\DELL\Desktop\flag2.png" id="flag2" onmouseover="flag()" onmouseout="clean()">
<form action="#" method="GET">
<input type="text" name="Flag1" id="f1">
<input type="text" name="Flag2" id="f2">
</form>
</body>
</html>
How to get the result in separate text box when mouse is hovered over the image of a country flag.
I want only the output on which mouse is present.
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
$("#flag1").mouseover(function() {
$("#f1").val("country1");
});
$("#flag1").mouseleave(function() {
$("#f1").val("");
});
$("#flag2").mouseover(function() {
$("#f2").val("country2");
});
$("#flag2").mouseleave(function() {
$("#f2").val("");
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>Flag name</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<img src="images/banner1.png" id="flag1">
<img src="images/mobile.png" id="flag2">
<form action="#" method="GET">
<input type="text" name="Flag1" id="f1">
<input type="text" name="Flag2" id="f2">
</form>
</body>
</html>
Hi and welcome to Stackoverflow, i think this could be a more generic solution for you:
function flag(element) {
document.getElementById(element.getAttribute('data-target')).value = element.id;
}
function clean(element) {
document.getElementById(element.getAttribute('data-target')).value = ''
}
img {
width: 150px;
}
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" id="country1" data-target="f1" onMouseOver="flag(this)" onMouseOut="clean(this)">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" id="country2" data-target="f2" onMouseOver="flag(this)" onMouseOut="clean(this)">
<form action="#" method="GET">
<input type="text" name="Flag1" id="f1">
<input type="text" name="Flag2" id="f2">
</form>
onMouseOver
function flag(id){
document.getElementById("f1").value = id;
}
function clean(){
document.getElementById("country1").value = "";
document.getElementById("country2").value = "";
}
HTML code
<!DOCTYPE html>
<html>
<head>
<title>Flag name</title>
<script src = "flag.js"></script>
<script src = "C:\Users\DELL\Desktop\jq\jquery.3.js"></script>
<link rel = "stylesheet" text = "text/css" href = "flag.css">
</head>
<body>
<img onmouseover="flag(this.id))" src = "C:\Users\DELL\Desktop\flag1.png" id = "flag1" onmouseout = "clean()">
<img onmouseover="flag(this.id))" src = "C:\Users\DELL\Desktop\flag2.png" id = "flag2" onmouseout = "clean()">
<form action = "#" method = "GET">
<input type = "text" name = "Flag1" id = "f1">
<input type = "text" name = "Flag2" id = "f2">
</form>
</body>
</html> onmouseover="bigImg(this)"
How is the structure of you project?
flag.js has to be in the same folder that index.html. Also link your javascript scripts at the end of the body.
And then you have a couple of errors with the document.getElementById, you are using the wrong ids.
function flag(){
document.getElementById("f1").value = "country1";
document.getElementById("f2").value = "country2";
}
function clean(){
document.getElementById("f1").value = "";
document.getElementById("f2").value = "";
}
<!DOCTYPE html>
<html>
<head>
<title>Flag name</title>
<link rel="stylesheet" text="text/css" href="flag.css">
</head>
<body>
<img src="C:\Users\DELL\Desktop\flag1.png" id="flag1" onmouseover="flag()" onmouseout="clean()">
<img src="C:\Users\DELL\Desktop\flag2.png" id="flag2" onmouseover="flag()" onmouseout="clean()">
<form action="#" method="GET">
<input type="text" name="Flag1" id="f1">
<input type="text" name="Flag2" id="f2">
</form>
<script src="flag.js"></script>
<script src="C:\Users\DELL\Desktop\jq\jquery.3.js"></script>
</body>
</html>
you can use o onmouseover = "flag()" the parameter this.id like
<img src="C:\Users\DELL\Desktop\flag1.png" id="flag1" onmouseover="flag(this.id)" onmouseout = "clean()">
and after make a if to put the value
if (parameter == flag'){
put one flag
}else{
put the other flag
}
You need to pass your event or this inside of onmouseover and onmouseout event
You can find the textfield by using document.querySelector() and set value inside of onmouseover/onmouseout
You can get the you target attribute value using getAttribute() method.
DEMO
function flag(tag) {
document.querySelector(`[name=${tag.id}]`).value = tag.getAttribute('value');
}
function clean(tag) {
document.querySelector(`[name=${tag.id}]`).value = '';
}
<img src="C:\Users\DELL\Desktop\flag1.png" value="Country 1" id="flag1" onmouseover="flag(this)" onmouseout="clean(this)">
<img src="C:\Users\DELL\Desktop\flag2.png" value="Country 2" id="flag2" onmouseover="flag(this)" onmouseout="clean(this)">
<form action="#" method="GET">
<input type="text" name="flag1">
<input type="text" name="flag2">
</form>

why cannot set property innerhtml of null showing

Why I cannot set property innerhtml of null showing?
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
var scr1 = 0;
var scr2 = 0;
document.getElementById("demo").innerHtml= "Paragraph changed!";
document.getElementById("CS").innerHtml = "Your Score :"
function srt() {
var a = document.getElementById("none");
a.style.boxShadow = "none"
setTimeout(function re(){
a.style.boxShadow = "-4px -4px grey"
},200)
}
</script>
</head>
<body>
<h2 class="scr1" id="dome">Your Score :</h1>
<h2 class="scr2" id="CS">Com Score :</h2>
<br />
<br />
<center>
<div class="mid"></div>
<div class="srt" id="none">
<h4>Start</h4>
</div>
</center>
</body>
</html>
Please help me with this code
Inner HTML not working I can't find where is error so please help me
You have a few issues with your code:
innerHtml isn't a property, you instead need to use innerHTML
You are trying to target elements in your js code before they are loaded on the page (the DOM - Document Object Model, isn't ready yet). To overcome this you can call your code when your page has loaded. You can do this by using window.onload=init, where init is a function, which runs when the page has loaded.
Your targeting the id demo in your javascript but you do not have an element with the id demo in your HTML, you have the id dome so I'm assuming dome is supposed to say demo
Fixing all of these things will fix your issue.
See a working example bellow:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
function init() {
var scr1 = 0;
var scr2 = 0;
document.getElementById("demo").innerHTML = "Paragraph changed!";
document.getElementById("CS").innerHTML = "Your Score :";
function srt() {
var a = document.getElementById("none");
a.style.boxShadow = "none";
setTimeout(function re() {
a.style.boxShadow = "-4px -4px grey";
}, 200);
}
}
window.onload = init;
</script>
</head>
<body>
<h2 class="scr1" id="demo">Your Score :</h1>
<h2 class="scr2" id="CS">Com Score :</h2>
<br />
<br />
<center>
<div class="mid"></div>
<div class="srt" id="none">
<h4>Start</h4>
</div>
</center>
</body>
</html>
Move your script tag to the bottom of page just below the body close tag .
Also you are referring to an element "dome", but in html you have element "demo", make them both the same
document.getElementById("demo").innerHTML = "Paragraph changed!";
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2 class="scr1" id="dome">Your Score :</h1>
<h2 class="scr2" id="CS">Com Score :</h2>
<br />
<br />
<center>
<div class="mid"></div>
<div class="srt" id="none">
<h4>Start</h4>
</div>
</center>
<script>
var scr1 = 0;
var scr2 = 0;
document.getElementById("dome").innerHTML = "Paragraph changed!";
document.getElementById("CS").innerHtml = "Your Score :"
function srt() {
var a = document.getElementById("none");
a.style.boxShadow = "none"
setTimeout(function re() {
a.style.boxShadow = "-4px -4px grey"
}, 200)
}
</script>
</body>
</html>

Form html google scrip

Can anyone tell me how I can make the generated document pick up the data from the forms and put it as their title? I have already looked at the Google Script documentation and so far I have not found anything that can answer me or show me a similar example. Until now I have found relevant subjects and code here, but none have suited my need.
function doGet() {
return HtmlService
.createHtmlOutputFromFile('index')
}
function criarDocument(){
var doc = DocumentApp.create('Doc');
}
function criarSheet(){
var sheet = SpreadsheetApp.create('Sheet');
}
function createPresentation() {
var presentation =
Slides.Presentations.create({"title": "Presentation"});
Logger.log("Created presentation with ID: " + presentation.presentationId);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{
background-color: lightblue;
}
</style>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<title>CRIE</title>
<script>
function criarDocument(){
google.script.run.criarDocument();
}
function criarSheet(){
google.script.run.criarSheet();
}
function createPresentation(){
google.script.run.createPresentation();
}
function titulo(){
var st = document.getElementById('student').value;
var te = document.getElementById('teacher').value;
var wo = document.getelementById('work').value;
document.getElementById('student' + 'teacher' + 'work').value;
}
</script>
</head>
<body>
<h1><p align = "center">CRIE SEU ARQUIVO</p></h1>
<div>
<form id = 'form' onsubmit="titulo">
<h2><p align = "center"> Student:</p></h2><p align = "center">
<input type="text" name="estudante" id="student">
<h2><p align = "center">Teacher: </p></h2><p align = "center">
<input type="text" name="professor" id="teacher">
<h2><p align = "center">Work Name</p></h2><p align = "center">
<input type="text" name="trabalho" id="work">
<br><br>
<button class="action" value="Submit" onclick= 'criarDocument()'>Start Document </button>
<button class="action" value="Submit" onclick='criarSheet()'>Start Sheet</button>
<button class="action" value="Submit" onclick='createPresentation()'>Start Presentation</button>
</form>
</div>
</body>
</html>
Here's a simple example of a timestamped text input into a spreadsheet from a sidebar. Don't forget to name your sheet Notes.
Code.gs
function onOpen()
{
loadSideBar();
SpreadsheetApp.getUi().createMenu('My Menu').addItem('loadSidebar', 'loadSideBar').addToUi();
}
function dispText(txt)
{
var ss=SpreadsheetApp.getActiveSpreadsheet();
var sht=ss.getSheetByName('Notes');
var ts=Utilities.formatDate(new Date(), 'GMT-6', "M/dd/yyyy HH:mm:ss");
var row=[];
row.push(ts);
row.push(txt);
sht.appendRow(row);
return true;
}
function loadSideBar()
{
var userInterface=HtmlService.createHtmlOutputFromFile('sidebar');
SpreadsheetApp.getUi().showSidebar(userInterface);
}
sidebar.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
$('#txt1').val('');
});
function sendText()
{
var txt=$('#txt1').val();
google.script.run
.withSuccessHandler(clearText)
.dispText(txt);
}
function clearText()
{
$('#txt1').val('');
}
console.log("My code");
</script>
</head>
<body>
<textarea id="txt1" rows="12" cols="35"></textarea><br />
<input id="btn1" type="button" value="submit" onClick="sendText();" />
</body>
</html>

Categories

Resources