How to display var from javascript to html? - html

I keep getting an error for the last line in generatePassword()," document.getElementById(output).innerHTML = outHash;" Any ideas on how to display this variable?
<html>
<body>
<p>Enter your text here </p>
<input type="text" value="Enter password here" id="userInput">
<button onclick="generatePassword()">Generate</button>
<p>Hash output <span id="output"></span></p>
<script>
function generatePassword() {
var Input = document.getElementById("userInput");
var outHash = digestMessage(Input);
var displayHash = [];
document.getElementById(output).innerHTML = outHash;
}
async function digestMessage(message) {
var encoder = new TextEncoder();
var data = encoder.encode(message);
var hash = await crypto.subtle.digest('SHA-256', data);
return hash;
}
</script>
</body>

Change output in document.getElementById(output) to a string ("output") and it should work. Your javascript is trying to call a variable that doesn't exist.

Related

jQuery sentence case function keeps replacing my text

I'm trying to make a input sentence case tool but when I type anything different it keeps returning the value="" text.
I'd like to make an exception for pasted or replaced text. So when I type a new value in input it should return that string into sentence case.
Here is the code snippet I've made:
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
var title = $("#essay-title").val();
var sentenceCaseTitle = capitalizeFirstLetter(title.toLowerCase());
//alert( lowerCaseTitle );
function sentencecase() {
$("#essay-title").trigger("change paste");
$("#essay-title").val(sentenceCaseTitle);
}
https://jsfiddle.net/c105vedo/
var title = $("#essay-title").val(); is executed immediately on page visit, so it's always empty and not updated. Move that part inside sentencecase:
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
function sentencecase() {
var title = $("#essay-title").val();
var sentenceCaseTitle = capitalizeFirstLetter(title.toLowerCase());
$("#essay-title").trigger("change paste");
$("#essay-title").val(sentenceCaseTitle);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="essay-title" value="TEST TITLE">
<button type="button" onclick="sentencecase()">OK
</button>
You have to move the following code into your sentencecase function,
var title = $("#essay-title").val();
var sentenceCaseTitle = capitalizeFirstLetter(title.toLowerCase());
Problem is that if the above code is outside of the function it will only be executed once, so that is why you keep getting the same value.
Demo
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
//alert( lowerCaseTitle );
function sentencecase() {
var title = $("#essay-title").val();
var sentenceCaseTitle = capitalizeFirstLetter(title.toLowerCase());
$("#essay-title").trigger("change paste");
$("#essay-title").val(sentenceCaseTitle);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="essay-title" value="TEST TITLE">
<button type="button" onclick="sentencecase()">OK
</button>

Apps script return values from server function to html form

I need help of professionals at Apps script. I have the project implemented by web-app.
I wrote script on server-part
var url = "https://docs.google.com/spreadsheets/d/1s8l-8N8dI-GGJi_mmYs2f_88VBcnzWfv3YHgk1HvIh0/edit?usp=sharing";
var sprSRCH = SpreadsheetApp.openByUrl(url);
let sheetSRCHSSCC = sprSRCH.getSheetByName("PUTAWAY_TO");
function GetQ(){
var QPLAN = sheetSRCHSSCC.getRange("M2:M").getValues().filter(String).length;
var myArray = sheetSRCHSSCC.getRange("O2:O" + (QPLAN + 1)).getValues();
var QFACT = 0;
for (i = 0; i < myArray.length; i++) {
if (myArray[i] != "") {
QFACT += 1
}
}
}
I need to return values from this function to inputs:
QFACT to FACT
QPLAN to PLAN
<div class="input-field col s3">
<input disabled value="" id="PLAN" type="text" >
<label for="disabled">PLAN</label>
</div>
<div class="input-field col s3">
<input disabled value="" id="FACT" type="text" >
<label for="disabled">FACT</label>
</div>
I will be grateful for the help. I'm new at this))
If you are using Apps Script deploying Web App, I can see 2 possibilities :
1/ Get data at the loading of the page (and only at the loading) :
In code.gs :
function doGet() {
var tmp = HtmlService.createTemplateFromFile('page');
tmp.QFACT = "hello";
tmp.PLAN = "World!";
return tmp.evaluate();
}
In page.html :
<html>
<body>
<h5><?= QFACT ?></h5>
<h5><?= QPLAN ?></h5>
</body>
</html>
2/ If you need to refresh the data by click button, or something else, you will need to operate diffently :
Add a page-js.html to your project, and bind it at the end of your page.html
<html>
<body>
<h5 id="QFACT"></h5>
<h5 id="QPLAN"></h5>
</body>
<?!= include("page-js"); ?>
</html>
then in your page-js.html :
<script>
function refresh() {
google.script.run.withSuccessHandler(callback).refresh();
}
function callback(e) {
document.getElementById('QPLAN').innerHTML = e.QPLAN;
document.getElementById('QFACT').innerHTML = e.QFACT;
}
</script>
and finally add the refresh() function in your code.gs :
function refresh() {
var obj = {};
obj.QPLAN = "QPLAN";
obj.QFACT = "QFACT";
return obj;
}

How to make a script execute on page load?

I am trying to create a HTML script that will pick a random number out of a list I have given when someone loads the page. This means if they refresh the page a new number will appear. I know how to generate a script that shows a random word/number when you press a button but it is necessary to make the number generate itself and also it can't be in a wordbox. If anyone can help me with this, I'd appreciate it.
I don't know much about coding but from the information I've gathered, here's what I have constructed:
<html>
<head>
<title></title>
<SCRIPT LANGUAGE="JavaScript">
<!--
// Use the following variable to specify
// the number of random words
var NumberOfWords = 32
var words = new BuildArray(NumberOfWords)
// Use the following variables to
// define your random words:
words[1] = "2,719"
words[2] = "2,718"
words[3] = "2,717"
words[4] = "2,715"
words[5] = "2,713"
words[6] = "2,711"
words[7] = "2,710"
words[8] = "2,709"
words[9] = "2,708"
words[10] = "2,706"
words[11] = "2,704"
words[12] = "2,702"
words[13] = "2,701"
words[14] = "2,700"
words[15] = "2,699"
words[16] = "2,698"
words[17] = "2,696"
words[18] = "2,694"
words[19] = "2,692"
words[20] = "2,690"
words[21] = "2,688"
words[22] = "2,686"
words[23] = "2,685"
words[24] = "2,683"
words[25] = "2,681"
words[26] = "2,678"
words[27] = "2,675"
words[28] = "2,673"
words[29] = "2,671"
words[30] = "2,669"
words[31] = "2,667"
words[32] = "2,664"
function BuildArray(size){
this.length = size
for (var i = 1; i <= size; i++){
this[i] = null}
return this
}
document.addEventListener("DOMContentLoaded",
function PickRandomWord(frm) {
// Generate a random number between 1 and NumberOfWords
var rnd = Math.ceil(Math.random() * NumberOfWords)
// Display the word inside the text box
frm.WordBox.value = words[rnd]
})
//-->
</SCRIPT>
<CENTER>
<FORM NAME="WordForm">
<INPUT TYPE=TEXT SIZE=50 NAME="WordBox"><BR>
</CENTER>
</FORM>
<body>
<big><big><span style="font-weight: bold;">
<br>
<br>
<br>
</span></big></big>
</body>
</html>
The problem is it doesn't work and I don't know why.
You should put your script inside the DOMContentLoaded listener:
document.addEventListener("DOMContentLoaded", function() {
//call your script here
});
Note: IE8 does not support addEventListener.
If you are using jquery, you can use $(document).ready
$(document).ready(function() {
//call your script here
});

Input type=file, restrict to .rpt only

I'm using tag <input type="file" accept="application/x-rpt, magnus-internal/rpt"/> to only allow .rpt files to be uploaded, but it's unsuccessful. User still can upload whatever they want.
What's wrong here? Please help me. Thank you so much.
Put the following script in head
<script type="text/javascript">
function ValidateForm() {
var fileBox = document.getElementById("fileBox");
var val = fileBox.value;
var splittedValue = val.split(".");
//alert(splittedValue.length);
//for (var i = 0; i < splittedValue.length; i++) {
// alert(splittedValue[i]);
//}
var NthElementIndex = splittedValue.length - 1;
var nThElement = splittedValue[NthElementIndex];
if (nThElement != "jpg"
&& nThElement != "rpt") {
alert("Please select valid rpt file");
}
}
</script>
Now Use the following information for id in input tag
<input type="file" id="fileBox" />
<input type="button" onclick="ValidateForm()" value="Validate" />

How to put the data taken from google custom search API to checkbox list

I have a code which takes data from google custom search API, There is no wrong with the custom search API part, it retrieves data without any error
<html>
<head>
<title>JSON Custom Search API Example</title>
</head>
<body>
<div id="content"></div>
<script>
var pageName = new Array();
var pageLink = new Array();
var pageDetails = new Array();
function hndlr(response) {
for (var i = 0; i < response.items.length; i++) {
var item = response.items[i];
pageName[i] = item.title;
pageLink[i] = item.link;
pageDetails[i] = item.htmlSnippet;
}
}
// Some codes
var search_query = 'https://www.googleapis.com/customsearch/v1?key=MY_KEY&cx=XXXXXXXXX&q='+query+'&start=1&callback=hndlr';
s = document.createElement('script');
s.src = search_query;
document.getElementsByTagName('head')[0].appendChild(s);
</script>
</body>
</html>
Required data are saved in the pageName, pageLink and pageDetails arrays.
Now I want display them with chechboxes and allow user to select them.
I need to take the links of the selected sites(pageLink variable) and pass it to anothe file using POST method
I tried using bellow code just before end of the body tag()
<form action="b.php" method="post">
<script>
for (var j = 0; j < 5; j++) {
document.write("<input type='checkbox' name='formDoor[]' id='"+j+"' value= '' />"+pageName[j]+"<br />");
document.getElementById(j).value = pageLink[j];
}
</script>
<input type="submit" name="formSubmit" value="Submit" />
</form>
But in the other file, it says variables are undefined. seems like variables doesn't pass to the 'b.php' file
Can anyone please tell me how to do this?
Your current code for adding checkboxes would likely be executed before the search result arrives (i.e.: before hndlr is executed), so all arrays are still empty. The solution would be to move the checkbox creation code into the hndlr function.
Here's the fixed page.
<html>
<head>
<title>JSON Custom Search API Example</title>
</head>
<body>
<div id="content"></div>
<form id="bform" action="b.php" method="post">
<input type="submit" name="formSubmit" value="Submit" />
</form>
<script>
var pageName = new Array();
var pageLink = new Array();
var pageDetails = new Array();
function hndlr(response) {
var f=document.getElementById('bform'), prev=f.children[0];
for (var i = 0; i < response.items.length; i++) {
var ele, item = response.items[i];
pageName[i] = item.title;
pageLink[i] = item.link;
pageDetails[i] = item.htmlSnippet;
ele = document.createElement('BR');
f.insertBefore(ele, prev);
prev = ele;
ele = document.createTextNode(pageName[i]);
f.insertBefore(ele, prev);
prev = ele;
ele = document.createElement('INPUT');
ele.type = 'checkbox';
ele.name = 'formDoor[]';
ele.id = i;
ele.value = encodeURI(pageLink[i]);
f.insertBefore(ele, prev);
prev = ele;
}
}
// Some codes
var search_query = 'https://www.googleapis.com/customsearch/v1?key=MY_KEY&cx=XXXXXXXXX&q='+query+'&start=1&callback=hndlr';
s = document.createElement('script');
s.src = search_query;
document.getElementsByTagName('head')[0].appendChild(s);
</script>
</body>
</html>