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>
Related
I develop and web app in apps script where i can select a name. Each name is in my Sheets and is depending to a profil. I can have 2 possibilities : The name have a profil or doesn't have. In the screenshot below, Sir A have a profil and Sir B and C doesn't have.
I would like to show a div in my html's page if the selected name doesn't have profil (and already hide if the selected name have a profil). So i create a function to detect if the select name have a value written in my Sheets. If it's correct, i write yes in one div (and no if it's not correct). But when i want to show div, it's doesn't work.
To try to understand my problem, i created a button to launch a function where i get the value of my result. I have undefined each time and i don't know why.
This is my html's code :
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('JavaScript'); ?>
<?!= include('StyleSheet'); ?>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
<form>
<!-- NAME -->
<div class="form-row">
<div class="form-group col-md-12">
<label for="name"><b>Name :</b></label>
<select class="form-control" id="name" onChange = "showProfil();">
<option disabled selected>Choose ...</option>
<?!=getNames()?>
</select>
</div>
</div>
<!-- RESULT -->
<div><label> Result : </label><p id = "result"></p></div>
<!-- BUTTON -->
<input type="button" class="btn btn-primary btn-block" value="SHOW DIV ?" id = "btnAccesQuestions" onclick = "showDivResultNo();">
<!-- DIV DISPLAY WHEN RESULT IS NO -->
<div id = "divResultNo">
<h2> Result is "NO"</h2>
</div>
</form>
</body>
</html>
This is my server side code :
function doGet() {
return HtmlService.createTemplateFromFile('Index').evaluate().setTitle('Formulaire de demande de formation');
}
function include(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function getNames(){
const classeur = SpreadsheetApp.getActiveSpreadsheet();
const feuille = classeur.getSheetByName("Sheet1");
var tNames = feuille.getRange("A2:A").getValues().filter(d =>d[0] !== "").flat();
var names = deleteDuplicateValues(tNames);
return names.map(d => "<option>" + d + "</option>").join("");
}
function deleteDuplicateValues(array) {
var outArray = [];
array.sort(lowerCase);
function lowerCase(a,b){
return a.toLowerCase()>b.toLowerCase() ? 1 : -1;
}
outArray.push(array[0]);
for(var n in array){
if(outArray[outArray.length-1].toLowerCase()!=array[n].toLowerCase()){
outArray.push(array[n]);
}
}
return outArray;
}
function getProfil(name){
const classeur = SpreadsheetApp.getActiveSpreadsheet();
const feuille = classeur.getSheetByName("Sheet1");
var tProfils = feuille.getRange("A2:B").getValues().filter(d =>d[0] !== "");
for (let i = 0; i < tProfils.length; i ++){
if(tProfils[i][0] == name){
if(tProfils[i][1] == ""){
var resultat = "no";
}
else {
var resultat = "yes";
}
}
}
return resultat;
}
function testProfil(){
Logger.log(getProfil("Sir A"));
}
This is my js code :
<script>
function showProfil(){
var name = document.getElementById("name").value;
google.script.run.withSuccessHandler(profil => {
document.getElementById("result").innerHTML = profil;
}).getProfil(name);
}
function showDivResultNo(){
var name = document.getElementById("name").value;
var result = document.getElementById("result").value;
console.log(result)
if (name != "Choose ..." && name != "" && result == "no"){
console.log("show div after that");
}
else {
console.log("div always hidden");
}
}
</script>
And this is a screenshot of my web app after selected Sir A and press button :
If anyone can help me, it would be appreciated. You can acces to my Sheet in this link. Thank you for advance.
In your script, how about the following modification?
From:
var result = document.getElementById("result").value;
To:
var result = document.getElementById("result").innerHTML;
I thought that from your HTML, I thought that the reason of your issue of I have undefined each time and i don't know why. might be due to .value.
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.
I'm a beginner and I'm trying to help some special education students with a very basic budget calculator. I've seen similar questions to mine posted, but when I try those methods something always breaks and I'm having some trouble figuring it out.
Basically I need the onclick portion of the button that calls the function into action to actually respond to the enter key and not a click :-( Thank you very much in advance for any help that might be provided!!
<script>
function addTwoNumbers () {
var number1 = document.getElementById('box1').value;
var number2 = Number(document.getElementById('box2').value);
var sum = Number(number1) + number2;
document.getElementById('resultBox').value = sum;
if(sum<0) {
document.getElementById('resultBox').style.color = "red";
}
else{
document.getElementById('resultBox').style.color = "green";
}
document.getElementById('resultBox').style.visibility = 'visible';
document.getElementById('resultBox').value = sum
}
</script>
<script>
function subtractTwoNumbers () {
var number1 = document.getElementById('box1').value;
var number2 = Number(document.getElementById('box2').value);
var difference = Number(number1) - number2;
document.getElementById('resultBox').value = difference;
if(difference<0) {
document.getElementById('resultBox').style.color = "red";
}
else{
document.getElementById('resultBox').style.color = "green";
}
document.getElementById('resultBox').style.visibility = 'visible';
document.getElementById('resultBox').value = sum
}
</script>
<script>
function clearall() {
document.getElementById('box1').value = "";
document.getElementById('box2').value = "";
document.getElementById('resultBox').value = "";
}
</script>
<div id='calc' align="center"></div>
<h1>Calculator</h1>
<p>Enter budget <input type="text" id="box1"></p>
<p>Enter price <input type="text" id="box2"></p>
<p>Press the equation key to see your results</p>
<div class="btn-group" style="width:100%">
<button style="width:33.3%" onclick="addTwoNumbers()">+</button>
<button style="width:33.3%" onclick="subtractTwoNumbers()">-</button>
<p>
<button style="width:67.5%" onclick="clearall()">clear</button>
</div>
<h3>Do you have enough?</h3>
<input type="text" id="resultBox"> <br/>
Instead of using the onclick attribute in the HTML, a more modern approach would be to create an event listener in your javascript.
I would give the buttons an ID. Then do something like this:
document.getElementById("clearBtn").addEventListener("click", clearAll);
There are all kinds of events you can listen for and I would guess you could find one that provides the behavior you are after.
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;
}
i have "<HR>*10/100" value, how to split this value as three parts
like "HR", "*" and "10/100"
html
<input type='text' ng-model='value' ng-change="GetAngValue(value)">
{{Result}}
angular
$scope.GetAngValue = function (value) {
var Matches = value.match(/\<(.*?)\>/);
if (Matches) {
$scope.Result = Matches[1];
}
}
am getting angular brackets values by using this code but how to get remaining
It's long way but it'll do the trick
value.replace("<","").replace(">",",").replace("*","*,").split(",");
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<div ng-app="app" ng-controller="appCtrl">
<input type='text' ng-model='value' ng-change="GetAngValue(value)">
{{Result}}
</div>
<script>
angular.module('app',[]).controller('appCtrl',function($scope){
$scope.GetAngValue = function (value) {
var Matches = value.replace("<","").replace(">",",").replace("*","*,").split(",");
if (Matches) {
$scope.Result = Matches;
}
console.log(Matches);
}
})
</script>