not adding row when i add another html file with same js file
Question
when i make two seprate html than addrow are through an error and get all value null but if i do eveything in one html than everything work fine.. please help me out
can i use onr js file in two html?? if i can use than why its through an error
my index.html code are
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>Fname</p>
<br>
<input type="text" id="name">
<p>Lname</p>
<br>
<input type="text" id="Lname">
<p>Age:</p>
<br>
<input type="text" id="age">
<p>Email:</p>
<br>
<input type="text" id="email">
<br>
<br>
<button onclick="add()">submit</button>
<script type="text/javascript" src="add.js"></script>
</body>
</html>
secoand html file are detail.html
<!DOCTYPE html>
<html>
<head>
<title>Info List</title>
<style type="text/css">
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width: 100%;" >
<tr>
<th>Fname</th>
<th>Lname</th>
<th>Age</th>
<th>Email</th>
</tr>
<tr>
<td id="one"></td>
<td id="two"></td>
<td id="three"></td>
<td id="four"></td>
</tr>
</table>
<script type="text/javascript" src="add.js"></script>
</body>
</html>
my js file add.js are
function add(){
fname = document.getElementById('name').value
Lname = document.getElementById('Lname').value
age = document.getElementById('age').value
email = document.getElementById('email').value
console.log("helloooo")
redirect()
addRow(fname,Lname,age,email)
}
function redirect(){
window.location.assign("detail.html")
}
function addRow(f,l,a,e){
let fname = document.getElementById('one')
let lname = document.getElementById('two')
let age = document.getElementById('three')
let email = document.getElementById('four')
fname.innerHTML = f;
lname.innerHTML = l;
age.innerHTML = a;
email.innerHTML = e;
}
1 answers
solution1
0 2018-12-10 08:22:22
You could just put all the code in the same html file:
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>Fname</p>
<br>
<input type="text" id="name">
<p>Lname</p>
<br>
<input type="text" id="Lname">
<p>Age:</p>
<br>
<input type="text" id="age">
<p>Email:</p>
<br>
<input type="text" id="email">
<br>
<br>
<button onclick="add()">submit</button>
<table style="width: 100%;" >
<tr>
<th>Fname</th>
<th>Lname</th>
<th>Age</th>
<th>Email</th>
</tr>
<tr>
<td id="one"></td>
<td id="two"></td>
<td id="three"></td>
<td id="four"></td>
</tr>
</table>
<script type="text/javascript" src="add.js"></script>
</body>
</html>
But really, I think your best bet would be to look into some modern framework like react.js or Angular - what you can do with only html+vanilla js is a bit limiting.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.