如何在 HTML 页面中正确实现 Javascript 功能

Question

我有一个项目即将到期，我需要制作一个以某种方式使用 Javascript 的程序，我决定制作一个页面，当用户输入 1 - 5 之间的数字时显示随机事实；每个数字都有自己的一组事实，并且只会显示这些事实（当用户输入 1 时，不会显示有关 2 的事实）。我可以用 JS 完成这一切，但我更愿意使用 HTML 和 CSS，因为这是我习惯的。我的问题是不知道如何让 JS 功能与 HTML 中的外部 JS 文件一起使用。例如，下面是 HTML 代码块，当用户输入数字 1 时显示一组事实<p>The FIRST music video on MTV was for the song "Video Killed the Radio Star", by the English new wave group The Buggles, and premiered on August 1, 1981 at 12:01 AM</p><p>The FIRST McDonald's restauarant opened in San Bernardino, CA, on May 15, 1940</p><p>The FIRST ever mobile phone call was made on April 3, 1973, by Martin Cooper, a senior engineer at Motorola</p><p>The FIRST photo of lightning was taken on September 2, 1882, by William Jennings, who wanted to know if lightning really had a zigzag form</p><p>The FIRST person to ever go down Niagara Falls in a barrel was 63-year-old Annie Edison Taylor, who was a widowed teacher. She made no money from her stunt</p><p>The FIRST Apple computer, developed and designed by Steve Wozniak and presented by Steve Jobs, was released on April 11, 1976</p><br /><br />在 JS 中，我可以这样做，并且效果很好（2-5 的模式相同）enterNumber = prompt("Enter any number between from 1-5");enterNumber = parseInt(enterNumber);    }我基本上想做的是让所有 JS 功能（提示、if else 等）与我的 HTML 和 CSS 文件一起工作，不幸的是，我不知道如何正确设置所有这些。在这种情况下，我如何才能拥有一个工作页面，其中 JS 函数仍然可以与我在 HTML 和 CSS 中使用的功能一起工作？

Answer 1

document.write()在现代 JavaScript 中的用例非常有限，绝对不应该像您正在使用的那样使用它。任何教你这个的人显然并不真正了解 JavaScript 和文档对象模型。

至于你的问题，你需要决定“何时”运行 JavaScript，然后为该时刻设置一个事件处理程序。

请参阅下面的内联评论。

// Prepare your static data ahead of time and store it in an array.

// Here we have one array, with 3 child arrays inside of it (one for each

// question.

let facts = [

   ["The FIRST music video on MTV was for the song 'Video Killed the Radio Star', by the English new wave group The Buggles, and premiered on August 1, 1981 at 12:01 AM",

"The FIRST McDonald's restauarant opened in San Bernardino, CA, on May 15, 1940",

"The FIRST ever mobile phone call was made on April 3, 1973, by Martin Cooper, a senior engineer at Motorola",

"The FIRST photo of lightning was taken on September 2, 1882, by William Jennings, who wanted to know if lightning really had a zigzag form",

"The FIRST person to ever go down Niagara Falls in a barrel was 63-year-old Annie Edison Taylor, who was a widowed teacher. She made no money from her stunt",

"The FIRST Apple computer, developed and designed by Steve Wozniak and presented by Steve Jobs, was released on April 11, 1976"

   ],

   

   [

    "some fact",

    "some fact",

    "some fact"

   ],

   [

    "some other fact",

    "some other fact",

    "some other fact"

   ]

];

// Set up a function that will run when the button is clicked

document.querySelector("button").addEventListener("click", getFacts);

function getFacts(){

  // Always supply the second, optional (radix) argument to parseInt()

  let number = parseInt(prompt("Enter any number between from 1-5"), 10);

  // Prevent bad numbers

  if (number > facts.length || number < 0){

    alert("Bad input! Try again.");

    return;

  }

  // Get a reference to the <div> in the document where the output should go

  let output = document.getElementById("facts");

  // Separate each string in the appropriate sub-array with <br>

  // and populate the output element with all of them

  output.innerHTML = facts[number-1].join("<br>");

}

<button>Get the facts!</button>

<!-- This empty div will eventually be populated with

     the relevant facts. -->

<div id="facts"></div>