I'm trying to create a signature block generator for my company, and I need to be able to output the name of individuals twice. Once in the outgoing email, and another in the reply. I've tried using GetElementByID, and that works fine for one, but not two. I've tried GetElementsByName, but failed. https://codepen.io/jggrs/pen/paZyrN
<html>
<head>
<script type="text/JavaScript">
function getOption(){
var firstlast = document.getElementById("firstlast").value;
display_firstlast.innerHTML= firstlast;
}
</script>
</head>
<body>
<form>
First and Last Name: <input type="text" id = "firstlast">
<input type="button" onclick="getOption()" value="Make My Signature">
</form>
<!--NAME AND TITLE-->
<p>My name is <span id = "display_firstlast"></span></p>
<p>My name is <span id = "display_firstlast"></span></p>
</body>
</html>
Always use class for stuff like that
1- get all elements by class name
2- convert it to a array so you can loop in it ([].slice.call() convert a HTMLCollection to a array)
3- change the innerHTML of each
<script type="text/JavaScript">
function getOption(){
var firstlast = document.getElementById("firstlast").value;
var list = [].slice.call(document.getElementsByClassName('display_firstlast'));
list.forEach(function(item){
item.innerHTML= firstlast
});
}
</script>
</head>
<body>
<form>
First and Last Name: <input type="text" id = "firstlast">
<input type="button" onclick="getOption()" value="Make My Signature">
</form>
<!--NAME AND TITLE-->
<p>My name is <span class="display_firstlast"></span></p>
<p>My name is <span class="display_firstlast"></span></p>
</body>
</html>
what is going here is that an id in javascript must be unique to one and only one element, However, this can be done by assigning a class to the both p tags or by simply:
<script type="text/JavaScript">
function getOption(){
var firstlast = document.getElementById("firstlast").value;
document.geElementById('display_firstlast').innerHTML= firstlast;
document.geElementById('display_firstlast2').innerHTML = firstlast;
}
</script>
<p>My name is <span id = "display_firstlast"></span></p>
<p>My name is <span id = "display_firstlast2"></span></p>
document.querySelectorAll('button')[0].addEventListener('click', function() {
var name = document.querySelectorAll('input')[0].value;
var items = Array.prototype.slice.call(document.querySelectorAll('#display_firstlast'));
for ( var e of items ) {
e.innerHTML = name;
}
});
<p>My name is <span id = "display_firstlast"></span></p>
<p>My name is <span id = "display_firstlast"></span></p>
<div><input type="text" value="A Name" /> <button>Set Name</button></div>
As many people have said you SHOULD be using classes for that; however, you can also do this if you really need it as an id =>
document.querySelectorAll('#display_firstlast')
that should get both elements.
Let's teach you some better coding practices:
//<![CDATA[
/* external.js */
var doc, bod, M, I, Q, S, old = onload; // for use on other pages - read note below
onload = function(){
if(old)old(); // change old var name if using technique on other pages
doc = document; bod = doc.body;
M = function(tag){
return doc.createElement(tag);
}
I = function(id){
return doc.getElementById(id);
}
Q = function(selector){
return doc.querySelectorAll(selector);
}
S = function(selector){
return doc.querySelector(selector);
}
var firstLast = I('first_last'), opt = I('opt'), out = I('output'), o1 = out.firstChild, o2 = o1.nextSibling;
I('form').onsubmit = function(){
return false;
}
opt.onclick = function(){
if(firstLast.value){
o1.innerHTML = o2.innerHTML = 'My name is '+firstLast.value;
}
}
firstLast.onfocus = function(){
o1.innerHTML = o2.innerHTML = '';
}
} // end onload
//]]>
/* external.css */
html,body{
padding:0; margin:0;
}
body{
background:#000; overflow-y:scroll;
}
.main{
width:940px; background:#aaa; padding:20px; margin:0 auto;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='viewport' content='width=device-width' />
<title>Test Template</title>
<link type='text/css' rel='stylesheet' href='external.css' />
<script type='text/javascript' src='external.js'></script>
</head>
<body>
<div class='main'>
<form id='form' name='form'>
<input id='first_last' name='first_last' type='text' />
<input id='opt' name='opt' type='button' value='Make My Signature' />
</form>
<div id='output'><div></div><div></div></div>
</div>
</body>
</html>
Separate your HTML, CSS, and JavaScript, so it can be cached.
Related
I have 2 buttons, the first is named btnClient and the following is btnSort. When, I enter 3 names, I would like to sort alphabetically.
I have to use the method sort()but it doesn't work.
In HTML
<body >
<h1>Exercise 13</h1>
<input type="text" id="nameClient" size="30" />
<button id='btnClient'>Save client</button>
<input type="text" id="listSort" size="30" />
<button id='btnSort'>List sort</button>
<script src="script.js"></script>
</body>
In JS
var arrayClient = new Array();
var buttonClient = document.getElementById('btnClient');
var buttonDisplay = document.getElementById('btnSort');
buttonClient.addEventListener('click', addClient);
buttonDisplay.addEventListener('click', display);
function addClient(){
var i = 0;
arrayClient[i] = document.getElementById('nameClient');
i = i + 1;
document.getElementById('nameClient').value = ' ';
}
function display()
{
arrayClient.sort();
}
My btnSort button has a problem, nothing happening, even by clicking on button btnSort.
var arrayClient = new Array();
var buttonClient = document.getElementById('btnClient');
var buttonDisplay = document.getElementById('btnSort');
buttonClient.addEventListener('click', addClient);
buttonDisplay.addEventListener('click', display);
function addClient(){
var i = 0;
arrayClient[i] = document.getElementById('nameClient');
i = i + 1;
document.getElementById('nameClient').value = ' ';
}
function display()
{
arrayClient.sort();
}
<html>
<head>
<script src="Thing.js" type="text/javascript">
</script>
<link rel="stylesheet" type="text/css" href="Main.css">
</head>
<body >
<h1>Exercise 13</h1>
<input type="text" id="nameClient" size="30" />
<button id='btnClient'>Save client</button>
<input type="text" id="listSort" size="30" />
<button id='btnSort'>List sort</button>
<script src="script.js"></script>
</body>
</html>
Use push method to add values to your array after clicking the bntClient button,
After clicking on sort you will see these values being sorted and displayed in the console.
Your second input is meaningless.
const arrayClient = []
const buttonClient = document.getElementById('btnClient');
const buttonDisplay = document.getElementById('btnSort');
const firstInput = document.getElementById('nameClient');
buttonClient.addEventListener('click', addClient);
buttonDisplay.addEventListener('click', display);
function addClient() {
arrayClient.push(firstInput.value.trim());
firstInput.value = '';
}
function display() {
arrayClient.sort();
console.log(arrayClient);
}
<html>
<head>
<script src="Thing.js" type="text/javascript">
</script>
<link rel="stylesheet" type="text/css" href="Main.css">
</head>
<body>
<h1>Exercise 13</h1>
<input type="text" id="nameClient" size="30" />
<button id='btnClient'>Save client</button>
<input type="text" id="listSort" size="30" />
<button id='btnSort'>List sort</button>
<script src="script.js"></script>
</body>
</html>
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>
I want to assign a value to hidden input then grab that value from next section of javascript using input id. So it will alert the value as per hidden input value which assigned from the first section of javascript. However, it looks not useful this is important for my current task. I have to push value to HTML then get it back again in javascript variable. Let me know if you have any solution.
<!DOCTYPE html>
<html>
<head>
<title>Just test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/pdfmake.min.js"></script>
</head>
<body>
<script>
var myVal = "some string";
$("#foo").val(myVal);
</script>
<input type="hidden" name="foo" id="foo" value="">
<script>
var doo = "";
doo = $(this).find("#foo").val();
if (doo != "") {
alert(doo);
}else{
alert("doo is null");
}
</script>
</body>
</html>
You can use $(document).ready() method which waits until all DOM elements are rendered. Then executes the JS code. You can read more about it here
<!DOCTYPE html>
<html>
<head>
<title>Just test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/pdfmake.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
var myVal = "some string";
$("#foo").val(myVal);
});
</script>
<input type="hidden" name="foo" id="foo" value="">
<script>
$(document).ready(function(){
var doo = "";
doo = $(this).find("#foo").val();
if (doo != "") {
alert(doo);
}else{
alert("doo is null");
}
});
</script>
</body>
</html>
Using HTMLFormControlsCollection of the Web API allows us to reference any and all form elements very easily:
Example
/* Find the first form of a page without knowing it's .class or #id */
// HTMLFormControlsCollection // Common way
var form = document.forms[0]; var form = document.getElementsByTagName('form')[0];
Demo
<!DOCTYPE html>
<html>
<head>
<title>Just test</title>
</head>
<body>
<form id='A'>
<input id="X" name="X">
<output id='Y' name='Y'></output>
<input id='Z' name='Z' type='hidden'>
</form>
<script>
var F = document.forms.A;
F.oninput = function() {
var X = F.X.value;
var Y = F.Y;
var Z = F.Z;
Y.value = X;
Z.value = X;
}
</script>
</body>
</html>
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>
I am trying to use .innerHTML to overwrite a p. The first time i do it, it overwrites it successfully however when i try it a second time it doesn't seem to work. I planned to put in some CSS in the future, so thats is empty. THIS IS THE JAVASCRIPT
function create() {
var x = document.getElementById("cName").value;
var y = document.getElementById("cType").value;
window.alert("Running new card")
newCard(x,y)
}
function newCard(name,type) {
window.alert("new card ran")
this.name = name;
this.type = type;
}
function print(){
document.getElementById("cardName").innerHTML = this.name
document.getElementById("cardType").innerHTML = this.type
}
THIS IS THE HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
<title>TealeStone</title>
</head>
<body>
<script src="JavaScript.js"></script>
<form name="newCard">
Card Name : <input type="text" id="cName" />
Card Type : <input type="text" id="cType" />
<button onclick="javascript:create()">Submit</button>
</form>
<p id="cardName">Card name</p>
<p id="cardType">Card type</p>
<script>
print()
</script>
</body>
</html>