I've written a js to do some math, just some simple stuff, and it is working fine when I'm using firefox, but when I try to use it with another browser - it dosen't. I'm new to html and js. Below is the whole thing.
code:
<!DOCTYPE html>
<html>
<head>
<title>Forkalkulator</title>
</head>
<body>
<p><b>Forkalkulator </b> </p>
<form action="history.go()" method="post" enctype="multipart/form-data">
<label for="vekt">Hundens vekt:</label>
<input type="number" name="vekt" id="vekt" placeholder="vekt"><br>
<label for="prisvf">Pris på våtforet:</label>
<input type="number" name="vfor_pris" id="vfor_pris" placeholder="pris pa vatfor"><br>
<label for="pristf">Pris på tørforet;:</label>
<input type="number" name="tfor_pris" id="tfor_pris" placeholder="pris pa torrfor"><br>
<label for="fett">Fettprosent;</label>
<input type="number" name="tfor_fett" id="tfor_fett" placeholder="fett i torrfor">
<label for="karb">Prosent karbohydrater</label>
<input type="number" name="tfor_karb" id="tfor_karb" placeholder="karb i torrfor">
<label for="protin">Proteinprosent</label>
<input type="number" name="tfor_prot" id="tfor_prot" placeholder="prot i torrfor"> <br>
<input type="button" value="OK" onClick="history.go()">
<input type="reset" value="Reset" onClick="history.go()">
</form>
<script language="javascript">
//henter verdien av input
var vekt = document.getElementById('vekt').value;
var pris = document.getElementById('vfor_pris').value;
//for å regne ut vedlikeholdsbehovet
var vedlike = vekt * 134 * 0.75;
//document.write(vekt);
document.write ('<br>Vedlikeholdsbehov ' + vedlike + ' kcal');
//regne ut antall gram med vom iht. vedlikeholdsbehov
var gram = vedlike/2.3;
var gram2 = gram.toFixed(2);
//torrfor
var tfor_fett = document.getElementById('tfor_fett').value / 100;
var tfor_karb = document.getElementById('tfor_karb').value / 100;
var tfor_prot = document.getElementById('tfor_prot').value / 100;
var tfor_tot = tfor_fett + tfor_karb + tfor_prot;
//regne ut hvor mange kcal utifra naeringsinnhold
var tfor_fett_kcal = tfor_fett * 9;
var tfor_karb_kcal = tfor_karb * 4.5;
var tfor_prot_kcal = tfor_prot * 4.5;
var tfor_tot_kcal = tfor_fett_kcal + tfor_karb_kcal + tfor_prot_kcal;
var tfor_tot_kcal2 = tfor_tot_kcal /1000;
//document.write('<br><br><br><b> torrfor </b> ' + tfor_tot_kcal + ' <br><br>');
//document.write('<br><br><br>total kcal ' + vfor_tot_kcal);
var kg = gram / 1000;
var pris_hund = kg * pris;
var pris_hund2 = pris_hund.toFixed(2);
document.write('<br><br><h3>Vom </h3>');
document.write('<br><br>Antall gram med vom: ' + gram2);
document.write('<br><br>Pris per hund: ' + pris_hund2);
var tfor_gram = vedlike / tfor_tot_kcal;
var tfor_gram2 = tfor_gram.toFixed(2);
var tfor_kg = tfor_gram / 1000;
var tfor_pris = document.getElementById('tfor_pris').value;
var tfor_pris2 = tfor_pris * tfor_kg;
var tfor_pris3 = tfor_pris2.toFixed(2);
document.write('<br><br><h3>Tørrfor </h3>');
document.write('<br><br>Antall gram med torrfor: ' + tfor_gram2);
document.write('<br><br>Pris per hund: ' + tfor_pris3);
</script>
</body>
</html>
I'm surprised that it's working at all.
The basic code is fine, good job! The problem is that your script is looking up the values from the form as soon as the script runs--which is about the moment everything becomes visible on the page.
So essentially, your script is calculating the values of an empty form.
To fix: put all of the script into a Javascript function. Then add a button to the form that will invoke the function.
This SO question shows you how to add an onlick handler to do it.
Related
I put my JavaScript inside tags instead of externally(because external files weren't working) and for some reason my code is not running.
Just to be sure that it wasn't a problem with the code itself, I put a simple alert before all the code and nothing popped up.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Fahrenheit/Kelvin Converter</h1>
<div id = "first" class = "oneof">
<h2>Kelvin to Fahrenheit</h2>
<input type = "text" placeholder = "Enter Kelvin here" id = "kinput">
<button id = "ksubmit">Submit Kelvin</button><br><br>
<textarea id = "fpopup" rows = "5" cols = "50"></textarea>
</div>
<div id = "second" class = "oneof">
<h2>Fahrenheit to Kelvin</h2>
<input type = "text" placeholder = "Enter Fahrenheit here" id = "finput">
<button id = "fsubmit">Submit Fahrenheit</button><br><br>
<textarea id = "kpopup" rows = "5" cols = "50"></textarea>
</div>
<script>
alert("Hello World"); //Testing JS
if(6==6){
alert("ua");
}
function ftok(f){
k = (f − 32) * 5/9 + 273.15;
return k;
}
function ktof(k){
f = (K − 273.15) * 9/5 + 32;
return f;
}
document.getElementById("ksubmit").onclick = function() {
document.getElementById("fpopup").value = document.getElementById("kinput").value + " degrees Kelvin is " + ktof(Number(document.getElementById("kinput").value)) + " degrees Fahrenheit"
}
document.getElementById("fsubmit").onclick = function() {
document.getElementById("kpopup").value = document.getElementById("finput").value + " degrees Fahrenheit is " + ftok(Number(document.getElementById("finput").value)) + " degrees Kelvin"
}
</script>
</body>
</html>
You can use DOMContentLoaded function to make sure the HTML is ready and parsed properly. Also you have some syntax errors which i have fixed as well.
Also, You were using some weird minus and multiplication characters.
The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed
Your code is now working as expected.
Live Demo:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Fahrenheit/Kelvin Converter</h1>
<div id="first" class="oneof">
<h2>Kelvin to Fahrenheit</h2>
<input type="text" placeholder="Enter Kelvin here" id="kinput">
<button id="ksubmit">Submit Kelvin</button><br><br>
<textarea id="fpopup" rows="5" cols="50"></textarea>
</div>
<div id="second" class="oneof">
<h2>Fahrenheit to Kelvin</h2>
<input type="text" placeholder="Enter Fahrenheit here" id="finput">
<button id="fsubmit">Submit Fahrenheit</button><br><br>
<textarea id="kpopup" rows="5" cols="50"></textarea>
</div>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
if (6 == 6) {
alert("ua");
}
function ftok(f) {
var k = (f - 32) * 5 / 9 + 273.15;
return k;
}
function ktof(k) {
var f = (k - 273.15) * 9 / 5 + 32;
return f;
}
document.getElementById("ksubmit").onclick = function() {
document.getElementById("fpopup").value = document.getElementById("kinput").value + " degrees Kelvin is " + ktof(Number(document.getElementById("kinput").value)) + " degrees Fahrenheit"
}
document.getElementById("fsubmit").onclick = function() {
document.getElementById("kpopup").value = document.getElementById("finput").value + " degrees Fahrenheit is " + ftok(Number(document.getElementById("finput").value)) + " degrees Kelvin"
}
})
</script>
</body>
</html>
Prints '2 x 10 = 20' but not the whole table when the input is 2. I tried various means. But the result is same.
No error. Just like to print the whole multiplication table.
function loop() {
var i = 1;
var x = document.getElementById("num").value;
//document.getElementById("result").value = result;
while (i <= 10) {
document.getElementById("result").value = x + " x " + i + " = " + i * x;
i++;
}
}
<h1>While loop: </h1>
<p>The while loop keeps repeating an action until an associated condition returns false.</p>
<img src="images/loop.jpg" /><br/>
<img src="images/loop2.jpg" /><br/>
<body>
<p>JavaScripts Runs:</p>
<script src="while_1loop.js">
</script><br/> What number table would you like to have?<input type="number" name="" id="num" /><br>
<button type="button" onclick="loop()" ;>Start</button><br>
<textarea rows="12" cols="15" id="result" readonly>
</textarea><br/>
You are always changing the value of 'result' rather than adding to it:
function loop() {
var i = 1;
var x = document.getElementById("num").value;
//document.getElementById("result").value = result;
while (i <= 10) {
var result = document.getElementById("result");
var sum = document.createTextNode(x + " x " + i + " = " + i * x + "\n");
result.appendChild(sum);
i++;
}
}
<h1>While loop: </h1>
<p>The while loop keeps repeating an action until an associated condition returns false.</p>
<img src="images/loop.jpg" /><br/>
<img src="images/loop2.jpg" /><br/>
<body>
<p>JavaScripts Runs:</p>
<script src="while_1loop.js">
</script><br/> What number table would you like to have?<input type="number" name="" id="num" /><br>
<button type="button" onclick="loop()" ;>Start</button><br>
<textarea rows="12" cols="15" id="result" readonly>
</textarea><br/>
If I understand what you mean,
You rewrite whole textarea with this code:
document.getElementById("result").value = x + " x " + i + " = " + i * x;
but you need add new result after older results. Something like this:
var oldValue = document.getElementById("result").value;
var result = x + " x " + i + " = " + i * x;
document.getElementById("result").value = oldValue + '\n' + result;
I have created dynamic input elements using the JavaScript below:
while(count<n-2){
if(dataArray[count+1]=='String')
var txt = "Argument:"+(count+1)+", Prefix: <input type=\"text\" name=\"prefix[]\">, Default value: <input type=\"text\" name=\"defaultval[]\" id=\"defaultval[]\"> <br>";
else if(dataArray[count+1]=='File')
var txt = "Argument:"+(count+1)+", Prefix: <input type=\"text\" name=\"prefix[]\">, Default file: <input type=\"file\" name=\"fileToUpload[]\" id=\"fileToUpload[]\"> <br>";
$("#dynamic_element").append(txt);
count++;
}
How to get values of the created inputs using jQuery?
I mean something like this inside a function:
function myFunc(){
var x0 = $('#defaultval[0]').val();
var y0= $('#fileToUpload[0]').val();
}
Square parentheses aren't valid characters for ids. Either remove them or, instead, use:
var x0 = $('input[id="defaultval[0]"]').val();
var y0 = $('input[id="fileToUpload[0]"]').val();
Working example:
var x0 = $('input[id="defaultval[0]"]').val();
var y0 = $('input[id="fileToUpload[0]"]').val();
$('#example1').text('value of "defaultval[0]": ' + x0);
$('#example2').text('value of "fileToUpload[0]": ' + y0);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="defaultval[0]" name="defaultval[0]" value="0">
<input type="text" id="fileToUpload[0]" name="fileToUpload[0]" value="1">
<br>
<span id="example1"></span>
<br>
<span id="example2"></span>
Trying to have it so that when the user hit's submit it will show their info inputted and calculated volume/cost that's done in javascript. However the submit button isn't showing anything when clicked. Sorry for my poor english and if it's not clear. Let me know if you need anything clarified. Here's the related code:
HTML:
<form name="landscape" action="index.html" onsubmit="return validateForm()" method="post">
...
...
<h3>Type of Planter:</h3>
<input type="radio" name="inputcontrol" value="10" id="inputcontrol1" onchange="setvisible(this.value)">Square/Rectangular Cubes
<input type="radio" name="inputcontrol" value="12" id="inputcontrol2" onchange="setvisible(this.value)">Flat bottmed cylinders
<br>
<input type="radio" name="inputcontrol" value="15" id="inputcontrol3" onchange="setvisible(this.value)">1/2 Spherical
type="radio" name="inputcontrol" id="inputcontrol4" value="20" onchange="setvisible(this.value)">Truncated Cone
<br>
<br>
Length:<p><input type="text" size="10" id="set1" style="visibility:hidden;" ></p>
Width:<p><input type="text" size="10" id="set2"style="visibility:hidden;" ></p>
Height:<p><input type="text" size="10" id="set3"style="visibility:hidden;" ></p>
Radius:<p><input type="text" size="10" id="set4"style="visibility:hidden;" ></p>
Radius2:<p><input type="text" size="10" id="set5"style="visibility:hidden;" ></p>
<input type=submit value="Submit" onClick="buttonandchecks();">
</form>
<br>
<br>
<h2>Order Form: </h2><h2><span id="result"></span></h2>
</body>
</html>
JAVASCRIPT:
function buttonandchecks()
{
var x;
var radio_value;
var planter="";
var infooutput="";
var total=parseFloat(0);
var volume=parseFloat(0);
var length = document.getElementById("set1").value;
var width = document.getElementById("set2").value;
var height = document.getElementById("set3").value;
var radius = document.getElementById("set4").value;
var radius2 = document.getElementById("set5").value;
var inputcontrol1 = document.getElementById("inputcontrol1");
var inputcontrol2 = document.getElementById("inputcontrol2");
var inputcontrol3 = document.getElementById("inputcontrol3");
var inputcontrol4 = document.getElementById("inputcontrol4");
for(x=0;x<document.landscape.inputcontrol.length;x++)
{
if(document.landscape.inputcontrol[x].checked)
{
radio_value=document.lanscape.inputcontrol[x].value;
}
}
radio_value=parseFloat(radio_value);
if(inputcontrol1.checked)
{
volume = length * width * height;
planter = "Square/Rectangular Cubes";
}
if(inputcontrol2.checked)
{
volume = 3.14 * radius * radius * height;
planter = "Flat bottomed cylinders";
}
if(inputcontrol3.checked)
{
volume = 1/2 * (4/3* 3.14 * radius * radius * radius);
planter = "1/2 Spherical";
}
if(inputcontrol4.checked)
{
volume = 1/3*3.14*(radius*radius*radius*radius2*radius2*radius2)*height;
planter = "Truncated cone";
}
total=radio_value * volume;
infooutput=("Firstname: " + (Text1).value + " Lastname: " + (Lname).value + " \nAddress: " + (Add).value + " \nPostal Code: " + (StPrv).value + "\n\n Planter: " + planter + "\nLength: " + length + " Width: " + width + " Height: " + height + " radius: " + radius + " 2nd radius: " + radius2 + "\n Volume: " + volume + "\n Total: " + total);
document.getElementById("result").innerHTML=infooutput;
}
Any help would be greatly appreciated. Sorry if my code isn't that good, I just started learning a week ago. Thank you!
Theres a few things that need updating.
HTML
Your last input is not structured correctly.
type="radio" name="inputcontrol" id="inputcontrol4" value="20" onchange="setvisible(this.value)">Truncated Cone
Instead, try:
<label><input type="radio" name="inputcontrol" id="inputcontrol4" value="20" onchange="setvisible(this.value)" />Truncated Cone</label>
JavaScript
Things like document.landscape.inputcontrol[x].checked and (Text1).value are not valid ways to access DOM elements. Instead, try document.getElementById() or document.getElementsByName()
For example, change
for(x=0;x<document.landscape.inputcontrol.length;x++)
{
if(document.landscape.inputcontrol[x].checked)
{
radio_value=document.lanscape.inputcontrol[x].value;
}
}
To this: (notice the bracket positions and indents for readability)
checkboxes = document.getElementsByName('inputcontrol');
for(x=0;x<checkboxes.length;x++) {
if(checkboxes[x].checked) {
radio_value=checkboxes[x].value;
}
}
Finally, if your validateForm() function is going to return true, then your form will post to index.html and the page will load losing anything that happened in buttonandchecks(). Instead, you may need to have that method return false, or remove the form tag.
For some examples of those changes, you can see it working in this JS Fiddle: https://jsfiddle.net/igor_9000/qfz6dr25/2/
Hope that helps!
Our company has a client that requires a specific checksum on their bar codes. I've come up with the following which allows the user to enter the distributor part number, our part number and our serial number. Right now, when you click save, it will calculate correctly for the bar code with the checksum. NOW, we have added a quantity box so that we can print x number of barcodes with our serial number incrementing by 1. (i.e. 1st serial number is 000001, next will be 000002 and so on). What I've been trying to do for the last week is alter this code so the user can input the part numbers and sn, and it will calculate each bar code up to the quantity.
This is what we would like to have:
If user enters part numbers, first serial number and quantity then clicks "Save" this should be the result. At present, this can only be achieved by entering each serial number and clicking save
*note: while the quantity can be entered, the actual value has not been used in my code...yet
So, to achieve this, I need to find a way to increment the serial numbers without dropping off the leading zeros but maintaining the length of qty.length.
I also need to figure out how to loop each new serial number through with part numbers to get the correct checksum for the bar code. After a week of staring at this, I'm hoping some fresh and experienced eyes can assist. Here is my code.
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Capture Form Fields to CSV</title>
<script type="text/javascript">
<!--
function saveValues() {
var frm = document.form1;
var str = frm.text1.value + frm.text2.value + frm.text3.value;
var dpn = frm.text1.value;
var wpn = frm.text2.value;
var wsn = frm.text3.value;
var strArray = str.split("");
var calcArray = strArray;
var total =0;
for (var i = 0; i < str.length; i++)
strArray[i] = strArray[i].charCodeAt(0);
for (var i = 0; i < strArray.length; i++){
if (strArray[i] >= 65 && strArray[i] <= 90){
calcArray[i] = (strArray[i] - 64) * (i+1)
}
else if (strArray[i] >=97 && strArray[i] <=122) {
calcArray[i] = (strArray[i] - 96) * (i+1)
}
else if (strArray[i] >=48 && strArray[i] <=57) {
calcArray[i] = (strArray[i] - 48) * (i+1)
}
else {
calcArray[i] = 1 * (i+1)
}
}
for (var i in calcArray){
total += calcArray[i];}
var mod2 = str.length - (2*(Math.floor(str.length/2)));
var mod10 = (total + mod2) - (10*(Math.floor((total + mod2)/10))) ;
var chk = mod10;
var record = ""
+ dpn + "," + wpn + "," + wsn + "," +dpn + "~" + wpn + "~" + wsn + "~" + chk + "\n";
frm.textarea1.value += record;
}
function clearText() {
document.form1.textarea1.value = "";P
form1.text1.value = "";
form1.text2.value = "";
form1.text3.value = "";
}
function csvSave() {
var a = document.createElement('a');
with (a) {
href='data:text/csv;base64,' + btoa(document.getElementById('textarea1').value);
download='csvfile.csv';
}
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
//-->
</script>
</head>
<body>
<h1>Capture Form Fields to CSV</h1>
<form name="form1" >
<p>
Distributor Part Number: <input name="text1" type="text" value="GDM1301" /><br />
Our Part Number: <input name="text2" type="text" value="PCBDM160"/><br />
Our Serial Number: <input name="text3" type="text" value="000001"/><br />
Label Quantity: <input name="qty" type="text" value="3"/>
</p>
<p>
<input name="save" type="button" value="Save"
onclick="saveValues(); return false"/>
<input name="clear" type="button" value="Clear"
onclick="clearText(); return false"/>
<button onclick="csvSave()">CSV</button>
</p>
<p>
<i>Click 'Save' to add content</i><br />
<textarea id="textarea1" cols="80" rows="20"></textarea>
</p>
</form>
</body>
</html>