javascript - 使用 JavaScript 访问和操作 HTML 输入

Question

我是一个新的业余程序员，在同时使用 HTML 和 JavaScript 时遇到了麻烦。我们的任务是制作一个简单的程序，询问我们最大的数字是多少，我做了逻辑，但在这个案例中仍然遇到问题。

目前这是我的代码的进展

var num1;
var num2;
var num3;
var max;

if (num1 < num2) {
  if (num2 < num3) {
    num3 = max;
  } else if (num2 > num3) {
    num2 = max;
  }
} else if (num1 > num2) {
  if (num1 > num3) {
    num1 = max;
  } else if (num1 < num2) {
    num2 = max;
  }
}

alert("The maximum number is: " + max);

<h1>Laboratory 06</h1>
<p>2. Write a JavaScript program to determine the maximum number using 3 input box.</p>
<blockquote>
  <label for=num1>First number:</label><br>
  <input type="text" id="a" name=num1><br><br>

  <label for=num2>Second number:</label><br>
  <input type="text" id="b" name=num2><br><br>

  <label for=num3>Third number:</label><br>
  <input type="text" id="c" name=num3><br><br>

  <button type="button">Enter</button>
</blockquote>

标签： javascripthtml

Answer 1

您的代码的主要问题是它在用户输入任何数字之前很久就立即运行。下一个问题是您永远不会从输入中读取值。

相反，您想要的是让代码等到事件发生- 在您的情况下，这就是用户单击Enter按钮的事件。

为了对用户操作（以及更多）做出反应，Javascript 具有eventListeners 的概念，您可以将其添加到任何元素中。有许多不同类型的事件；您在这里关心的是click事件。

要将其添加到按钮，您首先需要您的 Javascript 来了解您的button元素在哪里。为了在页面中找到它，Javascript 提供了该document.querySelector()方法。

一旦找到它，就可以调用addEventListener()元素上的方法（所有 HTML 元素都内置了这个方法）。

有关其余部分的说明，请查看源代码注释（以 开头的行//）：

// first we need to find the button in the page,
// so we can access it in our Javascript
// the following finds the first <button> element in the page.
const button = document.querySelector('button');

// every HTML element has a addEventListener method
// that takes two arguments:
// the first is the name of the event you want to listen to (String),
// the second is a function that will be executed every time 
// the event occurs.
button.addEventListener('click', function() {
  // when the user clicks the button, we read what is in the inputs.
  // to do that, we first need our JS to find the inputs.
  // in this case this is especially easy because each of them has a
  // unique identifier (id), so we can use 
  //    document.getElementById(id) 
  // to find it.
  // Once found, we immediately read the value from the input.
  let aValue = document.getElementById('a').value;
  let bValue = document.getElementById('b').value;
  let cValue = document.getElementById('c').value;
  // because the value of any input element is always a String,
  // we now convert it to a Number.
  aValue = parseFloat(aValue);
  bValue = parseFloat(bValue);
  cValue = parseFloat(cValue);
  
  // now we use another built-in object, Math, and on it, the
  // Math.max function, to find the largest number.
  const maxValue = Math.max(aValue, bValue, cValue);

  // to output the maxValue, we use console.log rather than
  // alert. To see the output in the browser, open the browser's
  // developer tools (F12 on Windows), and click the "Console" tab.
  // To make sure not to output anything if no number was entered
  // before the button was clicked, we check if maxValue is a proper
  // number. Javascript has the NaN datatype (Not a Number), 
  // and you can check for it using isNaN(variable)
  if (!isNaN(maxValue)) { // if maxValue is not "Not a number"
    console.log("The maximum number is: " + maxValue);
  }
})

<h1>Laboratory 06</h1>
<p>2. Write a JavaScript program to determine the maximum number using 3 input box.</p>
<blockquote>
  <label for=num1>First number:</label><br>
  <input type="text" id="a" name=num1><br><br>

  <label for=num2>Second number:</label><br>
  <input type="text" id="b" name=num2><br><br>

  <label for=num3>Third number:</label><br>
  <input type="text" id="c" name=num3><br><br>

  <button type="button">Enter</button>
</blockquote>