i'm new in javascript and i've a problem with my script. i'm trying to display a variable named ideal to id called weight after retrieved data from URL, but it didn't work.
can anyone help me with this problem, i'm really appreciate it...
here is the javascript code
<script>
function formSubmit()
{
document.getElementById("frm1").submit();
var x = document.getElementById("frm1");
}
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
var first = getUrlVars()["height"];
if(first<100){
alert("Sorry, your height is not available");
}else{
var ideal = ((first-100)-(0.1*(first-100)));
//alert(ideal);
}
function update(){
document.getElementById("weight").innerHTML=ideal;
}
</script>
</head>
and here is the HTML
<!-- <div id="pg1" data-role="page">
<div data-role="content" style="background-color: whitesmoke; height: 480px;">
<div class="ui-grid-b">
<div class="ui-block-a"></div>
<div class="ui-block-b" style="padding-top: 100px;">
<center> <h1></h1></center>
<center><h4></h4></center>
<form id="frm1">
<label for="txt_val"></label>
<input type="text" name="height" id="txt_val" value="" placeholder="160.5" required/>
<center></center>
<p id="weight" onclick="update()"></p>
</form>
</div>
<div class="ui-block-c"></div>
</div>
</div> -->
Well, where you are defining your variable ideal is in a local scope that can not be adapted to your function update.
You can define it just after the global variable first and give it value at your current place.
Related
I'm busy with an Apps Script Web App and would like to populate input boxes within the web app with data from a google sheet.
I'm trying to retrieve data when a button is clicked and populate fields within the webapp with the data that is retrieved from the sheet. I just can't seem to get the text box fields to be updated after retrieving the data from google sheets.
Any help would be greatly appreciated.
The code I have so far is:
Code.gs file
function doGet() {
var htmlOutput = HtmlService.createTemplateFromFile("page");
return htmlOutput.evaluate();
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
var idx;
var nextLead;
var totalLeads;
var remainingLeads;
function assignLead() {
var ss = SpreadsheetApp.openById("sheetId");
var ws = ss.getSheetByName("leads");
var range = ws.getRange(1, 1, ws.getLastRow(), ws.getLastColumn())
var data = range.getValues();
//console.log(data);
var status = data.map(function (row) {
return row[11];
});
//console.log(status);
idx = status.indexOf("unassigned");
//console.log(idx)
for (var i = 0; i < data.length; i++) {
nextLead = data[idx];
updateStatusAssigned(idx)
}
// console.log(nextLead);
// console.log(data);
}
function updateStatusAssigned(row) {
var ss = SpreadsheetApp.openById("SheetId");
var ws = ss.getSheetByName("leads");
var range = ws.getRange(1, 1, ws.getLastRow(), ws.getLastColumn())
ws.getRange(idx + 1, 12).setValue("assigned")
}
page html file
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<?!= include("page-css") ?>
</head>
<body>
<div>
<!-- Header -->
<div class="header">
<h1>Header</h1>
</div>
<!-- Agent Info -->
<div class="row">
<div>
<p><label for="agnet">Agent Name:</label><input id="agent" type="text" ></input>
<label for="loginTime">Login Time:</label><input id="loginTime" type="text"></input></p>
<p><label for="campaign">Current Campaign:</label><input type="text" id="campaign"></input></p>
<button id="btn-getLead" style= float: right>Get Lead</button>
</div>
<!-- <div>
<button id="btn" style=”float: right”>Get Lead</button>
</div> -->
</div>
<!-- Lead Details Banner -->
<div class="row">
<div class="container">
<h3>Lead Details</h3>
</div>
<!-- Customer Information -->
<div class="flex-container">
<div>
<p>
<h5>Customer Information</h5>
</P>
<label>Name:</label><input type="text" id="name"></input>
<label>Surname:</label><input type="text" id="surname"></input>
<label>ID Number:</label><input type="text" id="id"></input>
<p><label>Address:</label><input type="text" id="add"></input><label>Postal Code:</label><input type="text" id="code"></input></p>
<p><label>Suburb:</label><input type="text" id="sub"></input></P>
<p><label>Postal Address:</label><input type="text" id="p-add"></input></p>
<p><label>Tel Number:</label><input type="tel" id="tel"></input>
<label>Mobile Number:</label><input type="tel" id="cell"></input>
<label>Alternate Number:</label><input type="tel" id="alt"></input></p>
<p>
<label>Disposition</label>
<select id="dispo">
<option> </option>
<option>Wrong Number</option>
<option>No Answer</option>
<option>Win</option>
</select>
</p>
<p>
<button id="submit">Submit</button>
</p>
</div>
<!-- Call Notes -->
<div>
<p>
<h5>Call Notes</h5>
</p>
<textarea rows="15" cols="50" id="notes"></textarea>
</div>
</div>
<?!= include("page-js") ?>
</body>
</html>
page-js file
<script>
document.getElementById("btn-getLead").addEventListener("click",getLeadData);
function getLeadData(){
google.script.run.assignLead()
document.getElementById("name") = nextLead[0];
}
</script>
Modification points:
Unfortunately, the variables declared as the global at Google Apps Script side cannot be used for Javascript side. So nextLead of document.getElementById("name") = nextLead[0]; cannot be used.
I thought that this is due to the reason of your issue.
In this case, withSuccessHandler can be used.
And, I think that document.getElementById("name") = nextLead[0]; occurs an error. In this case, please modify to document.getElementById("name").value = nextLead[0];.
When above points are reflected to your script, it becomes as follows.
Modified script:
Google Apps Script side:
Please modify assignLead() as follows.
From:
for (var i = 0; i < data.length; i++) {
nextLead = data[idx];
updateStatusAssigned(idx)
}
// console.log(nextLead);
// console.log(data);
}
To:
for (var i = 0; i < data.length; i++) {
nextLead = data[idx];
updateStatusAssigned(idx)
}
// console.log(nextLead);
// console.log(data);
return nextLead; // Added
}
Javascript side:
From:
function getLeadData(){
google.script.run.assignLead()
document.getElementById("name") = nextLead[0];
}
To:
function getLeadData(){
google.script.run.withSuccessHandler(nextLead => {
document.getElementById("name").value = nextLead[0];
}).assignLead();
}
Note:
In this modified script, it supposes that your function of assignLead() works fine and nextLead is the correct value you want. Please be careful this.
Reference:
withSuccessHandler(function)
I am trying to access JavaScript variable in the href attribute of anchor tag.
Javascript:
<script language="javascript">
$(document).ready(function(){
$(":input[name= 'purpose']").on('change', function(){
var TravelSelection = $(this).val();
/*alert(TravelSelection);*/
var pageName
if (TravelSelection == '1') {
pageName = '#page1';
} else {
pageName = '#page2';
}
document.getElementById('<%=purposeHidden.ClientID%>').value = pageName;
});
});
</script>
HTML/ASPX Code:
<form id="survey" action="#" runat="server">
<section id="purpose" data-role="page">
<div data-role="content" class="content">
<p>
<legend class="title">Visitation Purpose & Entrance:</legend>
<div class="ui-corner-all ui-shadow" style="padding-left:10px; padding-right:10px; padding-top:5px; padding-bottom:5px;">
<legend style="font-weight:700;">Visitation Purpose:</legend>
<fieldset data-role="controlgroup" data-mini="true">
<input type="radio" id="meeting" value="1" name="purpose" />
<label for="meeting">Meeting</label>
<input type="radio" id="event" value="2" name="purpose" />
<label for="event">Event</label>
</fieldset>
<asp:HiddenField ID="purposeHidden" runat="server"/>
</div>
</p>
<p>Next</p>
</div>
</section>
<section id="page1" data-role="page">
..display this page
</section>
</form>
I want to pass the value of hidden field call purposeHidden into href value but it seen notthing happen once I click the next button.
I see you are accessing the Value of the HiddenField directly which might not work. I would suggest to get the element reference first then call for its value. See:
Instead of:
Next
Try:
Next
<script>
$(document).ready(function(){
$('#anchorElement').on('click', function(){
var whereTo = $('#<%= purposeHidden.ClientID %>').val();
window.location.href = whereTo;
return false;
});
});
</script>
Or you can bind the change event and set the href value using jquery.
$(document).ready(function(){
$('#<%= purposeHidden.ClientID %>').on('change', function(){
var whereTo = $(this).val();
$('#anchorElement').attr('href', whereTo);
return false;
});
});
Or simply you should set its value where you are setting the value of your hidden field.
<script language="javascript">
$(document).ready(function(){
$(":input[name= 'purpose']").on('change', function(){
var TravelSelection = $(this).val();
/*alert(TravelSelection);*/
var pageName
if (TravelSelection == '1') {
pageName = '#page1';
} else {
pageName = '#page2';
}
document.getElementById('<%=purposeHidden.ClientID%>').value = pageName;
$('#anchorElement').val(pageName); // This line...
});
});
</script>
I keep getting an error message that:
check is not a function at area question 1
and
check is not a function at HTMLInputElement.onclick
and I think this is the reason that the check() function is not running. I've looked at so many other solutions to this problem but none of them are really helpful for my issue. Any help would be greatly appreciated!
var number1;
var number2;
var response;
var calcanswer;
var score = 0;
window.onload = areaquestion1;
score.innerHTML = "SCORE: " + score;
function areaquestion1() {
var imageBlock = document.createElement("img");
imageBlock.setAttribute("id", "img");
imageBlock.setAttribute("src", "Images/2_1.png");
imageBlock.setAttribute("width", "700");
imageBlock.setAttribute("height", "400");
imageBlock.setAttribute("alt", "2_1");
document.getElementById('img').appendChild(imageBlock); // this appends it to the bottom of the page
number1 = 2
number2 = 1
calcanswer = (number1*number2);
var question = document.getElementById("question");
question.innerHTML = "What is the area of this lego brick?";
document.getElementById("check").check();
}
function areaquestion2() {
var imageBlock = document.createElement("img");
imageBlock.setAttribute("id", "img");
imageBlock.setAttribute("src", "Images/4_2.png");
imageBlock.setAttribute("alt", "4_2");
document.body.appendChild(imageBlock); // this appends it to the bottom of the page
number1 = 4
number2 = 2
calcanswer = (number1*number2);
var question = document.getElementById("question");
question.innerHTML = "What is the area of this lego brick?";
document.getElementById("solve").check();
}
function check() {
var statusDiv = document.getElementById("status");
response=document.getElementById("answer").value;
if(response != calcanswer)
statusDiv.innerHTML="Incorrect";
else
if (response==calcanswer)
{
statusDiv.innerHTML="Very good!";
score ++;
document.getElementById("score").textContent = score
document.getElementById("answer").value = "";
}
}
<!DOCTYPE html>
<html>
<title>Lego Area Play</title>
<head>
<link rel="stylesheet" href="CSS/gridtest.css">
<script src="JavaScript/Play.js"></script>
</head>
<body onload="areaquestion1();">
<div class="header">
<h1>LEGO AREA</h1>
<p>Calculating <b>area</b> with Emmet.</p>
<div id="scorelabel"><label>SCORE:</label></div>
<div id="score" class="score"></div>
</div>
<form>
<div class="row">
<div class="column" style="background-color:#aaa;">
<div id="question"></div>
<div id="img"></div>
<div id="status"></div>
</div>
<div class="column" style="background-color:#bbb;">
<div id ="prompt"></div>
<label>Area = </label>
<input type="text" id="answer" placeholder="Answer"/>
<label>Units<sup>2</sup></label>
</div>
<div class="column" style="background-color:#ccc;">
<input id="check" type="button" value="CHECK!" onclick="check()" />
<div class="practice"> <img src="Images/legoBlue2.png" id="practicebtn" alt="lego button for practice page" width=350px height=140px></div>
<div class="menu"> <img src="Images/menured.png" id="menubtn" alt = "lego button for menu page" width=350px height=140px></div>
</div>
</div>
</form>
</body>
</html>
As Cannicide pointed out, your second error occurs when the arequestion1() is called on load, on the line document.getElementById("check").check();
You added the check method to onclick, but that did not add a new property to the button.
Your first error is a little more complicated. This is the simplest recreation of your error I tried creating.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function f(){
console.log("f run")
}
</script>
<!-- id same as function name -->
<input id="f" type="button" value = "B1" onclick="f()" />
<!-- button inside a form -->
<form>
<input type="button" value = "B2" onclick="f()" />
</form>
<!-- button inside a form with random id -->
<form>
<input id="somethingelse" type="button" value = "B3" onclick="f()" />
</form>
<!-- button inside a form, equal id and method name -->
<form>
<input id="f" type="button" value = "B4" onclick="f()" />
</form>
</body>
</html>
There are 4 buttons, each with small difference in its environment. Notice how only the button that is inside a form and has the same id name and the onclick method name throws you an error.
To this error I unfortunately have no clue to why and how does this happen.
If someone here knows what is going on here, please explain!
cheers :)
I have two textboxes and one button,
I want to add one new textfield, that should show card name from textbox1 and Link URL append from textbox2 when I click on button
//AddnNewCardNavigator
var counter=2;
var nmecardtxt= document.getElementById("textbox1").value;
var linkurltxt= document.getElementById("textbox2").value;
$("#addbutton").click(function(){
if(nmecardtxt ==""||nmecardtxt ==0||nmecardtxt ==null
&& linkurltxt ==""||linkurltxt ==""|| linkurltxt ==0||linkurltxt ==null){
alert("Please insert value in Card name and Link Url textboxes and must be correct");
return false;
}
var NewCarddiv = $(document.createElement('div')).attr("id",'cardlink'+counter);
NewCarddiv.after().html()
})
</script>
<!-- text boxes-->
<div class="row">
<div class="col-md-12">
<div id="textboxesgroup">
<div id="textboxdiv1">
<label style="color:blanchedalmond">Card Name: </label><input type="textbox" id="textbox1">
</div>
<div id="textboxdiv2">
<label style="color:blanchedalmond">Link Url: </label><input type="textbox" id="textbox2">
</div>
</div>
</div>
</div>
Your variables nmecardtxt and linkurltxt must be created inside the click function,
because it's empty at the loading of the page.
I also took the liberty to use jQuery for that variables, as you're already using it, and tried to enhance some other things:
(See comments in my code for details)
//AddnNewCardNavigator
var counter = 2;
// On click function
$("#addbutton").click(function() {
// Here it's better
var nmecardtxt = $("#textbox1").val();
var linkurltxt = $("#textbox2").val();
// Modified you test here
if (!nmecardtxt || !linkurltxt) {
alert("Please insert value in Card name and Link Url textboxes and must be correct");
return false;
}
// Modified creation of the card
var link = $(document.createElement('a')).attr("href", linkurltxt).html(linkurltxt);
var NewCarddiv = $(document.createElement('div')).attr("id", 'cardlink' + counter).html(nmecardtxt + ": ").append(link);
$('#cards').append(NewCarddiv);
//NewCarddiv.after().html(); // Was that line an attempt of the above ?
});
body {
background: #888;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- text boxes-->
<div class="row">
<div class="col-md-12">
<div id="textboxesgroup">
<div id="textboxdiv1">
<label style="color:blanchedalmond">Card Name: </label><input type="textbox" id="textbox1">
</div>
<div id="textboxdiv2">
<label style="color:blanchedalmond">Link Url: </label><input type="textbox" id="textbox2">
</div>
</div>
</div>
</div>
<!-- Added the below -->
<div id="cards">
</div>
<button id="addbutton">Add…</button>
Hope it helps.
Here's a simplified version of what you're trying to accomplish:
function addNewCard() {
var name = $('#name').val();
var url = $('#url').val();
var count = $('#cards > .card').length;
if (!name || !url) {
alert('Missing name and/or URL.');
}
var card = $('<div class="card"></div>').html("Name: " + name + "<br>URL: " + url);
$("#cards").append(card);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="url">URL:</label>
<input type="text" id="url" name="url">
<input type="submit" value="Add Card" onclick="addNewCard();">
<div id="cards">
</div>
I want to output a manipulated input value of a text type input tag, but it seems to be harder than I thought it will be. I don't want to use alert or console.log kind of outputting, but appending to the page as new content. Here I didn't manipulate the input, since I'm not even able to output it, which is my first goal then.
my html code for the corresponding part is:
<div class="middle topic">
<div id="inputnav">
<button id="sendd">SEND</button>
</div>
<input type="text" value="" id="iPf">
<div id="oPf">
output
</div>
</div>
and here is the full javascript. I linked it at the end of the html before the closing body tag, after a jquery-1.12.2.min.js linking.
/*global $, jQuery, alert*/
$(document).ready(function () {
"use strict";
var inPuttext = document.getElementById("iPf").innerHTML;
var outPutfield = document.getElementById("oPf");
function appendOutput(where, what) {
where.innerHTML = what;
};
$('#sendd').click(function () {
appendOutput(outPutfield, inPuttext);
});
});
I can't figure out why it doesn't work. When I click the send button the only thing happens is that the "output" disappears from the #oPf div.
Use value property not innerHTML to get value from input element.
Get the value in click handler to get updated value.
$(document).ready(function() {
"use strict";
var outPutfield = document.getElementById("oPf");
function appendOutput(where, what) {
where.innerHTML = what;
};
$('#sendd').click(function() {
var inPuttext = document.getElementById("iPf").value;
appendOutput(outPutfield, inPuttext);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="middle topic">
<div id="inputnav">
<button id="sendd">SEND</button>
</div>
<input type="text" value="" id="iPf">
<div id="oPf">
output
</div>
</div>
But, If you are using jQuery:
$(document).ready(function() {
"use strict";
$('#sendd').click(function() {
$('#oPf').html($("#iPf").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="middle topic">
<div id="inputnav">
<button id="sendd">SEND</button>
</div>
<input type="text" value="" id="iPf">
<div id="oPf">
output
</div>
</div>
Try this:
use .value to get entered value of input box.
get value inside calling function so that you can get entered value in inputbox
$(document).ready(function () {
"use strict";
function appendOutput(where, what) {
where.innerHTML = what;
};
$('#sendd').click(function () {
var inPuttext = document.getElementById("iPf").value; // use .value to get entered value of input box , get value inside calling function so that you can get entered value in inputbox
var outPutfield = document.getElementById("oPf");
appendOutput(outPutfield, inPuttext);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="middle topic">
<div id="inputnav">
<button id="sendd">SEND</button>
</div>
<input type="text" value="" id="iPf">
<div id="oPf">
output
</div>
</div>
Try $("#oPf").html($("#iPf").val());
$('#sendd').click(function() {
$("#oPf").html($("#iPf").val());
});
Refer : Js Fiddle
$('#sendd').click(function() {
$("#oPf").html($("#iPf").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle topic">
<div id="inputnav">
<button id="sendd">SEND</button>
</div>
<input type="text" value="" id="iPf">
<div id="oPf">
output
</div>
</div>
Just add this, you will get output in output div.
HTML UPDATE
<div id="inputnav">
<button id="sendd" onClick="fn()">SEND</button>
</div>
JAVASCRIPT UPDATE
function fn(){
var inPuttext = document.getElementById("iPf").value;
document.getElementById("oPf").innerHTML = inPuttext;
}
inPuttext should be
var inPuttext =document.getElementById("iPf").value
above code should come inside the click event.because we need to get the input value after it entered.My answer as follows
$(document).ready(function () {
"use strict";
var outPutfield = document.getElementById("oPf");
function appendOutput(where, what) {
console.log(what);
where.innerHTML = what;
}
;
$('#sendd').click(function () {
var inPuttext = document.getElementById("iPf").value;
appendOutput(outPutfield, inPuttext);
console.log('asd');
});
});