首頁猿問如何在 HTML 頁面中正確實現...

如何在 HTML 頁面中正確實現 Javascript 功能

JavaScript

互換的青春 2023-08-18 10:18:09

我有一個項目即將到期，我需要制作一個以某種方式使用 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 中使用的功能一起工作？

查看完整描述

1 回答

弒天下

TA貢獻1818條經驗獲得超8個贊

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 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. -->

反對回復 2023-08-18

1 回答
0 關注
118 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何在 HTML 頁面中正確實現 Javascript 功能

如何在 HTML 頁面中正確實現 Javascript 功能

1 回答

添加回答