Question

我试图在此处编写一个事件处理程序，以便当用户在第一个文本框和第二个文本框中输入数字，然后单击“比较值”按钮时，将执行一个函数并对其进行检查

如果任何一个数字为零，它将打印在“ box5”，“您输入了零”上

如果两个数字相同，则会在“ box5”，“数字相同”上打印出来。

如果第一个数字可以被第二个数字整除，它会打印在“ box5”上，“第一个可以被第二个数字整除”

如果第二个数字可以被第一个数字整除，则将其打印在“ box5”上，“第二个数字可以被第一个整除”

否则-如果数字不互相分开，则会在“ box5”上打印出来，“它们不可整除”

我已经为此创建了HTML页面，但是我不知道该如何处理。一些用户告诉我使用“ keyup”方法，我希望是否有人可以向我展示一个示例，他们将尽可能使用“ keyup”方法来实现此目的。预先感谢

<p> Enter two numbers and we will tell you if they are evenly divisble
<p> Enter your first number:</p> <input type="text" id="box3">
<p> Enter your second number: </p> <input type="text" id="box4"> 
<button id="compareValue">Compare Values</button>
<p> Output will appear here: </p> <input text="type" id="box5" disabled>

我只是在尝试创建一个简单的工具来比较用户输入的2个数字，并检查它们是否可以被整除，以及是否可以将哪个数字整除，并确保没有零在输入中输入，否则-如果彼此之间不可分割，则表明它们不可分割。

编辑：我忘了包括我的JavaScript尝试：

let firstNumber = document.getElementById("box3")
let secondNumber = document.getElementById("box4")
let outputNumber = document.getElementById("box5")

$(document).ready(function(){
$("compareValue").keyup(function(){
let a = firstNumber.value;
let b = secondNumber.value;
  if (a === 0 || b === 0);
    let outputNumber.value = "The Number is ZERO."
  });
  if (a % b );
    let outputNumber.value = "First number is divisible by the second number."
  });
  if (b % a);
    let outputNumber.value = "Second Number is divisble by the first number."
  });
  else-if (a !== b && b !== a);
    let outputNumber.value = "The numbers are not divisible."
  });
});

Answer 1

只需使用%（模数）来进行除数，并使用==来测试相等性：

function compare() {
  var value1 = parseInt(document.getElementById("box3").value);
  var value2 = parseInt(document.getElementById("box4").value);
  var display = document.getElementById("box5");
  if (value1 == 0 || value2 == 0) {
    display.value = "You have entered zero";
  } else if (value1 == value2) {
    display.value = "The numbers are the same";
  } else if (value1 % value2 == 0) {
    display.value = "The first is divisible by the second";
  } else if (value2 % value1 == 0) {
    display.value = "The second is divisible by the first";
  } else {
    display.value = "They are not divisible";
  }
}

<p> Enter two numbers and we will tell you if they are evenly divisble</p>
<p> Enter your first number:</p> <input type="text" id="box3">
<p> Enter your second number: </p> <input type="text" id="box4">
<button id="compareValue" onclick="compare()">Compare Values</button>
<p> Output will appear here: </p> <input text="type" id="box5" disabled>

Answer 2

由于您用jquery标记了此标签，所以我想您会喜欢jQuery解决方案。

$(function() {
  function compare(a, b) {
    if (typeof a !== "number" || typeof b !== "number") {
      return false;
    }
    var result;
    switch (true) {
      case (a === 0 || b === 0):
        result = "You have entered zero";
        break;
      case (a === b):
        result = "The numbers are the same";
        break;
      case (a % b === 0):
        result = "The first is divisible by the second";
        break;
      case (b % a === 0):
        result = "The second is divisible by the first";
        break;
      default:
        result = "They are not divisible";
        break;
    }
    return result;
  }
  $("#compareValue").click(function(e) {
    var v1 = parseInt($("#box3").val());
    var v2 = parseInt($("#box4").val());
    $("#box5").val(compare(v1, v2));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p> Enter two numbers and we will tell you if they are evenly divisble
  <p> Enter your first number:</p> <input type="text" id="box3">
  <p> Enter your second number: </p> <input type="text" id="box4">
  <button id="compareValue">Compare Values</button>
  <p> Output will appear here: </p> <input text="type" id="box5" disabled>

享受！

Answer 3

听起来，您真的是整个html / js的新手；请原谅，如果我将这种解释非常明确。

在您的html之后添加一个script标签，例如<script> stuff here </script>
在此处用一些JavaScript代码替换内容。

要获取对元素的变量引用，请使用

var someElement = document.getElementById("#id_of_an_element")

要获取或设置输入元素中数据的值，请使用

inputElement.value

要处理元素上的点击事件，请使用

buttonElement.addEventListener("click", function(){
    //Do stuff!
})

从那里出发应该很好。

祝你好运！公平地说，这是一个非常n00b级的stackoverflow查询，遵循youtube上的30分钟指南无法解决，因此请采取一些主动行动-确实有帮助：）

使用Javascript，如何比较2个值以查看它们是否可以被整除？

3 个答案: