For school I need to make a currency converter.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<title>Lab 10</title>
<script src="lab10script.js"></script>
</head>
<body>
<form name="form">
<input type="text" name="bedrag" placeholder="Vul bedrag in" />
<select id="list">
<option>dollar/euro</option>
<option>euro/dollar</option>
<option>ruble/euro</option>
<option>euro/ruble</option>
</select>
<<button type="button" onclick="myFunction()">Exchange</button>
</form>
</body>
</html>
function myFunction() {
var bedrag = document.getElementById("bedrag");
var x = document.getElementById("list").selectedIndex;
if (x == 0) { return (document.write("<br>test" + bedrag)); }
else { return (document.write("<br>test" + bedrag)); }
}
My problem is when I do a number like 8, it says "null", I'm learning JavaScript, so can anyone help me?
<input type="text" name="bedrag" placeholder="Vul bedrag in" />
Change to this line and try again:
<input type="text" id="bedrag" placeholder="Vul bedrag in" />
<input type="text" name="bedrag" placeholder="Vul bedrag in" />
Change to this line and try again:
<input type="text" id="bedrag" placeholder="Vul bedrag in" />
You can use console.log(bedrag) to see if the value is captured properly.
Replace the name attribute on the input with id as in
<input type="text" name="bedrag" placeholder="Vul bedrag in" />
Should become
<input type="text" id="bedrag" placeholder="Vul bedrag in" />
I am not sure but from the question and code it seems you are only trying to display the value entered. In that case try the code below:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<title>Lab 10</title>
<script src="lab10script.js"></script>
</head>
<body>
<form name="form">
<input type="text" id="bedrag" placeholder="Vul bedrag in" />
<select id="list">
<option>dollar/euro</option>
<option>euro/dollar</option>
<option>ruble/euro</option>
<option>euro/ruble</option>
</select>
<button type="button" onclick="myFunction()">Exchange</button>
</form>
<script>
function myFunction() {
var bedrag = document.getElementById("bedrag").value;
var x = document.getElementById("list").selectedIndex;
if (x == 0) {
//log the value to console and verify the value
console.log("<br>test" + bedrag);
}
else {
console.log("<br>test" + bedrag);
}
}
</script>
</body>
</html>
use this line in the script,
var bedrag = document.getElementById("bedrag").value;
instead of,
var bedrag = document.getElementById("bedrag");
and add id="bedrag" in input, because you are accessing an element by id
function myFunction() {
var bedrag = document.getElementById("bedrag").value;
var x = document.getElementById("list").selectedIndex;
if (x == 0) { return (document.write("<br>test" + bedrag)); }
else { return (document.write("<br>test" + bedrag)); }
}
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<title>Lab 10</title>
<script src="lab10script.js"></script>
</head>
<body>
<form name="form">
<input type="text" name="bedrag" id="bedrag" placeholder="Vul bedrag in" />
<select id="list">
<option>dollar/euro</option>
<option>euro/dollar</option>
<option>ruble/euro</option>
<option>euro/ruble</option>
</select>
<button type="button" onclick="myFunction()">Exchange</button>
</form>
</body>
</html>
Related
Hey guys i put an alert box in to see if the code worked but when I ran it the code did not work. I tried debugging it and I think the issue is on document.getelementbyid (ofbat) but not sure exactly what is wrong there.
Also once the code works how do i add inner html to it so the answer comes out on the same screen? I emphasized the part where i thought the code was not working.
<html !doctype>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Lab7 Baseball Form</title>
<script type="text/javascript">
function calculation() {
var batterName = parseFloat(document.getElementById('battername').value);
*var atBat = parseFloat(document.getElementById)('ofbat').value);*
var ofSingles = parseFloat(document.getElementById)('ofsingles').value);
var ofDoubles = parseFloat(document.getElementById)('ofdoubles').value);
var ofTriples = parseFloat(document.getElementById)('oftriples').value);
var ofHome = parseFloat(document.getElementById)('ofhome').value);
var totalBases = ofSingles *1 + ofDoubles * 2 + ofTriples * 3 + ofHome *4;
var slugPercent =totalBases/ atBat;
alert batterName + slugPercent;
}
</script>
</head>
<body>
<h1>Slugging Percentage Calculator</h1>
<form>
<p>Batter's Name:</p>
<input type="text" id="battername" /><br />
<p>Enter number of At Bats:</p>
<input type="text" id="ofbat" /><br />
<p>Enter number of Singles:</p>
<input type="text" id="ofsingles" /><br />
<p>Enter number of Doubles:</p>
<input type="text" id="ofdoubles" /><br />
<p>Enter number of Triples:</p>
<input type="text" id="oftriples" /><br />
<p>Enter number of Home Runs:</p>
<input type="text" id="ofhome" /><br />
<input type="button" value="Whats his slugging percentage?" onclick="calculation()">
</form>
</body>
</html>
You have syntax errors:
document.getElementById)('ofbat'): ) after Id. Same with all next lines.
alert is also a function so it should be called as alert(argument)
I think I found all syntax errors, if not let me know:
<html !doctype>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Lab7 Baseball Form</title>
<script type="text/javascript">
function calculation() {
var batterName = parseFloat(document.getElementById('battername').value);
var atBat = parseFloat(document.getElementById('ofbat').value);
var ofSingles = parseFloat(document.getElementById('ofsingles').value);
var ofDoubles = parseFloat(document.getElementById('ofdoubles').value);
var ofTriples = parseFloat(document.getElementById('oftriples').value);
var ofHome = parseFloat(document.getElementById('ofhome').value);
var totalBases = ofSingles * 1 + ofDoubles * 2 + ofTriples * 3 + ofHome * 4;
var slugPercent = totalBases / atBat;
alert(batterName + slugPercent);
}
</script>
</head>
<body>
<h1>Slugging Percentage Calculator</h1>
<form>
<p>Batter's Name:</p>
<input type="text" id="battername" /><br />
<p>Enter number of At Bats:</p>
<input type="text" id="ofbat" /><br />
<p>Enter number of Singles:</p>
<input type="text" id="ofsingles" /><br />
<p>Enter number of Doubles:</p>
<input type="text" id="ofdoubles" /><br />
<p>Enter number of Triples:</p>
<input type="text" id="oftriples" /><br />
<p>Enter number of Home Runs:</p>
<input type="text" id="ofhome" /><br />
<input type="button" value="Whats his slugging percentage?" onclick="calculation()">
</form>
</body>
</html>
UPD: edited code some number of times because found one more syntax error. If you haven't seen this line, please check the code again.
JavaScript codes and HTML codes
I'm trying to put a generated value of the qr code a input text to be save in my SQLite database can't pust the darn value of the qr code
var resultDiv;
document.addEventListener("deviceready", init, false);
function init() {
document.querySelector("#startScan").
addEventListener("touchend", startScan, false);
resultDiv = document.querySelector("#results");//works in <p id="results"></p>
resultDiv = document.querySelector('#text4');//wont work at all <input id="text4" type="text" placeholder="Book Info"/>
}
function startScan() {
cordova.plugins.barcodeScanner.scan(
function (result) {
var s = result.text.split('|');
result.format;
result.cancelled;
resultDiv.innerHTML = s;
},
function (error) {
alert("Scanning failed: " + error);
}
);
}
JavaScript codes and HTML codes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>qrBorrowers</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<nav>
<div class="topnav">
Add
Borrow
Return
QR code
</div>
</nav>
<Label>
<h1> Borrow a Book </h1>
</Label>
<div class="borrow">
<input id="text1" type="text" placeholder="Borrower Number" onfocus="this.value=''"/>
<input id="text2" type="text" placeholder="Borrower Last Name" onfocus="this.value=''" />
<input id="text3" type="text" placeholder="Borrower First Name" onfocus="this.value=''" />
<input id="text4" type="text" placeholder="Book Info"/>
<input id="text6" type="date" placeholder="Date Borrowed" />
<br>
</div>
<div class="borrow">
<p id="results"></p>
<button id="startScan">Start Scan</button>
<button id="savedb">Save </button>
</div>
<script type="text/javascript" src="js/scanQR.js"></script>
</body>
</html>
With inner HTML it will not going to save your generated QR code to input box. You need to change the innerHTML to value to save the value in input box such that you can use that when form submit as value to save in database.
var resultDiv;
document.addEventListener("deviceready", init, false);
function init() {
document.querySelector("#startScan").
addEventListener("touchend", startScan, false);
resultDiv = document.querySelector("#results");//works in <p id="results"></p>
resultDiv = document.querySelector('#text4');//wont work at all <input id="text4" type="text" placeholder="Book Info"/>
}
function startScan() {
cordova.plugins.barcodeScanner.scan(
function (result) {
var s = result.text.split('|');
result.format;
result.cancelled;
resultDiv.value = s;
},
function (error) {
alert("Scanning failed: " + error);
}
);
}
JavaScript codes and HTML codes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>qrBorrowers</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<nav>
<div class="topnav">
Add
Borrow
Return
QR code
</div>
</nav>
<Label>
<h1> Borrow a Book </h1>
</Label>
<div class="borrow">
<input id="text1" type="text" placeholder="Borrower Number" onfocus="this.value=''"/>
<input id="text2" type="text" placeholder="Borrower Last Name" onfocus="this.value=''" />
<input id="text3" type="text" placeholder="Borrower First Name" onfocus="this.value=''" />
<input id="text4" type="text" placeholder="Book Info"/>
<input id="text6" type="date" placeholder="Date Borrowed" />
<br>
</div>
<div class="borrow">
<p id="results"></p>
<button id="startScan">Start Scan</button>
<button id="savedb">Save </button>
</div>
<script type="text/javascript" src="js/scanQR.js"></script>
</body>
</html>
To save the value in input box should not use "resultDiv.innerHTML = s;"
Rather you should use "resultDiv.value = s" which will save your code to input box which you can use to save in SQLite Database.
Hi I want to get the innerHTML of a div that contains input elements with input values.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="test">
<input type="text" id="in" />
</div>
<p id="pid">
un texte.<input type="text" id="in" />
</p>
<input type="submit" id="in" onclick="afficher();" />
<script>
function afficher()
{
var t=document.getElementById("test");
alert(t.innerHTML);
var x = document.getElementById("pid");
alert(x.innerHTML);
}
</script>
</body>
</html>
I want to get the inserted text in the inputs elements.
A piece of code can do the magic.
onblur='javascript:this.setAttribute("value",this.value)' value=""
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="test">
<input type="text" id="in" onblur='javascript:this.setAttribute("value",this.value)' />
</div>
<p id="pid">
un texte.<input type="text" id="in" onblur='javascript:this.setAttribute("value",this.value)' value=""/>
</p>
<input type="submit" id="in" onclick="afficher();" />
<script>
function afficher()
{
var t=document.getElementById("test");
alert(t.innerHTML);
var x = document.getElementById("pid");
alert(x.innerHTML);
}
</script>
</body>
</html>
function afficher()
{
var t=document.getElementById('test').querySelectorAll("input");
console.log(t[0].value);
var t=document.getElementById('pid').querySelectorAll("input");
console.log(t[0].value);
}
<div id="test">
<input type="text"/>
</div>
<p id="pid">
un texte.<input type="text" />
</p>
<input type="submit" id="in" onclick="afficher();" />
Get div/p element using getElementById then use querySelectorAll to get input element. To get the value use input.value
This is my code and in it I am using two <textbox> and two <button> tags. The goal is that I want to increment the value in a <textbox> after clicking on its respective buttons:
<!DOCTYPE html>
<html>
<head>
<title> My first increment </title>
</head>
<body>
<input type="text" name="TextBox" id="TextBox1" value="0" />
<input type="Button" id='AddButton1' value="+" />
<input type="text" name="TextBox" id="TextBox2" value="0" />
<input type="Button" id='AddButton2' value="+" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script>
$(document).ready(function(){
var i = 1;
$('#AddButton'+i).click( function() {
var counter = $('#TextBox'+i).val();
counter++ ;
$('#TextBox'+i).val(counter);
});
i++;
});
</script>
</body>
My problem is that I am not able to increment the value in a loop.
For a single <textbox> the inner value is being incremented, but when I use i++ the behavior is not repeated.
The thing is, you're not really doing anything to find the Id. You can't just increment nothing. This is how I'd do it:
<!DOCTYPE html>
<html>
<head>
<title> My first increment </title>
</head>
<body>
<input type="text" name="TextBox" id="TextBox1" value="0" />
<input type="Button" id='AddButton1' value="+" />
<input type="text" name="TextBox" id="TextBox2" value="0" />
<input type="Button" id='AddButton2' value="+" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script>
$(document).ready(function(){
$('#AddButton1, #AddButton2').click( function(){
var id = $(this).attr('id').replace(/AddButton/, '');
var num = parseInt($('#TextBox' + id).val());
num++;
$('#TextBox' + id).val(num);
});
});
</script>
</body>
Try this code:
$(document).ready(function(){
$('[id^="AddButton"]').click(function() {
var counter = $(this).prev().val();
counter++ ;
$(this).prev().val(counter);
});
});
I am newbie to Javascript... and I am unable to get from input to js variable, I referred to the questions asked here before still I unable to get the information. My code is as follows:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS </title>
<body>
<form>
<input type="text" id="amount" placeholder="Amount">
<button type="button" onclick="calc()">Submit</button>
</form>
<h1 id="TotalAmout"></h1>
<script>
function calc() {
var amt = document.getElementById("amount").value;
document.getElementById("TotalAmount").innerHTML = amt;
}
</script>
</body>
</html>
Typo in H1 TotalAmout should be TotalAmount
Calc should be defined before calling it. Fiddle
<head>
function calc() {
var amt = document.getElementById("amount").value;
document.getElementById("TotalAmount").innerHTML = amt;
}
</head>
<body>
<form>
<input type="text" id="amount" placeholder="Amount">
<button type="button" onclick="javascript:calc()">Submit</button>
</form>
<h1 id="TotalAmount"></h1>
</body>
You have a typo in your H1's ID. It should probably match the TotalAmount in your javascript.
Two things:
typo in "TotalAmout" and "TotalAmount"
function needs to be defined prior to calling it
see here: https://jsfiddle.net/zLguL6fu/:
<form>
<input type="text" id="amount" placeholder="Amount">
<button type="button" onclick="calc(); return false;">Submit</button>
</form>
<h1 id="TotalAmount"></h1>
function calc() {
var amt = document.getElementById("amount").value;
document.getElementById("TotalAmount").innerHTML = amt;
}
please use this code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS </title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<form>
<input type="text" id="amount" placeholder="Amount">
<button type="button" onclick="calc()">Submit</button>
</form>
<h1 id="TotalAmout"></h1>
<script>
function calc() {
var amt = $("#amount").val();
$("#TotalAmout").html(amt);
}
</script>
</body>
</html>
and you also required add jquery js in head
<form>
<input type="text" id="amount" placeholder="Amount">
<button type="button" onclick="calc();return false">Submit</button>
</form>
<h1 id="TotalAmout"></h1>
<script>
function calc() {
var amt = $("#amount").val();
$("TotalAmount").html(amt);
}
</script>