javascript - 如何使用 JavaScript 代码创建狗的年龄计算器 HTML 表单？

Question

所以我对 javascript 很陌生，我想知道如何将我的 javascript 代码转换为 HTML 表单。我的想法是我正在使用 this website about your dog's age并制作更具互动性的东西，例如计算器。

我希望它看起来像这样:

到目前为止我拥有的 HTML 是:

<form action="">
 <h4>Size</h4>
  <input type="radio" name="size" value="small" checked>Small<br>
  <input type="radio" name="size" value="medium">Medium<br>
  <input type="radio" name="size" value="large">Large<br>

  <h4>Age</h4>
  <p>Type in an age between 1 and 16.</p>
  <input type="number" name="age" min="1" max="16"><br><br>

  <input type="submit">
</form>

JavaScript 是这样的(它并不完美，但它可以工作)，并且只打印到控制台。我希望它在用户按下提交按钮时打印给用户。

var dogSize = "medium"; // small, medium, or large?
var dogAge = 13; // type in an age between 1-16

// BASIC RULES
if (dogSize !== "small" && dogSize !== "medium" && dogSize !== "large") {
  console.log("ERROR: Please type in either small, medium, or large");
}
else if (dogAge < 1 || dogAge > 16) {
  console.log("ERROR: Type in an age between 1 and 16.");
}

// First 5 years
else if (dogAge === 1 && dogSize === "small") {
  console.log("Your dog is 15 in human years.");
}
else if (dogAge === 1 && dogSize === "medium") {
  console.log("Your dog is 15 in human years.");
}
else if (dogAge === 1 && dogSize === "large") {
  console.log("Your dog is 15 in human years.");
}

etc... 

我编写了更多代码，但重要的是将 HTML 按钮与代码链接起来。

我真的很感激任何帮助! 谢谢。

Answer 1

您的问题非常广泛，因为您需要做的不仅仅是一件事。本质上，您需要为要连接到 JavaScript 的每个元素执行 3 件事:

1. 您需要获取对需要的元素的 JavaScript 引用 连接到 JavaScript 并且可以通过多种方式完成 ( .getElementById() , .querySelector() , .querySelectorAll() , 等)
2. 您需要决定哪些事件应触发该事件 回调(点击、更改、输入、提交等)。
3. 然后您需要配置事件处理回调函数 那些找到的元素，这是通过 .addEventListener() 完成的。

在开始使用此解决方案之前，我强烈建议您研究一下使用 Document Object Model (DOM) API , DOM Event Handling ，具体来说， form events 。

另一件事，如果您只想将其作为一个计算器，而不是在任何地方实际提交数据，那么您不应该使用 submit 按钮，而应该只使用 按钮 按钮。

这是一个基本示例:

// Get a reference to the elements that we'll be working with:
let form = document.querySelector("form");  // Find the first <form> element in the document
let age = document.querySelector("input[name='age']"); // Find the first <input> with: name="age"

// Get all the <input> elements with name="size" and create an Array to store them in.
// .querySelectorAll() returns a list of the element nodes as a collection, but if
// we want to loop through that list using the .forEach() method for looping, we have
// to convert that list into a true JavaScript Array for the best compatibility across
// different browsers. Array.prototype.slice.call() takes the argument you pass to it
// and converts it into an Array.
let sizes = Array.prototype.slice.call(document.querySelectorAll("input[name='size']"));

// Set up event handlers for the elements.
// Here, we have three ways to trigger the calculation...
//   1. As the user enters a number for age
//   2. As the user changes the size
//   3. When the user clicks the button

// Of course, you could have each element hooked up to different 
// functions if desired, but it doesn't seem like that is what you
// would want in this case.
age.addEventListener("input", calculate);
form.addEventListener("submit", calculate);

// We'll loop over all the radio buttons in the array
sizes.forEach(function(radioButton){
  // and set each one up with an event handler
  radioButton.addEventListener("click", calculate);
});

// These are the functions that were referenced above and that will be called 
// when the events that they are tied to occur. Obviously, add you own custom
// code inside of each:
function calculate(){
  console.log("...calculating...");
}

<form>
 <h4>Size</h4>
  <input type="radio" name="size" value="small" checked>Small<br>
  <input type="radio" name="size" value="medium">Medium<br>
  <input type="radio" name="size" value="large">Large<br>

  <h4>Age</h4>
  <p>Type in an age between 1 and 16.</p>
  <input type="number" name="age" min="1" max="16"><br><br>

  <input type="button" value="Calculate">
</form>