Question

我一直在尝试制作一个自动编写双列代数和几何样张的程序。我确信这已经完成了，但无论如何我想要这样做。我对HTML和JavaScript有点缺乏经验（我主要是试图从在线资源中学习）而且我在编写变量时遇到了麻烦。这是我到目前为止编写的代码，我希望“x”成为所需问题中“给定”内容的用户输入。我稍后会检查程序输入的格式是否有效，并使表格逐步扩展为它决定需要采取的每一步以接近它试图证明的语句。

<HTML>
<body>
<font size="5">
<p align="center">
<p1>Insert Given:</p1>
<div align="center"; id="Input1">
    <form id='user-input'>
        <input type='text' id='given' placeholder='Given Information'></input>
    </form>
<p2>Insert Statement<br>to Prove:</p2>
<br>
<div align="center"; id="Input2">
    <form id='user-input'>
        <input type='text' id='prove' placeholder='Statement to Prove'></input>
    </form>
<button id='submit' onClick="edit()">Submit</button>
<print><var ="x"></var></print>
<script>
<function> edit()
{
     x = document.getElementById('Input1').value;
     y = document.getElementById('Input2').value;   
}
</function>
</script>
<br>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
}
</style>
</head>

<body>

<table style="width:100%">
<col Width="15">
<col Width="300">
<col Width="500">
  <tr>
    <th>Step Number</th>
    <th>Step</th>       
    <th>Explaination</th>
  </tr>
  <tr>
    <td>1</td>
    <td><var="x"></var></td>        
    <td>Given</td>
</table>
</div>
</body>
</html>

你们所拥有的关于如何使其工作的任何事情（最好不要极其改变格式或切换编程语言）都会很棒，而且你们对我项目其余部分的任何提示都会很棒。如果这是一个新手问题，我道歉。

Answer 1

你正在混淆javascript和html。 ＆lt; script＆gt;＆lt; / script＆gt; 标记表示其间的所有内容均为javascript。那么在他们内部，您将使用功能，而不是＆lt; function＆gt;＆lt; / function＆gt; 来指定您的功能。

echo将打印结果。

<script>
  function edit()
  {
       x = document.getElementById('given').value;
       y = document.getElementById('prove').value;   
       echo x * y;
  }

</script>

<强>更新

要回答您的问题，您应该阅读一些javascript / web dev资源以了解良好的网站结构。你真的不希望你的javascript混合到你的代码中。

你至少应该将你的javascript代码放在一个单独的文件中。例如调用你的文件script.js，删除脚本标签，把你的功能放在那里，然后把它包含在＆lt; head＆gt;中。像这样：

<script src="scripts.js"></script>

以上很简单，你应该这样做。以下是一个小问题，也许在您成为Web开发专家时可以保存。很快，我确定！： - ）

理想情况下，您可以使用jQuery之类的东西将javascript放在那里，jQuery会在文档加载后运行，进行计算，然后更新页面上的相应区域。

但是现在您可以做的是在您的html页面中想要显示数据的任何地方，只需添加另一个脚本标记并运行该功能（您已经从script.js文件中包含该功能）。

类似的东西：

Results: 
<script>
  edit();
</script>

更新2：

抱歉，我没有注意到你有错误的ID（input1和input2）。 getElementById需要您用于创建元素的html id。我已经更新了代码

获取JavaScript中的变量集，然后在HTML表中调用/打印它

1 个答案: