When I run the code nothings changes and nothing works, the JavaScript does not do anything not even run the alerts. The ranges in the HTML are supposed to go into a function that gets their value and outputs it to a <div>. That does not happen
This is the JavaScript
$(startup);
function startup(){
$("#speedRange").change(srange);
$("#LimitRange").change(lrange);
$("#ticketbtn").cick(findfine);
$("#ticketreset").click(reset);
}
var speed;
var limit;
function srange() {
speed = $("#speedRange").val();
speed = Number(speed);
$("#YourSpeed").html(speed);
function lrange() {
limit = $("#LimitRange").val();
limit = Number(limit);
$("#OverSpeed").html(limit);
function findfine() {
alert("ll")
}
function reset() {
alert("ll")
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Speeding Ticket Calculator</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Speeding Ticket Calculator</h1>
<table id="speedtable">
<tr>
<td>Select Your Speed<br>40 <input type="range" id="speedRange"> 160 </td>
<td><div id="YourSpeed"></div></td>
</tr>
<tr>
<td>Select The Speed Limit<br>40 <input type="range" id="limitRange"> 100 </td>
<td><div id="OverSpeed"></div></td>
</tr>
</table><br>
<a id="ticketbtn" class="button1">Calculate Penalty</a>
<a id="ticketreset" class="button1">Reset</a><br>
<br><br><br>
<div id="finebox">
</div>
<script src="script.js">
<p id="demo"></p>
</script>
</body>
</html>
This is the Html
Jquery On API to be used in latest version of jquery.
and some function braces where missing,
find the working snippet below.
$(document).ready(function(){
debugger;
startup();
});
function startup(){
debugger;
$("#speedRange").on('change',srange);
$("#limitRange").on('change',lrange);
$("#ticketbtn").on('click',findfine);
$("#ticketreset").on('click',reset);
}
var speed;
var limit;
function srange() {
debugger
speed = $("#speedRange").val();
speed = Number(speed);
$("#yourSpeed").html(speed);
}
function lrange() {
debugger
limit = $("#limitRange").val();
limit = Number(limit);
$("#overSpeed").html(limit);
}
function findfine() {
debugger
alert("ll")
}
function reset() {
debugger;
alert("ll");
$("#overSpeed").html('');
$("#yourSpeed").html('');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Speeding Ticket Calculator</h1>
<table id="speedtable">
<tr>
<td>Select Your Speed<br>40 <input type="range" id="speedRange"> 160 </td>
<td><div id="yourSpeed"></div></td>
</tr>
<tr>
<td>Select The Speed Limit<br>40 <input type="range" id="limitRange"> 100 </td>
<td><div id="overSpeed"></div></td>
</tr>
</table><br>
<a id="ticketbtn" class="button1">Calculate Penalty</a>
<a id="ticketreset" class="button1">Reset</a><br>
<br><br><br>
<div id="finebox">
</div>
<p id="demo"></p>
Related
My JS code looks like this. But when I open the page it says "Uncaught TypeError: Cannot set property 'innerHTML' of null"
I tried to change the NewItem constructor to a function. But VSC keeps saying I should declare it as a class instead. I converted it in the first place because the constructor wasn't working as a function either.
class NewItem {
constructor(name, date, price) {
this.itemName = name;
this.itemDate = date;
this.itemPrice = price;
}
}
const onListItem = new NewItem("John", "Date", "Price");
document.getElementById("demo").innerHTML = onListItem.itemDate;
HTML looks like this
<!DOCTYPE html>
<html lang= "en">
<head>
<link rel="stylesheet" href="ShopListStyle.css">
<meta name="viewport" content="width=device-width" initial-scale=1.0>
<title>Shopping List</title>
</head>
<body>
<script src="ShopListScript.js"></script>
<div id="container">
<div id="inputbox" class="section">
<form id="labels-form">
<label><h2>Shopping List</h2></label>
<input id="labels-name" class="labels-input" type="text" value="Item Name"></input>
<input id="labels-date" class="labels-input" type="text" value="Date of Purchase"></input>
<input id="labels-price" class="labels-input" type="text" value="Item Price"></input>
<button id="labels-button">Add to List</button>
<p id="demo"></p>
</form>
</div>
<div id="shopListBox" class="section">
<!--Need to add a delete button/ Maybe a quantity button down the road-->
<table id="shopList">
<caption><h2>Spending List</h2></caption>
<thead id="table-header">
<tr>
<th class="table-header" id="table-name">name</th>
<th class="table-header" id="table-date">date</th>
<th class="table-header"id="table-price">price</th>
<th class="table-header" id="table-delete">delete</th>
</tr>
</thead>
<tbody id="table-body">
<tr class="newRow">
<td class="new-item" id="item-name">item</td>
<td class="new-item" id="item-date">item</td>
<td class="new-item" id="item-price">item</td>
<td class="new-item"><button class="item-button">Delete</button></td>
</tr>
</tbody>
<tfoot id="table-footer">
<tr>
<td id="item-price-sum" colspan="4" style="width: 100%" >Sum of Prices</td>
</tr>
</tfoot>
</table>
<!--The sum of all the prices will go somewhere here-->
</div>
</div>
</body>
</html>
Your JavaScript code is trying to access this element with id demo (<p id="demo"></p>):
document.getElementById("demo").innerHTML = onListItem.itemDate;
Your script is added at the opening body tag...
<body>
<script src="ShopListScript.js"></script>
...
...which means the demo element does not exist yet.
Solution: Put your script before the closing body tag:
...
<script src="ShopListScript.js"></script>
</body>
</html>
You can also try to set
<script src="ShopListScript.js" defer="defer"></script>
Because javascript will block the DOM rendering, so we should put in the end of
like Peter Krebs's answer:
...
<script src="ShopListScript.js"></script>
</body>
I am trying to get my variable I have saved to display on a table I have created on another page. I get the information from the user from a form, and have a button that is clicked and fires off to save the values into variables. My problem is that I can't change the inner html on the other page with the variable I have saved. I am using 1 js file and 2 html files. I can only use js/jquery, html, and css. here is my code:
loanpage.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Super Awesome Loan Guys</title>
<link rel="stylesheet" type="text/css" href="loanpage.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="loanpage.js"></script>
</head>
<body>
<div class="bg" id="text-center">
<div class="companytitle"><span class="dollar">$</span>uper Awe<span class="dollar">$</span>ome Loan Guy<span class="dollar">$</span></div>
<div>
<form action="infopage.html">
<h4>Loan Amount:</h4>
<input type="text" id="loanamount" name="loanamount"><br>
<input type="radio" id="12month" name="time">12 Months
<input type="radio" id="18month" name="time">18 Months
<input type="radio" id="24month" name="time">24 Months
<h4>Name:</h4><input id="namefield" type="text" name="firstlastname">
<h4>Phone:</h4><input id="phonefield" type="text" name="phonennumber">
<h4>Email:</h4><input id="emailfield" type="text" name="email">
<h4>Zip Code:</h4><input id="zipfield" type="text" name="zipcode"><br>
</form>
<button type="button">Submit</button>
</div>
</div>
</body>
</html>
infopage.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Super Awesome Loan Guys Loan Information</title>
<link rel="stylesheet" type="text/css" href="loanpage.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="loanpage.js"></script>
</head>
<body>
<div class="bg" id="text-center">
<h1>Here is the info you submitted!</h1>
<table>
<tr>
<th>Name</th>
<th>Phone Number</th>
<th>Email Address</th>
<th>Zip Code</th>
<th>Loan Amount</th>
<th>Loan Duration</th>
<th>Interest</th>
</tr>
<tr>
<td id="displayName">1</td>
<td id="displayPhone">1</td>
<td id="displayEmail">1</td>
<td id="displayZip">1</td>
<td id="displayAmount">1</td>
<td id="displayDuration">1</td>
<td id="displayInterest">1</td>
</tr>
</table>
</div>
</body>
</html>
loanpage.js
//js code
var name = "";
var phone="";
var email="";
var zip="";
var loan=0;
var loanrate=12.0;
var loanlen=0;
//Jquery code
$(document).ready(function (){
$("#submitbutton").click(function(){
loan = parseFloat($("#loanamount").val());
if ($("#12month").is(':checked')){
loanlen = 12;
}
else if ($("#18month").is(':checked')){
loanlen = 18;
}
else if ($("#24month").is(':checked')){
loanlen = 24;
}
name = $("#namefield").val();
phone = $("#phonefield").val();
email = $("#emailfield").val();
zip = $("#zipfield").val();
document.getElementById("displayName").innerHTML(name);
document.getElementById("displayPhone").innerHTML(phone);
document.getElementById("displayEmail").innerHTML(email);
document.getElementById("displayZip").innerHTML(zip);
document.getElementById("displayAmount").innerHTML(loan);
document.getElementById("displayDuration").innerHTML(loanlen);
document.getElementById("displayInterest").innerHTML(loanrate);
});
});
Local Storage is your best bet.
// Save data to the current local store
localStorage.setItem("username", "John");
// Access some stored data
alert( "username = " + localStorage.getItem("username"));
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
How to get text from the form and save in text file using javascript
<html >
<head>
<link rel="shortcut icon" type="image/png" href="/favicon1.png" sizes="16x16" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login & Registration System</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<center>
<div id="login-form">
<form method="post">
<table align="center" width="30%" border="0">
<tr>
<td><font color="#001c4e" size=18px >
<b>Elvis Login</b></font></td>
</tr>
<tr>
<td><input type="text" id="resultname" name="user_name" placeholder="User ID" required /></td>
</tr>
<tr>
<td><input type="password" name="pass" placeholder="Your Password" required /></td>
</tr>
<div id="result"></div>
<script>
// Check browser support
function WriteToFile(f) { //added the form you clicked from
try {
alert("started");
var t = f.user_name.value;
alert(t);
var msg = t;
var fso, s;
fso = new ActiveXObject("Scripting.FileSystemObject");
s = fso.OpenTextFile("C:\\Test\\Logfile.txt", 8, false);
s.writeline(msg);
s.Close();
alert("Comment Saved!");
}
catch (err) {
var strErr = 'Error:';
strErr += '\nNumber:' + err.number;
strErr += '\nDescription:' + err.description;
document.write(strErr);
}
}
$</script>
<tr>
<td><button type="submit" onclick="WriteToFile(this.form)" name="btn-login">Sign In</button></td>
</tr>
</table>
</form>
</div>
</center>
</body>
</html>
I need get the username from form and save it in the text file.But this code only works in the IE browser.please give suggestions.
what are the things used insteadof new ActiveXObject??
I am not interested to install the plugins.give others suggestions please
I am working on a history search function.
I have managed to get a working code to save the value from the textbox but I do not know how to load them into a listbox.
I want a listbox with clickable items so that I can click on a previous search value and load that value as I do from the textbox.
Here is my code:
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="jquery.js"></script>
<script src="j.js"></script>
</head>
<body>
<center>
<table>
<tr>
<td style="text-align: center">
<font size="22">Sök order</font>
</td>
</tr>
<tr>
<td>
<form action="test.php" method="post">
<input style="font-size: 44pt; text-align: center" size="9" type="text" name="txtSearch" id="txtSearch"/>
<input type="submit" id="submit" value="submit">
</form>
</td>
</tr>
</table>
</center>
</body>
</html>
And the j.js that handles the local storage function.
$(function () {
$("#submit").click(function () {
var txtSearch = $("#txtSearch").val();
localStorage.setItem('searchvalue',txtSearch);
});
});
And last my test.php that handles the post search request
<?php
$txtSearch = $_REQUEST['txtSearch'];
header('Location: '.'https://mywebsite.com/se/editor/order_info.php?webshop=23946&ordernr='.$txtSearch);
?>
How can I achieve this?
Thank you.
by js, you can
window.location = "https://mywebsite.com/se/editor/order_info.php?webshop=23946&ordernr="+localStorage.getItem('searchvalue');
to save in listbox or any other
document.getElementById("id").value=localStorage.getItem('searchvalue');
to save in array
var a = [];
a[0]=localStorage.getItem('searchvalue');
I wish to have the array of inputs to be remembered using the local storage feature of html5. At the moment i can populate the array with weight inputs but once i refresh they disappear. Could anyone help me with this.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home Fitness</title>
<link type="text/css" rel="stylesheet" href="styles.css" />
<script>
var arrayX =10;
var arrayY =2;
var array=new Array(arrayX);
var arrayIndex=0;
for (x=0; x<array.length; x++)
{
array [x] = new Array(arrayY);
}
function insert(val1, val2){
if (arrayIndex >= arrayX)
{
alert("Recent Entries is Full");
return false;
}
array[arrayIndex][0]=val1;
array[arrayIndex][1]=val2;
arrayIndex++;
document.getElementById('weight1').value = '';
document.getElementById('unit').value = '';
}
function show() {
var string='<b>Weight Entries</b><br>';
for(i = 0; i < array.length; i++)
{
string+=''+array[i][0]+' '+array[i][1]+'<br>';
}
if(array.length > 0)
document.getElementById('myDiv').innerHTML = string;
}
</script>
</head>
<body>
<header>
<h1>Weight Tracker</h1>
</header>
<article>
<h2>Weight Input</h2>
<p>Please enter your current weight below and submit.</p>
</article>
<form name="form1">
<table align="center" width="407">
<tr>
<td width="154" align="right"><b>Weight</b> </td>
<td width="9"><b> :</b></td>
<td width="224">
<input type="integer" name="weight" id="weight1"/></td>
<tr>
<td width="154" align="right"><b>Unit (KG,Ibs, Stone)</b></td>
<td width="9"><b> :</b></td>
<td width="224">
<input type="integer" name="unit" id="unit"/></td>
</tr>
</table>
</br>
<table width="407">
<input type="button" value="Submit Weight"
onclick="insert(this.form.weight.value,this.form.unit.value);"/>
<input type="button" value="Recent Entries"
onclick="show();"/>
</table>
</form>
</br>
<div id="myDiv"></div>
<nav>
<ul>
<li>home</li>
</ul>
</nav>
just stringify your array and save it to localStorage when you are done.
localStorage["array"] = JSON.stringify(array)
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Template Index</title>
<style>
</style>
</head>
<body>
<div>
<input id="name"/>
</div>
<script>
window.addEventListener("beforeunload", function () {
var name = document.getElementById("name");
localStorage.setItem("name", name.value);
}, false);
window.addEventListener("load", function (){
var name = document.getElementById("name");
name.value = localStorage.getItem("name");
}, false);
</script>
</body>
</html>
the core code is above. you can make your own logic to accomplish your goal
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage