I'm trying to recreate this mortgage calculator script on jsfiddle but when i run my copy of it I get no output. I'm super new to jquery so it could be something simple. Here's my entire page with all the code copied verbatim from jsfiddle:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Mortgage Calc Testing Yay</title>
<meta name="description" content="">
<meta name="author" content="">
<style>
label, div input, div select {
display: block;
margin: 0.5em 0;
}
label {
font-weight: bold;
}
form p {
margin: 0.5em 0;
}
</style>
</head>
<body>
<form action="#" method="post" id="test">
<p><strong>Please insert decimals using the dot notation, e.g. <code>5.9</code></strong></p>
<div>
<label for="balance">Loan balance (€)</label>
<input name="balance" id="balance" type="text" />
</div>
<div>
<label for="rate">Interest rate (%)</label>
<input name="rate" id="rate" type="text" />
</div>
<div>
<label for="term">Loan term (years)</label>
<input name="term" id="term" type="text" />
</div>
<div>
<label for="period">Period</label>
<select name="period" id="period">
<option>Select</option>
<option value="12">Monthly</option>
<option value="6">Bimonthly</option>
</select>
</div>
<p><input type="submit" id="submit" name="submit" value="Calculate" /></p>
</form>
<script async src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
$.fn.calculateMortgage = function(options) {
var defaults = {
currency: '€',
params: {}
};
options = $.extend(defaults, options);
var calculate = function(params) {
params = $.extend({
balance: 0,
rate: 0,
term: 0,
period: 0
}, params);
var N = params.term * params.period;
var I = (params.rate / 100) / params.period;
var v = Math.pow((1 + I), N);
var t = (I * v) / (v - 1);
var result = params.balance * t;
return result;
};
return this.each(function() {
var $element = $(this);
var $result = calculate(options.params);
var output = '<p>' + options.currency + ' ' + $result.toFixed(2) + '</p>';
$(output).appendTo($element);
});
};
})(jQuery);
$(function() {
$('#test').on('submit', function(e) {
e.preventDefault();
var $params = {
balance: $('#balance').val(),
rate: $('#rate').val(),
term: $('#term').val(),
period: $('option:selected', '#period').val()
};
$(this).calculateMortgage({
params: $params
})
});
});
</script>
</body>
</html>
I've tried changing my jquery version but that didn't help.
Thank you for any help.
Related
I'm new to JS and I'm just practicing. I have this form that sets data in an object which is later displayed on the DOM. It works but it just shows a "key" at a time. If I add new elements they replace the existing one.
class Items {
constructor(namee, surnamee) {
this.namee = namee;
this.surnamee = surnamee;
}
}
function Func() {
event.preventDefault();
var nameval = document.getElementById('namee').value;
var surnval = document.getElementById('surnamee').value;
let newIt = new Items(nameval, surnval);
console.log(newIt)
document.getElementById('box').innerHTML = newIt.namee + " " + newIt.surnamee
}
<form onsubmit={Func()}>
<input id="namee" > </input>
<input id="surnamee"> </input>
<button type=submit> send </button>
</form>
<p id="box"> </p>
I've tried the push() method but it works with arrays. I've also tried to create an object instead of a class but I get the same grief
Thank you in advance
Maybe you looking for this:
class Items {
constructor(namee, surnamee) {
this.namee = namee;
this.surnamee = surnamee;
}
}
function Func() {
event.preventDefault();
var nameval = document.getElementById('namee').value;
var surnval = document.getElementById('surnamee').value;
let newIt = new Items(nameval, surnval);
console.log(newIt)
document.getElementById('box').innerHTML += `<p>` + newIt.namee + " " + newIt.surnamee + `</p>`;
}
<form onsubmit={Func()}>
<input id="namee" > </input>
<input id="surnamee"> </input>
<button type=submit> send </button>
</form>
<p id="box"> </p>
class Items {
constructor(namee, surnamee) {
this.namee = namee;
this.surnamee = surnamee;
}
}
function Func() {
event.preventDefault();
var nameval = document.getElementById('namee').value;
var surnval = document.getElementById('surnamee').value;
let newIt = new Items(nameval, surnval);
let html = `${document.getElementById('box').innerHTML}<p>${newIt.namee} ${newIt.surnamee}</p>`
document.getElementById('box').innerHTML = html
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
</head>
<body>
<form onsubmit={Func()}>
<input id="namee" > </input>
<input id="surnamee"> </input>
<button type=submit> send </button>
</form>
<p id="box"> </p>
</body>
</html>
Hope it help :)
or you can use this
https://www.w3schools.com/jsref/met_node_appendchild.asp
any stored value can be wrapped in a div tag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
</head>
<body>
<form onsubmit={Func()}>
<input id="namee" > </input>
<input id="surnamee"> </input>
<button type=submit> send </button>
</form>
<p id="box"> </p>
</body>
</html>
<script>
class Items {
constructor(namee, surnamee) {
this.namee = namee;
this.surnamee = surnamee;
}
}
function Func() {
event.preventDefault();
var nameval = document.getElementById('namee').value;
var surnval = document.getElementById('surnamee').value;
let newIt = new Items(nameval, surnval);
console.log(newIt)
const row = document.createElement('div');
row.innerText = newIt.namee + " " + newIt.surnamee;
document.getElementById('box').appendChild(row);
}
</script>
I made a username and password validation but although I filled in valid information, it outputs invalid. The input is from <input> tag, with IDs, where the information entered is stored into arrays. Is it data type or syntax issues?
HTML Code 1:
<!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>
<span>Username</span>
<input id="user" placeholder="enter username">
<br>
<br>
<span>Password</span>
<input id="pass" placeholder="enter password">
<br>
<br>
<button onclick="save()">Enter</button>
<script src="pass.js"></script>
</body>
</html>
HTML Code 2:
<!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>
<span>Username</span>
<input id="user" placeholder="enter username">
<br>
<br>
<span>Password</span>
<input id="pass" placeholder="enter password">
<br>
<br>
<button onclick="valid()">Validate</button>
<br>
<br>
<h1 id="ans"></h1>
<script src="pass.js"></script>
</body>
</html>
Javascript Code (in a separate file):
var user = [];
var pass = [];
function save( ) {
var x = document.getElementById("user").value;
var y = document.getElementById("pass").value;
user.push(x);
pass.push(y);
console.log(user);
}
function valid() {
var a = document.getElementById("user").value;
var b = document.getElementById("pass").value;
var validationa;
var validationb;
for (let x in user) {
if (x == a) {
validationa = 1;
} else {
validationa = 0;
}
}
for (let y in pass) {
if (y == b) {
validationb = 1;
} else {
validationb = 0;
}
}
if (validationa == 1 && validationb == 1) {
document.getElementById('ans').innerHTML = "valid";
} else {
document.getElementById('ans').innerHTML = "invalid";
}
}
It gives a valid output if the username and password entered is consistent. Both HTML files use the same Javascript source file.
I've got a very simple form and I'm want the values to empty when I submit in order to use again without refreshing the page. What I've got isn't working for some reason.
My initial idea was to set the values of the inputs to empty strings on form submit, but when I log them into the console they don't do that. Anyone know what I'm doing wrong here?
<!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>
<form id="form">
<input id="volume" type="text" />
<input id="denied" type="text" />
<input id="charges" type="number" step="any" />
<button id="submit" type="btn-submit">Submit</button>
</form>
<div class="results">
<p class="rate">Current Denial Rate: </p>
<p class="recoverable">Recoverable Dollars: </p>
</div>
<script src="script.js"></script>
</body>
</html>
let form = document.getElementById("form");
let volume = document.getElementById("volume");
let denied = document.getElementById("denied");
let charges = document.getElementById("charges");
let submit = document.getElementById("btn-submit");
let results = document.querySelector(".results");
let rate = document.querySelector(".rate");
let recoverable = document.querySelector(".recoverable");
form.onsubmit = function (e) {
e.preventDefault();
volume = volume.value;
denied = denied.value;
charges = charges.value;
let curDenialRate = parseFloat((denied / volume) * 100);
charges = parseFloat(charges * 0.4);
function formatNumber(num) {
let formattedNum = num.toFixed(2);
return formattedNum;
}
let recoverableDollars = "$" + formatNumber(charges);
curDenialRate = formatNumber(curDenialRate) + "%";
rate.append(curDenialRate);
recoverable.append(recoverableDollars);
volume = " ";
denied = " ";
charges = " ";
return false;
};
Use HTMLFormElement.reset():
let form = document.getElementById("form");
const volume = document.getElementById("volume");
const denied = document.getElementById("denied");
const charges = document.getElementById("charges");
let submit = document.getElementById("btn-submit");
let results = document.querySelector(".results");
let rate = document.querySelector(".rate");
let recoverable = document.querySelector(".recoverable");
form.onsubmit = function(e) {
e.preventDefault();
let a = volume.value;
let b = denied.value;
let c = charges.value;
let curDenialRate = parseFloat((b / a) * 100);
c = parseFloat(c * 0.4);
function formatNumber(num) {
let formattedNum = num.toFixed(2);
return formattedNum;
}
let recoverableDollars = "$" + formatNumber(c);
curDenialRate = formatNumber(curDenialRate) + "%";
rate.append(curDenialRate);
recoverable.append(recoverableDollars);
form.reset();
return false;
};
<!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>
<form id="form">
<input id="volume" type="text" />
<input id="denied" type="text" />
<input id="charges" type="number" step="any" />
<button id="submit" type="btn-submit">Submit</button>
</form>
<div class="results">
<p class="rate">Current Denial Rate: </p>
<p class="recoverable">Recoverable Dollars: </p>
</div>
<script src="script.js"></script>
</body>
</html>
How you are clearing values will not work. You are trying to change the variable but that will not affect the DOM element or its value.
You will have to use the below code with value property to change the value.
document.getElementById("volume").value= " ";
document.getElementById("denied").value= " ";
document.getElementById("charges").value= " ";
I need to make a simple project in javascript, we need to create a single library with javascript objects and let the user to add new books. I requested user data with a form tag in html and created new objects and I stored them inside a single array called library. The books are showed with no problem in the DOM the thing is that I need a button that deletes an specific book, I created a single button but it only deletes the first book in the array. I hope you can help me.
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">
<link rel="stylesheet" href="./styles.css" />
<title>Document</title>
</head>
<body>
<h1>My Library</h1>
<input id="title" type="text" placeholder="Book Title">
<input id="author" type="text" placeholder="Book Author">
<input id="date" type="text" placeholder="Publish Date">
<select id="read" name="read">
<option value="yes">yes</option>
<option value="no">no</option>
</select>
<input type="button" value="New Book" onclick="add_book()">
<div id="display"></div>
<script src="app.js"></script>
</body>
</html>
------------------------------------------------------------------------------------------------
JAVASCRIPT:
var library = [];
var title_input = document.getElementById("title");
var author_input = document.getElementById("author");
var date_input = document.getElementById("date");
var read_input = document.getElementById("read");
function Book(title, author, date, read) {
this.title = title;
this.author = author;
this.date = date
this.read = read
};
function add_book() {
var newBook = new Book(title_input, author_input, date_input, read_input)
library.push(`Title: ${newBook.title.value} <br>`+`Author: ${newBook.author.value} <br>`+
`Realease date: ${newBook.date.value} <br>`+`Readed: ${newBook.read.value} <br>` )
show_library();
};
function delete_book(arr, elem){
index = arr.indexOf(elem);
arr.splice(elem,1);
show_library();
}
function show_library() {
document.getElementById("display").innerHTML = "";
for(i = 0; i<library.length; i++){
document.getElementById("display").innerHTML += library[i]+
'<button onclick="delete_book(library, library[i]);">Delete</button><br>';
}
};
You've written library[i] as plain text into the DOM. This doesn't references the variable i from your loop.
You can simply write the index as argument and use this directly in your function delete_book.
var library = [];
var title_input = document.getElementById("title");
var author_input = document.getElementById("author");
var date_input = document.getElementById("date");
var read_input = document.getElementById("read");
function Book(title, author, date, read) {
this.title = title;
this.author = author;
this.date = date
this.read = read
};
function add_book() {
var newBook = new Book(title_input, author_input, date_input, read_input)
library.push(`Title: ${newBook.title.value} <br>`+`Author: ${newBook.author.value} <br>`+
`Realease date: ${newBook.date.value} <br>`+`Readed: ${newBook.read.value} <br>` )
show_library();
};
function delete_book(arr, index){
arr.splice(index, 1);
show_library();
}
function show_library() {
document.getElementById("display").innerHTML = "";
for(i = 0; i<library.length; i++){
document.getElementById("display").innerHTML += library[i]+
`<button onclick="delete_book(library, ${i});">Delete</button><br>`;
}
};
<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">
<link rel="stylesheet" href="./styles.css" />
<title>Document</title>
</head>
<body>
<h1>My Library</h1>
<input id="title" type="text" placeholder="Book Title">
<input id="author" type="text" placeholder="Book Author">
<input id="date" type="text" placeholder="Publish Date">
<select id="read" name="read">
<option value="yes">yes</option>
<option value="no">no</option>
</select>
<input type="button" value="New Book" onclick="add_book()">
<div id="display"></div>
<script src="app.js"></script>
</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.