时间戳

首页 > 解决方案 > 功能和按钮 JavaScript 和 HTML

javascript - 功能和按钮 JavaScript 和 HTML

问题描述

我正在尝试编写的程序有点复杂，但这里有一个简单的加法和减法评估代码，以帮助理解我正在尝试做什么。

let x0 = document.getElementsByClassName('x0').value;
let y0 = document.getElementsByClassName('y0').value;

function addTion(num1, num2) {
  return (num1 + num2);
}

function subTion(num1, num2) {
  return (num1 - num2);
}

function Evaluate() {
  if (x0 > y0) {
    console.log(addTion(x0, y0));
    console.log(x0);
  } else if (x0 < y0) {
    console.log(subTion(x0, y0));
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name='viewpoint' content="width=device-width,
    initial-scale=1.0">
  <title> Interp-Xtrap</title>
</head>

<body>
  <div>
    <form name="getData">
      <label for="x0">X0:</label>
      <input type="text" id="point" name="x0" size="10px">
      <label for="y0">Y0:</label>
      <input type="text" id="point" name="y0" size="10px">
      <button type="button" id="button" onclick=Evaluate()>Evaluate</button>
    </form>

  </div>
</body>

当我分别为 X0 和 Y0 输入 1 和 2 时，我希望看到 -1 作为结果。#我的代码有什么问题？

标签： javascripthtml

解决方案

我会用价值观来启动null价值观。只要您单击评估按钮，就会通过该getElementById方法检索值。使用 if 和 else 条件调用您的方法。

let x0 = null
let y0 = null

function addTion(num1, num2) {
  return (num1 + num2);
}

function subTion(num1, num2) {
  return (num1 - num2);
}

function evaluateVal() {
  x0 = document.getElementById('x0').value;
  y0 = document.getElementById('y0').value;

  if (x0 > y0) {
    console.log(addTion(x0, y0));
    console.log(x0);
  } else {
    console.log(subTion(x0, y0));
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name='viewpoint' content="width=device-width,
    initial-scale=1.0">
  <title> Interp-Xtrap</title>
</head>

<body>
  <div>
    <form name="getData">
      <label for="x0">X0:</label>
      <input type="text" id="x0" name="x0" size="10px">
      <label for="y0">Y0:</label>
      <input type="text" id="y0" name="y0" size="10px">
      <button type="button" id="button" onclick="evaluateVal()">Evaluate</button>
    </form>

  </div>
</body>

推荐阅读