如何在HTML中调用polynomial.js的函数并显示运算结果？

你的代码存在几个关键问题导致点击按钮无响应，下面逐一说明并给出修正方案：

问题分析 #

• 按钮点击事件绑定错误：onclick="add" 未指定正确的函数调用逻辑，需要自定义处理点击的函数（比如addPolynomials()）。
• script标签使用冲突：带有src属性的script标签内部代码不会执行，必须将引入外部JS和自定义代码拆分为两个独立的script标签。
• 取值时机错误：页面加载时就获取输入框值，此时用户还未输入内容，应该在点击按钮时再读取输入。
• 实例化错误：创建Polynomial实例时缺少new关键字，必须和Node环境中的写法保持一致，使用new Polynomial()。

修正后的完整代码 #

CSS样式 #

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

h1 {
  text-align: center;
}

div {
  margin-bottom: 10px;
}

label {
  display: inline-block;
  width: 100px;
}

input {
  width: 200px;
}

button {
  margin-right: 10px;
}

HTML与JavaScript逻辑 #

<body>
  <h1>多项式计算器</h1>
  <div>
    <label for="pol1">多项式1:</label>
    <input type="text" id="pol1" placeholder="示例: 3x^2">
  </div>
  <div>
    <label for="pol2">多项式2:</label>
    <input type="text" id="pol2" placeholder="示例: -x^2">
  </div>
  <div>
    <button onclick="addPolynomials()">多项式相加</button>
    <button onclick="calcSecondDerivative()">计算二阶导数</button>
  </div>

  <div>
    <label for="result">计算结果:</label>
    <input type="text" id="result" readonly>
  </div>

  <!-- 先引入外部polynomial.js文件 -->
  <script src="polynomial.js"></script>
  <!-- 自定义业务逻辑 -->
  <script>
    // 处理多项式相加
    function addPolynomials() {
      const pol1Val = document.getElementById('pol1').value.trim();
      const pol2Val = document.getElementById('pol2').value.trim();

      if (!pol1Val || !pol2Val) {
        alert('请输入完整的两个多项式');
        return;
      }

      try {
        const result = new Polynomial(pol1Val).add(pol2Val);
        document.getElementById('result').value = result.toString();
      } catch (err) {
        alert('输入格式错误，请检查多项式写法');
      }
    }

    // 处理二阶导数计算
    function calcSecondDerivative() {
      const polVal = document.getElementById('pol1').value.trim();

      if (!polVal) {
        alert('请输入要计算导数的多项式');
        return;
      }

      try {
        const result = new Polynomial(polVal).derive(2);
        document.getElementById('result').value = result.toString();
      } catch (err) {
        alert('输入格式错误，请检查多项式写法');
      }
    }
  </script>
</body>

额外说明 #

• 新增输入验证和错误提示，避免空输入或格式错误导致的程序崩溃。
• 补充了二阶导数计算的功能演示，展示如何调用polynomial.js的其他方法。
• 确保polynomial.js文件与HTML文件在同一目录下，若路径不同需调整src属性值。

内容的提问来源于stack exchange，提问作者Rasec Malkic