Question

当我使两个分开的html比addrow出错时，并且所有值都为null，但是如果我在一个html中进行了遍历，则一切正常。.请帮助我

我可以在两个HTML中使用onr js文件吗？如果我可以使用，那么为什么会通过错误

我的index.html代码是

<!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文件是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>

我的js文件add.js是

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;
}

Answer 1

您可以将所有代码放在同一个html文件中：

<!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>

但是，实际上，我认为您最好的选择是研究诸如react.js或Angular之类的现代框架-仅使用html + vanilla js可以做些限制。

当我添加另一个具有相同js文件的html文件时不添加行

1 个答案: