I'm doing this for a class. The point is to show how to boil water in programming... idk it's weird but you can look at my code and see what's up. It has a purpose but I don't have time to explain. please don't make any big changes. I want it to run the way it is not how it should be done or whatever. I'm not the best with javascript so please don't judge as much.
issue
it the first input works fine so no worries about that. It's my form that has issues.... what's supposed to happen is I type one of the variables in and it'll display what ever pour says. But when I go to submit it doesn't work whatsoever... just restarts the page! I give so far.... because I obviously don't know what's wrong :P something stupid probably. Thanks!
code
<html>
<head>
<title>
Boiling Water
</title>
</head>
<body bgcolor='#000000'>
<center>
<font color='#ffffff' size='8'><b>D.W.B.A</b>
<br>
Digital</font> <font color='#00ffff' size='8'>Water</font><font color='#ffffff' size='8'> Boiling Association</font>
<br>
<font size='3' color='#ffffff'>Programmed in JavaScript</font>
<br>
<br>
<br>
<p><font color='#ffffff' size='4'>Grab 1 of 56 Cups From the Kitchen Cabinet!</font></p>
<font color='#ff0000' size='4'><p id="cup"><input type='button' value='Obtain Cup' onclick='cup()' /></p></font>
<script>
function cup() {
var cabinet=56;
var quantity=55;
var obtain=cabinet-quantity;
var cupP=document.getElementById("cup")
cupP.innerHTML="You have Obtained " + obtain + " Cup";
}
</script>
<script>
function fill() {
var x=document.getElementById("calculate").value;
var optionzero=0;
var optionone=25;
var optiontwo=50;
var optionthree=75;
var optionfour=100;
if (optionzero) {
pour="Please Pour contents into your Cup";
} else if (optionone) {
pour="You have filled the Cup 1/4 of the way with water";
} else if (optiontwo) {
pour="You have filled the Cup 2/4 or 1/2 of the way with water";
} else if (optionthree) {
pour="You have filled the cup 3/4 of the way with water";
} else if (optionfour) {
pour="Your cup is filled (4/4 of the way) with water";
}
document.getElementById("fillup").innerHTML=pour;
}
</script>
<br>
<form type='input' >
<font color='#ffffff' size='4'>Fill the Cup with Water per 25% out of 100% Ex) 25%, 75%, etc. </font>
<br>
<br>
<input type='text' id='calculate'>
<br>
</form>
<input type='submit' value='Calculate' onclick='fill()' />
<br>
<font color='#ffffff'><p id='fillup'>
</p></font>
</center>
</body>
</html>
Simply try not submitting the form. You can either return false; from the fill function and change your inline handler to onclick='return fill()' or simply change the whole input for:
<button type='button' onclick='fill()'>Calculate</button>
Submitting the form is mostly useful when you want to send information to a server-side process which you don't need to do there.
Your form is submitting to the current page. You should probably move your fill() to onsubmit for the form. Also, make sure that function returns false, or the form will still submit.
Related
I'm 3 days into learning Javascript and im really excited to understand more of this language, before i started i've done a basic HTML & CSS education. I'm currently on a 2 year program in a University in Sweden.
I'm trying to create a very basic calculator, that for now only adds 2 numbers together. I have 1 box, and another box. I want to make that each number written in each of these boxes is displayed as the total of box1, box2 in the third and final box.
At this moment i get "NaN" in the 3rd box when trying to add 2+3.
As i said, I'm really new and i appreciate all help i can get, and note that im not here for anyone to do my assignments which we have plenty of, i am really interessted in learning and understanding the language because i would like to work with this later in life when im done with my education.
Cheers!
<h1>Addera två tal med varandra</h1>
<form>
<input type="text" value="0" id="tal1" /> <br>
<input type="text" value="0" id="tal2" /> <br>
<input type="button" value="Beräkna" onClick="kalkylera();" />
<p>Den totala summan är</p>
<input type="text" value="0" id="svar" />
</form>
<script>
function kalkylera() {
//Get the two numbers entered in the box
var ForstaTalet = document.getElementById("tal1").value;
var AndraTalet = document.getElementById("tal2").value;
//Count the two entered numbers together
var svar = tal1 + tal2;
//Show result
document.getElementById("svar").value = svar;
}
</script>
PS, I'm not sure why "//# sourceURL=pen.js" is written i the bottom of the calculator when adding this to the codepen, that is not how it looks when viewing it in chrome.
Thanks in advance.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Calculator</title>
</head>
<body>
<form>
<input type="text" placeholder='num1' id="tal1"/> <br>
<input type="text" placeholder='num2' id="tal2"/> <br>
<input type="button" value="Add" onClick="sum()"/>
<input type="text" placeholder='sum' id="svar"/>
</form>
<script>
function sum()
{
var ForstaTalet = parseFloat(document.getElementById("tal1").value);
var AndraTalet = parseFloat(document.getElementById("tal2").value);
var svar = ForstaTalet + AndraTalet;
document.getElementById("svar").value = svar;
}
</script>
</body>
</html>
This works fine.
You need to cast your values as float with parseFloat and use the right variables as in the following example:
//Get the two numbers entered in the box
var ForstaTalet = parseFloat(document.getElementById("tal1").value);
var AndraTalet = parseFloat(document.getElementById("tal2").value);
//Count the two entered numbers together
var svar = ForstaTalet + AndraTalet;
//Show result
document.getElementById("svar").value = svar;
I am currently creating a program that can calculate bmi with javascript. I am not sure why but it is not working properly. I must be missing something but I am not sure what it is. If someone could help me I would really appreciate it. Thank you.
<!DOCTYPE html>
<!-- -->
<html>
<head>
<meta charset="UTF-8" />
<title>Body Mass Index</title>
</head>
<BODY>
<header><img src="bmi.jpeg" width="380" height="132" border="0" alt="bmi"></header>
<video controls="controls"
width="320px" height="260px">
<source src="bmi.mp4"/>
<p>When it comes to weight loss, there's no lack of fad diets promising fast results. But such diets limit your nutritional intake, can be unhealthy, and tend to fail in the long run.</p>
<p>The key to achieving and maintaining a healthy weight isn't about short-term dietary changes. It's about a lifestyle that includes healthy eating, regular physical activity, and balancing the number of calories you consume with the number of calories your body uses.</p>
<p>BMI is a number calculated from a person's weight and height. BMI provides a reliable indicator of body fatness for most people and is used to screen for weight categories that may lead to health problems.</p>
<p>The BMI ranges are based on the relationship between body weight and disease and death.
Overweight and obese individuals are at increased risk for many diseases and health conditions, including the following:</p>
You need a flash player to view this video.
</video>
<ul>
<li>Hypertension</li>
<li>Dyslipidemia (for example, high LDL cholesterol, low HDL cholesterol, or high levels of triglycerides)</li>
<li>Type 2 diabetes</li>
<li>Coronary heart disease</li>
<li>Stroke</li>
<li>Gallbladder disease</li>
<li>Osteoarthritis</li>
<li>Sleep apnea and respiratory problems</li>
<li>Some cancers (endometrial, breast, and colon)</li>
</ul>
<script type="text/javascript">
function CalculateBMI(){
var inch=12;
var ft;
var bmi= Math.write(weight*703)/ (inch height)^2;
if(bmi<=19)
{"Underweight";
}
if else(19<bmi<=25)
{"Desirable";
}
if else(25<bmi<=29)
{"Prone to health risks";
}
if else (29<bmi<=40)
{"obese"
}
else(40<bmi)
{"Extremely Obese"
}
}
</script>
<form name="bmi">
<p> Weight:<p/></td> <td><input type="text" id="weight" name="weight" size="25" />
<p>Height:</p> <input type="text" id="textbox" name="textbox" size="25" /><td><p>Ft.</p><input type="text" id="textbox" name="textbox" size="25" /> <p>In.</p>
<input type="submit" id="Calculate BMI" name="Calculate BMI" value="Calculate BMI" size="25" onclick="CalculateBMI()" />
According to the Panel on
Energy, Obesity, and Body Weigth Standards published by
American Journal of Clinical Nurttrition, your category is:
<input type="text" id="textbox" name="textbox" size="25" />
</form>
</BODY>
</html>
I see a few things that are likely causing your issue. Lets start with this statement:
var bmi= Math.write(weight*703)/(inch height)^2;
You are not defining weight or height (you have to tell it to look in the textbox or send it to the function it does not automatically know you are referring to a textbox). I would expect something like
var weight = document.getElementById('weight').value;
There is no Symbol between height and weight, which is throwing a syntax error, you need to do something with these if they are going to be together (and do realize this is not adding the inches just calculating the feet in inches).
var bmi= (weight*703)/(inch*height)^2;
After that you are using if else - which is not valid in Javascript you would want to say:
else if (19<bmi<=25)
Lastly you are not returning a value nor specifying WHERE the value should go.
var results;
if (bmi<=19)
{
results = "Underweight"
}
document.getElementById('results').value = results;
Try implementing some of these suggestions and see if that gets you on the right track.
Your javascript had several systemic errors
for example 1<a<12 is not valid, it should be written a>1 && a<12
also, your CalculateBMI function had no idea what weight height in inches or height in feet where. You can include JQuery to make this easier but document.getElementById also works. To accomplish this I also gave meaningful names to your form variables.
You were not displaying the resulting string anywhere. Using getElementById you can also find the result element in your html and set its value to the result of the calculation.
If you don't want the page to refresh when you submit you have to set your form to receive a false value onsubmit.
Your math syntax for the bmi was off, I'm assuming it should be (703 * weight ) (height)^2 where height is in inches (after the foot and inch height variables have been combined).
The cleaned up Javascript should look like this. Note that this is probably not the best way to go about solving this problem.
edit: I think your BMI calculation was off as well. If the input weight and height are imperial (ie inch and lbs) then the inches should be multiplied by 0.025 to get meters and lbs should be multiplied by 0.45 to get kgs.
bmi= (weight_e* 0.45) / (((12*heightf_e)+heighti_e) * 0.025)^2;
function CalculateBMI(){
// To avoid erros due to hoisting define all
// of your vars at the top of your function
var ft,
bmi,
heighti_e, // height in inches
heightf_e, // height in feat
weight_e,
bmi_e, // the bmi element
bmi;
// Use getElementById to get a reference for the
// elements you will be using in your function
heighti_e=document.getElementById("heighti");
heightf_e=document.getElementById("heightf");
weight_e=document.getElementById("weight");
bmi_e=document.getElementById("bmi");
// Not all of these parenthesis are necessary but it
// helps to clear up the order of operation and avoid
// silly mistakes in long equations that are not
// broken up into several lines
bmi= (weight_e* 0.45) / (((12*heightf_e)+heighti_e) * 0.025)^2;
// set bmi to a string value
if(bmi<=19)
{
bmi="Underweight";
}
else if(bmi>19 && bmi<=25)
{
bmi="Desirable";
}
else if(bmi>25 && bmi<=29)
{
bmi="Prone to health risks";
}
else if (bmi>29 && bmi<=40)
{
bmi="obese";
}
else(bmi>40)
{
bmi="Extremely Obese";
}
bmi_e.value=bmi; // bmi_a is the reference to the
// element in your form with the
// bmi id
return false; // make sure you return false to prevent
// page reload
}
I have not cleaned up your HTML form, but at least it now works. I have moved the submission action from the button to the form tag. I have also given the height weight and bmi inputs meaningful id names so we can reference them in the CalculateBMI function.
<form action="" name="bmi" onsubmit="return CalculateBMI()">
<p> Weight:<p/></td> <td><input type="text" id="weight" name="weight" size="25" />
<p>Height:</p> <input type="text" id="heightf" name="textbox" size="25" /><td><p>Ft.</p><input type="text" id="heighti" name="textbox" size="25" /> <p>In.</p>
<input type="submit" id="Calculate BMI" name="Calculate BMI" value="Calculate BMI" size="25" />
According to the Panel on
Energy, Obesity, and Body Weigth Standards published by
American Journal of Clinical Nurttrition, your category is:
<input type="text" id="bmi" name="textbox" size="25" />
</form>
new to HTML5 in general so sorry if this is an easy fix :)
I have this HTML file that takes 4 user inputs (integers) and times them by 4 other variables, then adds up the new variables and outputs it into a HTML via document.getElementById("out").innerHTML When I run the HTML in chrome it does nothing at all, and I dont know why, Adobe Dreamweaver is not flagging up any errors at all and it runs fine in browser as far as I can tell.
If you do fix it would you please try and explain what you are doing and why it works and try to keep my code in its form so I can still understand it (hopefully that made sense?)
Here is my code in its entirety-
<!doctype html>
<html>
<body>
<h1><font face="arial">How much space do you need?</font></h1>
<h2><font face="arial">Number of Files: </font></h2>
<form id="filenum">
<font face="arial"> Documents: <input type="int" name="doc" value="0"><br></font>
<font face="arial"> Photos: <input type="int" name="photo" value="0"><br></font>
<font face="arial"> Music: <input type="int" name="music" value="0"><br> </font>
<font face="arial"> Films: <input type="int" name="film" value="0"><br></font>
</form>
<button onclick="outputsize()">Calculate</button>
<script>
var doc,photo,music,film,ttb,tgb,tmb,tdoc,tphoto,tmusic,tfilm,files,sdoc,sphoto,smusic,sfilm;
function outputsize() {
sdoc=0.1
sphoto=8
smusic=5
sfilm=1400
files=document.getElementById("filenum");
doc=x.elements["doc"].value;
photo=x.elements["photo"].value;
music=x.elements["music"].value;
film=x.elements["film"].value;
tdoc=doc*sdoc;
tphoto=photo*sphoto;
tmusic=music*smusic;
tfilm=film*sfilm;
tmb=tdoc + tphoto + tmusic + tfilm;
tgb=tmb/1000;
ttb=tgb/1000;
document.getElementById("out").innerHTML="You need a, "+tmb+"MB or bigger hard drive.<br>";
document.getElementById("out").innerHTML+="Or...<br>";
document.getElementById("out").innerHTML+="You need a, "+tgb+"GB or bigger hard drive.<br>";
document.getElementById("out").innerHTML+="Or...<br>";
document.getElementById("out").innerHTML+="You need a, "+ttb+"TB or bigger hard drive.<br>";
}
</script>
<p id="out"><font face="arial">We calculated:</font></p>
</body>
</html>
Again, sorry if this is a stupid question (if such a thing exists) but I have been at this for hours and can't solve it :(
This should work correctly. You were trying to get values from the form, but you were trying to obtain them from a variable that did not exist.
<h1><font face="arial">How much space do you need?</font></h1>
<h2><font face="arial">Number of Files: </font></h2>
<form id="filenum">
<font face="arial"> Documents: <input type="int" name="doc" value="0"><br></font>
<font face="arial"> Photos: <input type="int" name="photo" value="0"><br></font>
<font face="arial"> Music: <input type="int" name="music" value="0"><br> </font>
<font face="arial"> Films: <input type="int" name="film" value="0"><br></font>
</form>
<button onclick="outputsize()">Calculate</button>
<script>
var doc, photo, music, film, ttb, tgb, tmb, tdoc, tphoto, tmusic, tfilm, files, sdoc, sphoto, smusic, sfilm;
function outputsize() {
sdoc = 0.1;
sphoto = 8;
smusic = 5;
sfilm = 1400;
files = document.getElementById("filenum");
doc = files.elements["doc"].value;
photo = files.elements["photo"].value;
music = files.elements["music"].value;
film = files.elements["film"].value;
tdoc = doc * sdoc;
tphoto = photo * sphoto;
tmusic = music * smusic;
tfilm = film * sfilm;
tmb = tdoc + tphoto + tmusic + tfilm;
tgb = tmb / 1000;
ttb = tgb / 1000;
document.getElementById("out").innerHTML = "You need a, " + tmb + "MB or bigger hard drive.<br>";
document.getElementById("out").innerHTML += "Or...<br>";
document.getElementById("out").innerHTML += "You need a, " + tgb + "GB or bigger hard drive.<br>";
document.getElementById("out").innerHTML += "Or...<br>";
document.getElementById("out").innerHTML += "You need a, " + ttb + "TB or bigger hard drive.<br>";
}
</script>
<p id="out"><font face="arial">We calculated:</font>
</p>
You need to modify the function (replace 'x' with 'files'):
function outputsize() {
...
doc=files.elements["doc"].value;
photo=files.elements["photo"].value;
music=files.elements["music"].value;
film=files.elements["film"].value;
...
}
How to troubleshoot errors like these:
To figure this out, I pressed F12 in Firefox (also works in Chrome) to bring up the console. It showed an undefined variable called 'x' and told me the line where it should be changed.
You need to change x to files:
doc=files.elements["doc"].value;
photo=files.elements["photo"].value;
music=files.elements["music"].value;
film=files.elements["film"].value;
You never defined x so x was undefined. You did however define files which is what you want to use. You were trying to access elements of your form which you stored your form in the files variable not x.
Beginer to javasctipt. I am trying to write a simple calculation that will display some text if the time since oil change is past 6 months, the amount of oil left in the car is less then it started and finally display if everything is ok.
Thanks for the help
JavaScript
function oil(){
var start = document.oil.start.value;
var lastOilChange = document.oil.time.value;
var totalOil = document.oil.amount.value;
var aa = "you need to change the oil";
if( lastOilChange > 6 || start < totalOil){
document.oil.result.write(aa);
}else{
document.oil.result.write("Everything Is all good");
}
}
HTML
<form name="oil">
Starting amount of oil
<input type="text" name="start">
Time since oil change
<input type="text" name="time">
Total amount of oil in car now(quarts)
<input type="text" name="amount">
<input type="submit" onclick = oil()>
<input name=result readonly>
</form>
There are a couple of problems with your code
Missing Form close tag
Your controls don't have IDs
missing quotes on the result input
Don't need to use a submit input when you're not submitting to a form. Try button
Not sure what document.oil.result.write(aa); will do. I think the correct process is to get the input using document.getElementById and then set the value of the control
I will try to answer your question with the least number of line changes. This is not the optimal answer. Comments have been added to help you understand required changes. Your HTML and JavaScript are invalid, so it was a surprise to me how they both ran on Chrome.
<!doctype>
<html>
<head>
<title>Personal</title>
<meta charset="utf-8">
<script type="text/javascript">
function _oil(){ // oil() conflicts with your form's name
var start = document.oil.start.value;
var lastOilChange = document.oil.time.value;
var totalOil = document.oil.amount.value;
var aa = "you need to change the oil";
if( lastOilChange > 6 || start < totalOil){
document.write(aa); // you can't .write() to an element
}else{
document.write("Everything Is all good");
}
window.event.preventDefault(); // so your window does not load the same page when you submit
return false;
}
</script>
<style>
form input {
display: block;
}
</style>
</head>
<body>
<form name="oil">
Starting amount of oil
<input type="text" name="start">
Time since oil change
<input type="text" name="time">
Total amount of oil in car now(quarts)
<input type="text" name="amount">
<input type="submit" onclick ="_oil()"> <!-- you must enclose the onclick attribute, even if both work -->
<input name=result readonly>
</body>
</html>
May be like this:
<!doctype>
<html>
<head>
<title>Personal</title>
<meta charset="utf-8">
<script type="text/javascript">
function oil(){
var start = document.getElementsByName("start")[0].value;
var lastOilChange = document.getElementsByName("time")[0].value;
var totalOil = document.getElementsByName("amount")[0].value;
var aa = "you need to change the oil";
if( lastOilChange > 6 || start < totalOil){
document.getElementsByName("result")[0].value = aa;
}else{
document.getElementsByName("result")[0].value = "Everything Is all good";
}
}
</script>
<style>
form input {
display: block;
}
</style>
</head>
<body>
<form name="thisform">
Starting amount of oil
<input type="text" name="start">
Time since oil change
<input type="text" name="time">
Total amount of oil in car now(quarts)
<input type="text" name="amount">
<input type="button" value="go" onclick = oil()>
<input name=result readonly>
</form>
</body>
</html>
！！！ The form name can not use oil
What you want is to set the value of the form field rather than trying to use write:
if( lastOilChange > 6 || start < totalOil){
document.oil.result.value = aa;
} else {
document.oil.result.value = "Everything Is all good";
}
As pointed out in other answers, though, you also need to prevent the form from trying to submit information to the server and reload the page. There are several ways of doing this (see e.g. JavaScript code to stop form submission). One is to replace the submit button with an ordinary button (<input type="button" value="Calculate" />).
Another is to attach your function to the form as an event handler, and return false at the end of it.
document.oil.onsubmit = function () {
...
return false;
}
(JSFiddle)
I am creating a website as part of an assignment in college, so I picked a topic on rock, paper, scissors, lizard, spock from The Big Bang Theory. The website needs to contain HTML, CSS and JavaScript only (so please don't suggest JQuery because its not in the assignment). All my HTML and CSS are okay, I just haven't done much with JS before.
I have created a combo box with different choices, these are: Rock, Paper, Scissors, Lizard and Spock.
I have 3 text boxes below that on the page, I've successfully used JS to get the text value from the combo box and place it in the middle box. But I would like to put what beats the current thing in the first box and what it beats in the third box so:
If Rock was selected in the combo box then that string of text 'Rock' gets placed in the second (middle) box, and because Paper beats Rock I would like 'Paper' to be entered in the First box, and because Rock beats Scissors I would Like 'Scissors' to be entered in the third box.
I would like it to change to what it beats and what its beaten by depending on the selected value in the combo box.
Here is what I have so far, the JS is internal.
<!Doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="Web.css">
<script>
function Choice()
{
var mylist=document.getElementById("myList");
document.getElementById("Choice").value=mylist.options[mylist.selectedIndex].text;
var x= Choice.value;
}
</script>
</head>
<body>
<div class="font">
<Div class="Containment">
<div class="Heading">
<h1> A BEGINNERS GUIDE TO
ROCK-PAPER-SCISSORS-LIZARD-SPOCK </h1>
</div>
<br>
<diV class="Menu">
The Game | Rock | paper | scissors | Lizard | Spock
</diV>
<br>
<img class="centerpic" src="images/rpsls2.Jpg" >
<br>
<center>
<div class="text">
Rock-paper-scissors-lizard-Spock is a five-gesture expansion
of the classic selection method game rock-paper-scissors.
It operates on the same basic principle, but includes two additional weapons:
the lizard (formed by the hand as a sock-puppet-like mouth)
and Spock (formed by the Star Trek Vulcan salute).
This reduces the chances of a round ending in a tie.
The game was invented by <br>
Sam Kass with Karen Bryla.
</div>
</center>
<br>
<center> <iframe width="560" height="315" src="http://www.youtube.com/embed/x5Q6-wMx-K8" frameborder="0" allowfullscreen></iframe>
<!-- This is the code to place and load my youtube linked video -->
<br>
<br>
<div class="text">
This game is featured numerous times in episodes of the Big Bang Theory and
is normally used similar to why rock papers scissors is used, to settle indecisions,
as Sheldon attempts to use it to get the office instead of Barry Kripke in this particular episode.
</div>
</center>
<br>
<br>
<div class="text">
Sign matchups:
Select your symbol of choice:
<select id="myList" onchange="Choice()">
<option></option>
<option>Rock</option>
<option>Paper</option>
<option>Scissors</option>
<option>Lizard</option>
<option>Spock</option>
</select>
<br>
<br>
<input type="text" id="Wins1" width="10"> Beats
<input type="text" id="Choice" width="10"> Beats
<input type="text" id="Loses1" width="10">
<br>
<br>
<input type="text" id="Wins2" width="10">
<input type="text" id="Loses2" width="10">
<div>
</div>
</body>
</html>
All help is greatly appreciated.
Many thanks and regards,
Chris
You should rename the title
Use javascript to get the value of a dropdown, then conditionally populate other input fields.
Here is the entire script proof of concept:
<script>
function run() {
var truthTable = up();
console.log (truthTable);
//Add a value for each input
document.getElementById("srt").value = document.getElementById("Ultra").value;
}
function up() {
var selectedValue = document.getElementById("srt").value,
truthTable;
if(selectedValue === 'rock'){
//push values based on truth table
}
else if (selectedValue === 'paper'){
//push values based on truth table
var table = [{ "first":"Paper" , "second":"Rock", "third":"Scissors", "fourth":"Lizard", "fifth":"Spock"}];
console.log (table);
return table;
}
else if (selectedValue === 'scissors'){
//push values based on truth table
}
else if (selectedValue === 'lizard'){
//push values based on truth table
}
else if (selectedValue === 'spock'){
//push values based on truth table
}
}
</script>
Here is a fiddle example
There are only 5 outcomes.
Build a truthTable for your outcomes.
Enter each tables data as json in the table var of the appropriate
if statement.
return table as truthTable var
Iterate data and push values to appropriate input IDs
Example:
//Add a value for each input
document.getElementById("srt").value = truthTable[0].value;
document.getElementById("second").value = truthTable1.value;
document.getElementById("third").value = truthTable2.value;
document.getElementById("fourth").value = truthTable[3].value;
document.getElementById("fifth").value = truthTable[4].value;
I think this example tells you what to do, but will also let you learn what you are doing.
NOTE: My example fires onClick, this is NOT the trigger for your case, you need to use something else.
Added links to help others who have the same issue.