The "if (numero.value.length == 0)" works, but when I add a number the program doesn't work, the "Inspect" function (Ctrl + Shift + I) doesn't work and the page does not refresh.
function tabuada() {
var numero = document.getElementById('txtnum')
var tabuada = document.getElementById("selectTab")
if (numero.value.length == 0) {
window.alert("Você precisa digitar um número para que a tabuada seja gerada.")
} else {
var num = Number(numero.value)
tabuada.innerHTML = ""
for (c = 0; c = 10; c++) {
var item = document.createElement('option')
item.text = `${num} * ${c} = ${c * num}`
tabuada.appendChild(item)
}
}
}
<section>
<div>
<p>
Escolha um número: <input type="number" name="num" id="txtnum">
<input type="button" value="Gerar Tabuada" onclick="tabuada()">
</p>
</div>
<div>
<select name="tabuada" id="selectTab" size="10"></select>
</div>
</section>
You had to look more on your code:
Every opnening tag needs a closing one. /BODY and /HTML was missing.
Every line in Javascript needs a ; at the end.
The condition of your for-loop was wrong. You made an allocation c = 10 (which is allways true, so you have an infinite loop). If you want to compare something on equal use === or ==. But you had to compare for c < 10. The loop will as long iterate as your condition is true so smaller than is the choice.
Your function needs a closing }.
function tabuada() {
var numero = document.getElementById('txtnum');
var tabuada = document.getElementById("selectTab");
if (numero.value.length == 0) {
window.alert("Você precisa digitar um número para que a tabuada seja gerada.");
} else {
var num = Number(numero.value);
tabuada.innerHTML = "";
for (c = 0; c < 10; c++) {
var item = document.createElement('option');
item.text = `${num} * ${c} = ${c * num}`;
tabuada.appendChild(item);
}
}
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabuada</title>
<link rel="stylesheet" href="_estiloEx16.css">
</head>
<body>
<header>
<h1>Tabuada</h1>
</header>
<section>
<div>
<p>
Escolha um número: <input type="number" name="num" id="txtnum">
<input type="button" value="Gerar Tabuada" onclick="tabuada()">
</p>
</div>
<div>
<select name="tabuada" id="selectTab" size="10"></select>
</div>
</section>
<footer>
<p>© Curso em vídeo</p>
</footer>
</body>
</html>
Related
I’m studying how to work with HTML forms and JavaScript (JS) and I faced a problem:
I wrote the Meta tags (HTML) and used JS elements, events and functions to treat possible user mistakes. The page shows when user follow in mistake and don’t insert the correct information. But, even with these mistakes, when the “submit button” is used, the alert message is not showing. I tried to inspect what’s happening and browser give a message like:
“DevTools failed to load source map: Could not load content for chrome-extension://nllcnknpjnininklegdoijpljgdjkijc/bundles/content.js.map: System error: net::ERR_BLOCKED_BY_CLIENT”.
Here is my code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>HTML Forms</h2>
<form id="formulario" action="">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="">
<span id="msg-vld-fname" style="color: red; display:none;"></span>
<br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="">
<span id="msg-vld-lname" style="color: red; display:none;"></span>
<br><br>
<label for="lgenre">Genre:</label><br>
<select name="lgenre" id="lgenre">
<option value="select">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<span id="msg-vld-lgenre" style="color: red; display:none;"></span>
<br><br>
<input type="submit" value="Submit">
</form>
<script src="./index.js"></script>
</body>
</html>
JavaScript
`
//selecionar elementos - aqui entra tudo o que vai ser "mexido", "manipulável"
let form = document.getElementById("formulario");
let fname = document.getElementById("fname");
let lname = document.getElementById("lname");
let lgenre = document.getElementById("lgenre");
let fname_msg = document.getElementById("msg-vld-fname");
let lname_msg = document.getElementById("msg-vld-lname");
let lgenre_msg = document.getElementById("msg-vld-lgenre");
//validar quando usuário sai do campo
fname.onblur = function (event) {
if (event.target.value.length < 3) {
fname_msg.textContent = "Insert at least 3 carachters"; //exibe a mensagem
fname_msg.style.display = 'block'; //exibe um valor na tela
} else {
fname_msg.style.display = 'none'; //faz o valor da tela "sumir".
}
}
//validar quando usuário muda um campo
lgenre.onchange = function (event) {
if (event.target.value == "select") {
lgenre_msg.textContent = "Select a valida atribute."; //exibe a mensagem
lgenre_msg.style.display = 'block'; //exibe um valor na tela
} else {
lgenre_msg.style.display = 'none'; //faz o valor da tela "sumir".
}
}
//validar quando usuário entra em um campo
fname.onfocus = function () {
fname_msg.style.display = 'none';
}
//validar quando usuário envia o formulário
form.onsubimit = function (event){
if (fname.value.length < 3
|| lgenre.value == "selecione") {
alert("please, complete this form correctly after submition");
event.preventDefault();
}
}
`
My expactation is: when the form has mistakes, according to the rules, shows the alert and forbiden the submitoin.
First, you wrote your event property incorrectly as: **onsubimit** instead of **onsubmit**.
But, you are using a submit button, which attempts to send the form data to whatever resource the form element's action attribute is set to and it will attempt to redirect the browser to that location. In your case, you're not submitting data anywhere, so you should be using a regular button with a click event handler.
Also, you really should be using the modern standard for setting up event handlers, which is .addEventListener() instead of event properties like onXyz. See the updated code for the button's click event below.
And the 6 heading elements in HTML (h1...h6) should not be used because of the way they style their text. They are for setting up the structure of the document. As such, you should always start with h1 and then only use h2 if you want to create a sub-section of the h1. If you then don't like the style of the text that the heading element produces, use CSS to modify that instead of changing to a heading style that you like to the look of.
//selecionar elementos - aqui entra tudo o que vai ser "mexido", "manipulável"
// You don't need a reference to the form, you need a reference to the button
let button = document.querySelector("input[type='button']");
let fname = document.getElementById("fname");
let lname = document.getElementById("lname");
let lgenre = document.getElementById("lgenre");
let fname_msg = document.getElementById("msg-vld-fname");
let lname_msg = document.getElementById("msg-vld-lname");
let lgenre_msg = document.getElementById("msg-vld-lgenre");
//validar quando usuário envia o formulário
// You should just use a regular button and set up a click event handler for it
// using the modern, standards-based approach of .addEventListener()
button.addEventListener("click", function (event){
if (fname.value.length < 3
|| lgenre.value == "selecione") {
alert("please, complete this form correctly after submition");
event.preventDefault();
}
});
//validar quando usuário sai do campo
fname.onblur = function (event) {
if (event.target.value.length < 3) {
fname_msg.textContent = "Insert at least 3 carachters"; //exibe a mensagem
fname_msg.style.display = 'block'; //exibe um valor na tela
} else {
fname_msg.style.display = 'none'; //faz o valor da tela "sumir".
}
}
//validar quando usuário muda um campo
lgenre.onchange = function (event) {
if (event.target.value == "select") {
lgenre_msg.textContent = "Select a valida atribute."; //exibe a mensagem
lgenre_msg.style.display = 'block'; //exibe um valor na tela
} else {
lgenre_msg.style.display = 'none'; //faz o valor da tela "sumir".
}
}
//validar quando usuário entra em um campo
fname.onfocus = function () {
fname_msg.style.display = 'none';
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>HTML Forms</h1>
<form id="formulario" action="">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="">
<span id="msg-vld-fname" style="color: red; display:none;"></span>
<br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="">
<span id="msg-vld-lname" style="color: red; display:none;"></span>
<br><br>
<label for="lgenre">Genre:</label><br>
<select name="lgenre" id="lgenre">
<option value="select">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<span id="msg-vld-lgenre" style="color: red; display:none;"></span>
<br><br>
<input type="button" value="Submit">
</form>
<script src="./index.js"></script>
</body>
</html>
Why this code won't run, what is wrong with it? When I try to run it, it just gives me a black page, I've ran it through a HTML validator and it says it's all good. If someone can help me I'd be very grateful.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Area of circle </title>
</head>
<body>
<script type="text/javascript">
function CalculateArea(){
var r = document.getElementById('form1').value;
let p = document.getElementById('area')
var area = (r * r * Math.PI);
if (r%1 !=0 || r < 1) p.innerHTML = 'Please enter a whole number greater than 0';
else p.innerHTML = area;
}
<form id='form1'>
Type radient of circle:
<input type="text" name="txtr" size=10>
<br>
<input type="button" value="Calculate" onClick='CalculateArea()'>
<p id='area'></p>
</form>
</script>
</body>
</html>
new answer
so in the r variables is not more selecting the whole form
but the only input you need (in the html I assigned a new id for the input)
infact in js now is selecting the input, and getting the .value directly from there :)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Area of circle </title>
</head>
<body>
<form id="form1">
Type radient of circle:
<input type="text" name="txtr" id="r-input" value="10">
<br>
<input type="button" value="Calculate" onclick="CalculateArea()">
<p id="area">
</p>
</form>
<script type="text/javascript ">
function CalculateArea() {
var r = document.getElementById('r-input').value;
let p = document.getElementById('area');
var area = (r * r * Math.PI);
if (r % 1 != 0 || r < 1) {
p.innerHTML = 'Please enter a whole number greater than 0';
console.log("r " + r);
console.log("area " + area);
} else {
p.innerHTML = area;
}
}
</script>
</body>
</html>
previous answer
sometimes the ide beautify the code wrong,
not because you write wrong,
but because you insert html code in javascript... so technically the ide think that you writing js... (that the result)
no problem, here the solution
copy the <form> code
<form>
...
</form>
CRTL X for copy it
put in the start with CTRL C ( outside of <script> tag)
try to delete the spaces between the name of the tag and the < or >
here the code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Area of circle </title>
</head>
<body>
<form id='form1'>
Type radient of circle:
<input type="text" name="txtr" size=1 0>
<br>
<input type="button" value="Calculate" onClick='CalculateArea()'>
<p id='area'>
</p>
</form>
<script type="text/javascript">
function CalculateArea() {
var r = document.getElementById('form1').value;
let p = document.getElementById('area')
var area = (r * r * Math.PI);
if (r % 1 != 0 || r < 1) {
p.innerHTML = 'Please enter a whole number greater than 0';
} else {
p.innerHTML = area;
}
}
</script>
</body>
</html>
The element belongs outside the script element, in the document .
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Area of circle </title>
</head>
<body>
<form id='form1'>
Type radient of circle:
<input type="text" name="txtr" size=10>
<br>
<input type="button" value="Calculate" onClick='CalculateArea()'>
<p id='area'></p>
</form>
</body>
<script type="text/javascript">
function CalculateArea() {
var r = document.getElementById('form1').value;
let p = document.getElementById('area')
var area = (r * r * Math.PI);
if (r%1 !=0 || r < 1) p.innerHTML = 'Please enter a whole number greater than 0';
else p.innerHTML = area;
}
</script>
</html>
"use strict";
let btn = document.getElementById("buttonCarrito");
btn.addEventListener("click",agregar);
//this function is agregar (add in English), the idea is that this function put the elements Manzana (Apple) in the shop cart but when i try do this i get [object HTMLSpanElement]50 (50 is the Apple value, but i don't can show only the number 50)
function agregar(){
let Productos= {
"Manzana": "50",
"Banana": "40",
"Naranja": "30",
"Mandarina": "20"
}
console.table(Productos)
let frutaComprada= document.getElementById("inputProducto").value;
let costoTotal= document.getElementById("valor");
let productoSeleccionado=Productos[frutaComprada];
costoTotal=costoTotal+productoSeleccionado;
valor.innerHTML=costoTotal;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<h1>Bienvenido a la tienda</h1>
<input id="inputProducto" type="text" placeholder="Ingrese su producto">
<br>
<br>
<input id="inputCompra" type="text" placeholder="Ingrese el valor de su compra">
<br>
<br>
<button id="buttonCarrito">Agregar al carrito</button>
<p>El valor total de su compra es: <span id="valor"> 0 </span></p>
</div>
</body>
<script src="js.js"></script>
</html>
Values from form inputs will always be strings, so to add numbers together you need to coerce the string to a number. A couple of methods: 1) Number(str) or 2) +str.
Your object of products/prices: there's no need to have those prices as strings.
The main problem you were having is that let costoTotal= document.getElementById("valor"); is only picking up the element and not the text content. We can use let costoTotal= document.getElementById("valor").textContent; for that, but then we need to coerce that to a number similarly to input values.
(Sidenote: at the moment your code doesn't use the value from inputCompra which is why I asked about it in the comments. So the total will increase by 40 for bananas, for example, regardless of what is entered in that input.)
let btn = document.getElementById("buttonCarrito");
btn.addEventListener("click", agregar);
function agregar() {
let Productos = {
Manzana: 50,
Banana: 40,
Naranja: 30,
Mandarina: 20
}
let frutaComprada = document.getElementById("inputProducto").value;
let costoTotal = Number(document.getElementById("valor").textContent);
let productoSeleccionado = Productos[frutaComprada];
costoTotal = costoTotal + productoSeleccionado;
valor.textContent = costoTotal;
}
<div class="container">
<h1>Bienvenido a la tienda</h1>
<input id="inputProducto" type="text" placeholder="Ingrese su producto">
<br>
<br>
<input id="inputCompra" type="text" placeholder="Ingrese el número de artículos">
<br>
<br>
<button id="buttonCarrito">Agregar al carrito</button>
<p>El valor total de su compra es: <span id="valor"> 0 </span></p>
</div>
Here's a version that uses quantity in case you were curious.
let Productos = {
Manzana: 50,
Banana: 40,
Naranja: 30,
Mandarina: 20
}
const product = document.getElementById('inputProducto');
const quantity = document.getElementById('inputCompra')
const valor = document.getElementById('valor');
const btn = document.getElementById('buttonCarrito');
btn.addEventListener('click', agregar);
function agregar() {
const frutaComprada = product.value;
const itemQuantity = Number(quantity.value);
const productoSeleccionado = Productos[frutaComprada];
const subTotal = productoSeleccionado * itemQuantity;
let costoTotal = Number(valor.textContent);
costoTotal = costoTotal + subTotal;
valor.textContent = costoTotal;
}
<div class="container">
<h1>Bienvenido a la tienda</h1>
<input id="inputProducto" type="text" placeholder="Ingrese su producto">
<br>
<br>
<input id="inputCompra" type="text" placeholder="Ingrese el valor de su compra">
<br>
<br>
<button id="buttonCarrito">Agregar al carrito</button>
<p>El valor total de su compra es: <span id="valor"> 0 </span></p>
</div>
I have a dynamic html form that is created with a javascript file where i ask the user to enter the number of fields and the input name of the fields. I want to know if is possible to the user download the form created dynamically as html page. The website doesn't have a database.
This snippet demonstrates how i create a form dynamically, all of this is being done on the client side.
var Nome; // Nome do esquema
var Desc; // descrição do esquema
var temas = []; // Nome dos temas do form
var fields = []; // nr de campos
var FL= []; // Nome do campo
var FLT =["date","time","number","text"];
var TF =[]; // tipo do campo
var Asset;
var a=0;
function Temas(){
"use strict";
Nome= prompt("Qual o Nome do Esquema de Metadados?");
Desc = prompt("Introduza a Descrição do Esquema.");
Asset = prompt("Introduza o valor da TAG AssetSubtype.");
var nT=prompt("Quantos temas tem o formulário?");
if(nT === null || nT === "") {
alert("User cancelled the prompt.");
} else {
for (var i=0; i<nT; i++){
temas.push(prompt("Introduzir Tema"));
if(temas[i] === null || temas[i] === "") {
alert("User cancelled the prompt.");
}
fields.push(prompt("Quantos campos terá o " + (i+1) + "º tema ?"));
if(fields[i] === null || fields[i] === "") {
alert("User cancelled the prompt.");
}
var f = fields[i];
for( var k=0; k<f; k++){
FL.push(prompt("Qual é o Nome do " + (k+1) + "º campo?"));
if(FL[k] === null || FL[k] === "") {
alert("User cancelled the prompt.");
}
TF.push(prompt("Qual o tipo do " + (k+1) + "º campo? "+
"(Text | Number | Time | Date)"));
if(FL[k] === null || FL[k] === "") {
alert("User cancelled the prompt.");
}
if(TF[k] === FLT[0]) {
TF.push(FLT[0]);
}
if(TF[k] === FLT[1]) {
TF.push(FLT[1]);
}
if(TF[k] === FLT[2]) {
TF.push(FLT[2]);
}
if(TF[k] === FLT[3]) {
TF.push(FLT[3]);
}
}
}
}
alert("Bem sucedido");
}
// Função guardar nome e desc de esquema txt
/*function save(){
var blob = new Blob([Desc], {type: "text/plain;charset=utf-8"});
saveAs(blob, Nome+".txt");
} */
function gerar(){
"use strict";
var f = document.createElement("form");
f.setAttribute('method',"post");
f.setAttribute('action',"");
f.setAttribute("class", "FormClass");
for(var l=0;l<temas.length; l++){
var div = document.createElement("div");
div.setAttribute('class', 'form');
div.setAttribute('id', "form"+(l+1));
var P = document.createElement('p'); // Heading of Form
P.innerHTML = temas[l];
div.appendChild(P);
for(var j=0;j<fields[l];j++){
var i = document.createElement("input");
i.setAttribute('name', FL[a+j]);
i.setAttribute('type', TF[a+j]);
i.setAttribute('placeholder', FL[a+j]);
div.appendChild(i);
}
a=a+parseInt(fields[l]);
if(l%2===0){
div.style.width='50%';
div.style.float='left';
} else{
div.style.width='48%';
div.style.float='right';
}
f.appendChild(div);
}
document.getElementById('form').appendChild(f);
}
<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../CSS/form.css" >
</head>
<script src="../JS/FormDinamico.js"></script>
<script src="../JS/XML.js"></script>
<script src="../JS/XML-HTML.js"></script>
<script>
function Reset() {
document.getElementsById("1").reset();
}
</script>
<style>
button{
background-color: green;
margin-top: 10px;
margin-left: 11%;
border: 5px;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
.main{
width:70%;
}
}</style>
<body>
<div id="main">
<button onclick="Temas();" id="gerar1">Criar</button>
<button onclick="gerar();" id="gerar">Gerar</button>
<div id="form">
<!--form here -->
<div id="form7">
<button class="button" type="button">Procurar XML</button>
<button class="button" type="button" name="btnSub" onclick="download(this.form)">Gerar XML</button>
<button class="button" type="button" value="Reset" onclick="Reset();">Reset</button>
<!-- <button class="button" type="button" onclick="download">Save</button> -->
</div>
</div>
</div>
</body>
</html>
You can load it on a new tab setting the headers (simply generate a DOM with proper headers to it and write as html) for it or with an html link (HTML5 only. server side lang needed to generate a file).
See:
https://www.designedbyaturtle.co.uk/2016/how-to-force-the-download-of-a-file-with-http-headers-and-php/
for further details.
You'll need to do one of this things:
1- write a file with dynamically generated content on the server to deliver it as a downloadable response (for example with php, c#, java or whatever server-side programing language your server admits).
2- Generate a printable document "on the fly" for example as .pdf (i didnt tryed with an html document but i suppose it's possible too) and set the headers to force the browser to interpret it as downloadable.
There's an example:
<html>
<head>
<title>
</title>
</head>
<body id="html-doc">
<br/>
<form id="main" method="post" action="main.php">
<label>surname: <input type="text" name="surname" /></label><br/><br/>
<label>Comment: <textarea id="text-val" rows="4"><strong>This is the</strong> content of my file</textarea></label><br/>
<input type="button" id="dwn-btn" value="submit"/>
<p></p>
<a onclick="this.href='data:text/html;charset=UTF-8,'+encodeURIComponent(document.documentElement.outerHTML)" href="#" download="page.html">Download all as HTML</a>
</form>
</body>
</html>
Edited to allow download the entire HTML code.
I am making a web app that takes JavaScript vars and puts them into a math problem. The script is
<HTML>
<head>
<meta name="viewport" content="initial-scale=2, user-scalable=no">
<meta name= apple-mobile-web-app-capable content= yes />
<meta name= apple-mobile-web-app-status-bar-style content= black />
<link rel="apple-touch-icon" href="https://dl.dropboxusercontent.com/u/11681462/untitled%20folder/Icon/Icon-SD-Iphone.png" />
<link rel="apple-touch-icon" sizes= 114x114 href="https://dl.dropboxusercontent.com/u/11681462/untitled%20folder/Icon/Icon-HD-Iphone.png" />
<link rel="apple-touch-icon" sizes= 72x72 href="https://dl.dropboxusercontent.com/u/11681462/untitled%20folder/Icon/Icon-SD-Ipad.png" />
<link rel="apple-touch-icon" sizes= 144x144 href="https://dl.dropboxusercontent.com/u/11681462/untitled%20folder/Icon/Icon-HD-Ipad.png" />
<Title> Diabetes Cal </Title>
<script>
function valuechanged() {
var a = document.getElementById('textA').value;
var b = document.getElementById('textB').value;
var t = document.getElementById('textX').value;
var y = document.getElementById('textY').value;
var z = document.getElementById('textZ').value;
var dec = t * 0.1;
var x = parseFloat(dec).toFixed(1);
if (+x - +y < 0) {
var c = 0;
}
else
{
c = +x - +y;
}
if (c < 0) {
var l = 0;
}
else
{
var l = c / z;
}
var d = parseFloat(l).toFixed(2);
if (a / b < 0)
{
var u = 0;
}
else
{
var u = a / b;
}
var e = parseFloat(u).toFixed(2);
document.getElementById('labelS').innerHTML = e;
document.getElementById('labelG').innerHTML = d;
document.getElementById('labelX').innerHTML =
document.getElementById('labelJ').innerHTML = +d + +e;
}
function myFunction(){
var TS=document.getElementById('textB')
var date= new Date();
var time = date.getHours();
if (time<10)
{
CR = "8";
}
else if (time<16)
{
CR = "10";
}
else if (time<20)
{
CR = "5";
}
else
{
CR = "8";
}
TS.value= CR
}
</script>
</head>
<body BGColor=orange onload="valuechanged();myFunction();" > <center><br> Bolus Wizard <br>
<div>
Bg (without Decimal)<br>
<input type="text" pattern=\d* id="textX" min="25" max="333" value="25" onchange="valuechanged();" /><br><label ID="labelX">-----</label> mmol/L<br>
</div><hr width=45% color=black size=0.5>
<div>
Carbs<br> <input type="text" pattern=\d* ID="textA" max=300 value="0" onchange="valuechanged();" /><br>
</div><hr width=45% color=black size=0.5>
<div>
Carb Ratio<br><input type="text" pattern=\d* ID="textB" value="" onchange="valuechanged();" />
</div>
<div>
Target<br><input type="text" pattern=\d* ID="textY" value="6" onchange="valuechanged();" />
</div>
<div>
Correction Factor<br><input type="text" pattern=\d* ID="textZ" value="2" onchange="valuechanged();" />
</div>
<div>
Food<br> <label ID="labelS"> ---</label> Units
</div>
<p>
<div>
Correction<br> <label ID="labelG"> ---</label> Units
</div>
<p>
<div>
You Need...<br> <label ID="labelJ"> --- </label> Units
</div>
<p>
</center>
</body>
</HTML>
I was hoping that someone could help me make a settings page for textB TextY and TextZ. It would need to be on a different page. This web app is being designed for the Iphone and iPad. Also if there is anyway to make the variables change for var CR to a settings (like a text box saying 8am, and another saying 10am) and it saving on the device, could you include it as an answer. Thanks, you would really help alot.