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

Getting a Variable Set in JavaScript and then Calling/Printing it in an HTML Table

本文关键字：调用 打印 HTML JavaScript 获取 变量 然后      更新时间：2023-09-26

我一直在尝试制作一个程序，自动编写两列代数和几何证明。我确信这已经完成了，但我无论如何都想做。我对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>

关于如何实现这一点，你们所有人所拥有的一切（最好是在不改变格式或切换编程语言的情况下）都将是很棒的，你们在我的项目的其余部分所拥有的任何技巧也将很棒。如果这是一个新手问题，我深表歉意。

您混淆了javascript和html。<脚本><script>标记表示介于两者之间的一切都是javascript。因此，在它们内部，您将使用函数，而不是<函数><function>指定您的函数。

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，删除脚本标记，将函数放在那里，然后将其包含在<头>像这样：

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

上面的内容很简单，你应该这样做。下面的内容有点狡猾，也许可以留到你成为一名网络开发专家时使用。很快我就确定了！：-）

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

但现在你可以做的是，在html页面中任何你想显示数据的地方，只需放置另一个脚本标记并运行函数（你已经从script.js文件中包含了这个函数）。

类似于：

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

更新2:

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

相关文章：