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.
Related
hey i need help with creating a delete button for my "notes" so it will delete it from the screen and the localstorage (u will notice i tried to make a delBtn function but with no success) i would appreciate if someone could post a fix to mine and explain me where i went wrong.
My JS
const tableBody = document.getElementById("tableBody");
const taskInfo = document.getElementById("taskInfo");
const taskDate = document.getElementById("taskDate");
const taskTime = document.getElementById("taskTime");
const delBtn = document.getElementById("delBtn")
let x = new Task("this is a test", "2021-04-14", "03:19");
let y = new Task("this is a 2nd test", "2021-04-14", "03:19");
//x.add();
//y.add();
let taskList = [
x, y, (new Task("this is a 3rd test", "2021-04-14", "03:19"))
];
if (localStorage.savedTaskList)
taskList = JSON.parse(localStorage.savedTaskList);
displayTable();
function displayTable() {
tableBody.innerHTML = "";
for (let task of taskList) {
const div = document.createElement("div");
div.setAttribute("class","taskZone");
const divTaskInfo = document.createElement("div");
divTaskInfo.setAttribute("class","taskInfo");
const divTaskDate = document.createElement("div");
divTaskDate.setAttribute("class","taskDate");
const divTaskTime = document.createElement("div");
divTaskTime.setAttribute("class","taskTime");
const delBtn = document.createElement("span");
delBtn.setAttribute("class","delBtn");
divTaskInfo.innerText = task.taskInfo;
divTaskDate.innerText = task.taskDate;
divTaskTime.innerText = task.taskTime;
div.append(divTaskInfo, divTaskDate, divTaskTime);
tableBody.appendChild(div);
}
}
delBtn.onclick = function delTask() {
delBtn.parentNode.removeChild(taskZoneElmToDel)
}
function addTask() {
if (taskInfo.value == '' || taskDate.value == '' || taskTime.value == '') {
return alert(`Please fill all the fields.`);
}else{newTask = new Task(taskInfo.value, taskDate.value, taskTime.value);
taskList.push(newTask);
localStorage.savedTaskList = JSON.stringify(taskList);
displayTable();
}
}
Thats the Html part of it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task Board</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
<body>
<div class="scaleable-wrapper" id="scaleable-wrapper">
<div class="very-specific-design" id="very-specific-design">
<header class="Title">
My Task Board
</header>
<div id="Input">
</br>
</br>
<form class="Form" id="formInfo">
<label for="taskInfo">Task Info:</label>
<input type="text" id="taskInfo" name="taskInfo" required autofocus></input></br>
<label for="taskDate">Task Date:</label>
<input type="date" id="taskDate" name="taskDate" required></input></br>
<label for="taskTime">Task Time:</label>
<input type="time" id="taskTime" name="taskTime" required></input></br>
<input type="submit" id="addTaskDiv" class="btn" value="Save" onclick="addTask()"></input>
<input type="reset" id="resetForm" class="btn"></input>
</form>
</br>
</br>
</div>
<div class="outNotes"></div>
<div class="tableBody">
<table>
<tbody id="tableBody">
</tbody>
</table>
</div>
</div>
</div>
<input type="button" id="delBtn">x</input>
</body>
<script src="Task.js"></script>
<script src="script2.js"></script>
</html>
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>
My code error is pretty obvious but I can´t see it.
It's very simple my form ask the height and weight and calculate the corporal mass index the user input height in meters and convert to inches (function works ok)
input kilos and convert to pounds (works ok too) but in this process must calculate the index and write it in another textbox. that's my problem!
What am I doing wrong??? heres my code:
function myFunctionmts() {
var x = document.getElementById("mters");
var y = document.getElementById("inches");
y.value = ((x.value*100)/2.54).toFixed(2);
document.getElementById("mters").value=x.value;
document.getElementById("inches").value=y.value;
}
</script>
<script>
function myFunctionkg() {
var i = document.getElementById("imc");
var p = document.getElementById("inches");
var x = document.getElementById("kilos");
var z = document.getElementById("pounds");
var step1 = 0;
var step2 = 0;
var step3 = 0;
z.value = (x.value/.454).toFixed(2);
libras.value=z.value;
document.getElementById("pounds").value=z.value;
step1.value = z.value*703;
step2.value = step1.value/p.value;
step3.value = (step2.value/p.value).toFixed(1);
document.getElementById("imc").value=step3.value
}
<form method="POST" action="#">
<input type="text" name="mters" id="mters" required onchange="myFunctionmts()">
<input type="text" name="inches" id="inches" placeholder="Inches" readonly>
<input type="text" name="kilos" id="kilos" required onchange="myFunctionkg()">
<input type="text" name="pounds" id="pounds" placeholder="Pounds" readonly>
<input type="text" name="imc" id="imc" readonly>
<input type="submit" value="Save">
</form>
Try to use this code:
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stack Overflow</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form method="POST" action="#">
<label for="mters">meter</label>
<input
type="text"
name="mters"
id="mters"
required
onchange="myFunctionmts()"
/>
<label for="inches">inches</label>
<input
type="text"
name="inches"
id="inches"
placeholder="Inches"
readonly
/>
<label for="kilos">kilos</label>
<input
type="text"
name="kilos"
id="kilos"
required
onchange="myFunctionkg()"
/>
<label for="pounds">pounds</label>
<input
type="text"
name="pounds"
id="pounds"
placeholder="Pounds"
readonly
/>
<label for="imc">imc</label>
<input type="text" name="imc" id="imc" readonly />
<input type="submit" value="Save" />
</form>
<script src="script.js"></script>
</body>
</html>
JS:
function myFunctionmts() {
var x = document.getElementById('mters');
var y = document.getElementById('inches');
y.value = ((x.value * 100) / 2.54).toFixed(2);
document.getElementById('mters').value = x.value;
document.getElementById('inches').value = y.value;
}
function myFunctionkg() {
var imc = document.getElementById('imc'); // mass index
var inches = document.getElementById('inches'); //
var kilos = document.getElementById('kilos');
var pounds = document.getElementById('pounds'); // pounds
var step1 = 0;
var step2 = 0;
var step3 = 0;
pounds.value = (+kilos.value / 0.454).toFixed(2);
// undefined error here, what is this libras all about ???
// libras.value = z.value;
step1 = +pounds.value * 703;
step2 = +step1 / +inches.value;
step3 = (+step2 / +inches.value).toFixed(1);
console.log(step3);
imc.value = step3;
}
Hope it helps.
I have this html code with javascript. My average value displays correctly but my find minimum is not displaying anything. Its supposed to show when the user clicks on the find min button on the box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculate Your Grade</title>
<link rel="stylesheet" href="calc.css">
<script>
var $ = function (id) {
return document.getElementById(id);
}
var calculateGrade = function () {
var exam1 = parseFloat($("exam1").value);
var exam2 = parseFloat($("exam2").value);
var exam3=parseFloat($("exam3").value);
if (isNaN(exam1) || isNaN(exam2) ) {
alert("All three entries must be numeric");
}
else {
var average = (exam1 + exam2 + exam3) / 3;
$("average").value = average;
}
}
var min = function () {
var exam1 = parseFloat($("exam1").value);
var exam2 = parseFloat($("exam2").value);
var exam3=parseFloat($("exam3").value);
if ( (exam1<exam2) && (exam1<exam3)){
$("mini").value=exam1;}
else if ((exam2<exam1) && (exam2<exam3)){
$("mini").value=exam2;}
else {
$("mini").value=exam3;
}
}
window.onload = function () {
$("calculate").onclick = calculateGrade;
$("mini").onclick = min;
$("exam1").focus();
}
</script>
</head>
<body>
<section>
<h1>Calculate Average</h1>
<label for="exam1">Exam1:</label>
<input type="text" id="exam1"><br>
<label for="exam2">Exam2:</label>
<input type="text" id="exam2"><br>
<label for="exam3">Exam3:</label>
<input type="text" id="exam3"><br>
<label for="average"></label>
<input type="text" id="average"disabled ><br>
<label> </label>
<input type="button" id="calculate" value="Calc Avg">
<input type="button" id="mini" value="Find min">
</section>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculate Your Grade</title>
<link rel="stylesheet" href="calc.css">
<script>
var $ = function (id) {
return document.getElementById(id);
}
var average = function () {
var exam1 = parseFloat($("exam1").value);
var exam2 = parseFloat($("exam2").value);
var exam3 = parseFloat($("exam3").value);
if (isNaN(exam1) || isNaN(exam2) || isNaN(exam3)) {
alert("All three entries must be numeric");
}
else {
var average = (exam1 + exam2 + exam3) / 3;
$("result").value = average;
}
}
var min = function () {
var exam1 = parseFloat($("exam1").value);
var exam2 = parseFloat($("exam2").value);
var exam3 = parseFloat($("exam3").value);
if (isNaN(exam1) || isNaN(exam2) || isNaN(exam3)) {
alert("All three entries must be numeric");
} else {
$("result").value = Math.min(exam1,exam2,exam3);
}
}
window.onload = function () {
$("average").onclick = average;
$("mini").onclick = min;
$("exam1").focus();
}
</script>
</head>
<body>
<section>
<h1>Calculate</h1>
<label for="exam1">Exam1:</label>
<input type="text" id="exam1"><br>
<label for="exam2">Exam2:</label>
<input type="text" id="exam2"><br>
<label for="exam3">Exam3:</label>
<input type="text" id="exam3"><br>
<label for="average"></label>
<input type="text" id="result" disabled ><br>
<label> </label>
<input type="button" id="average" value="Calc Avg">
<input type="button" id="mini" value="Find min">
</section>
</body>
</html>
The issue is with the min function. Instead of setting the value of textbox (probably, missing in your code example) you are setting the value of button "mini" (which is incorrect).
Update:
You need to be including one more textbox <input type="text" id="txtMin" disabled ><br>
and update your min function to set the value of it, as follows:
$("txtMin").value=exam1;
...
$("txtMin").value=exam2;
...
$("txtMin").value=exam3;
I dont understand why the button will not become active after it is enabled with the check box. I have got it to work without disabling the submit button but then it works independent of the checkbox being checked
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Pragma" content="no-cache">
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-
scalable=0, width=device-width;">
<title>Welcome to Tiffany & Co.</title>
<link rel="stylesheet" href="index.css" type="text/css" media="screen" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<!--Enable media queries in some unsupported subrowsers-->
<script type="text/javascript" src="css3-mediaqueries.js"></script>
<script type="text/javascript" src="main.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<script>
function submitAction()
{
var link = document.location.href;
var searchString = "redirect=";
var equalIndex = link.indexOf(searchString);
var redirectUrl = "";
if (document.forms[0].action == "")
{
var url = window.location.href;
var args = new Object();
var query = location.search.substring(1);
var pairs = query.split("&");
for(var i=0;i<pairs.length;i++)
{
var pos = pairs[i].indexOf('=');
if(pos == -1) continue;
var argname = pairs[i].substring(0,pos);
var value = pairs[i].substring(pos+1);
args[argname] = unescape(value);
}
document.forms[0].action = args.switch_url;
}
if(equalIndex >= 0)
{
equalIndex += searchString.length;
redirectUrl = "";
redirectUrl += link.substring(equalIndex);
}
if(redirectUrl.length > 255)
redirectUrl = redirectUrl.substring(0,255);
document.forms[0].redirect_url.value = redirectUrl;
document.forms[0].buttonClicked.value = 4;
document.forms[0].submit();
}
function reject()
{
alert("You will not be able to access the system!");
}
function loadAction() {
var url = window.location.href;
var args = new Object();
var query = location.search.substring(1);
var pairs = query.split("&");
for (var i = 0; i < pairs.length; i++) {
var pos = pairs[i].indexOf('=');
if (pos == -1) continue;
var argname = pairs[i].substring(0, pos);
var value = pairs[i].substring(pos + 1);
args[argname] = unescape(value);
}
document.forms[0].action = args.switch_url;
}
</script>
<form method="post">
<input TYPE="hidden" NAME="buttonClicked" SIZE="16" MAXLENGTH="15" value="0">
<input TYPE="hidden" NAME="redirect_url" SIZE="255" MAXLENGTH="255" VALUE="">
<input TYPE="hidden" NAME="err_flag" SIZE="16" MAXLENGTH="15" value="0">
<h1>Welcome to Tiffany & Co.</h1>
<p id="desc">We're delighted to offer our customers complimentary Wi-Fi
while shopping in our store.</p>
<form>
<p id="terms">
<input id="termsCheckbox" type="checkbox"
onclick="this.form.submit.disabled = !this.checked"/> I have read and agreed to the Terms of Use
</p>
<p id="error">
Please agree to the Terms of Use by checking the box.
</p>
<p class="connect">
<input id="connect" type="button" name="submit" value="Accept"
class="button" disabled="disabled" onclick="submitAction();">
</p>
</form>
<div id="logo">
<img src="logo.png" width="108" height="14" alt="Tiffany & Co."
/>
</div>
</div>
</body>
</html>
Your code works fine, it's a mess, but it works. The issue is this:
Uncaught ReferenceError: submitAction is not defined
The cause of the issue is that you don't have a closing brace on submitAction()
Here's a working demo. I've also cleaned up your code!
Properly formatting and indenting your code is very important. Not only does it look good and makes it easier to read, you will easily spot mismatched/missing braces.
Try with this
$(function(){
$('#termsCheckbox').change(function(){
$('#connect').prop('disabled', !this.checked);
}
});