如何使用 JavaScript 文件中的变量到我的 HTML 文件？-解网

问：

我是新手，需要帮助。我的 javascript 文件中有一个变量，我想响应 HTML 文件中的按钮。单击按钮后，我希望我的按钮调用变量，并且会出现一条新消息。

该项目的目标是在单击按钮后生成新的随机消息。

这是下面的 JavaScript

const messages = [
  "Hello!",
  "How are you doing today?",
  "Have a great day!",
  "What's up?",
  "Hope you're doing well!",
  "Take care!",
  "Enjoy your day!",
  "Stay positive!",
  "Sending you good vibes!",
  "Smile and be happy!",
  "Did I do this right?",
  "I wonder",
  "Hello World",
  "Hey There",
  "Elijah is awesome",
  "arrays are powerful",
  "Javascript is really hard",
  "HTML and CSS are easy"
];

// Function to generate a random index
function getRandomIndex(array) {
  return Math.floor(Math.random() * array.length);
}

// Generate a random message
function generateRandomMessage() {
  const randomIndex = getRandomIndex(messages);
  const randomMessage = messages[randomIndex];
  return randomMessage;
}


// Call the function to generate a random message

const randomMessage = generateRandomMessage();

console.log(randomMessage);


var newContent = randomMessage;
var contentHolder = document.getElementById('content-holder');

contentHolder.innerHTML = newContent;

<p id="content-holder">
</p>
<button ondblclick="newContent">click</button>

我尝试使用“onclick”属性，但没有成功

我尝试使用 getElementById 但没有成功，也许我做得不对？

我试着在谷歌上搜索它，最终到达了我开始的地方......失去

我不知道该尝试什么，我刚刚开始我的编码之旅，迷路了。有人可以帮忙吗？

javascript html 变量 dom onclick

const messages = [
    "Hello!",
    "How are you doing today?",
    "Have a great day!",
    "What's up?",
    "Hope you're doing well!",
    "Take care!",
    "Enjoy your day!",
    "Stay positive!",
    "Sending you good vibes!",
    "Smile and be happy!",
    "Did I do this right?",
    "I wonder",
    "Hello World",
    "Hey There",
    "Elijah is awesome",
    "arrays are powerful",
    "Javascript is really hard",
    "HTML and CSS are easy"
];

// Function to generate a random index
function getRandomIndex(array) {
    return Math.floor(Math.random() * array.length);
}

// Generate a random message
function generateRandomMessage() {
    const randomIndex = getRandomIndex(messages);
    const randomMessage = messages[randomIndex];
    return randomMessage;
}


// Call the function to generate a random message

function postMes (){
    const randomMessage = generateRandomMessage();


    var newContent = randomMessage;
    var contentHolder = document.getElementById('content-holder');

    contentHolder.innerHTML = newContent;
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<p id="content-holder">
</p>
<button onclick="postMes()">click</button>

<script src="script.js"></script>
</body>
</html>

只需将发布消息的部分放在函数中即可

const messages = [
  "Hello!",
  "How are you doing today?",
  "Have a great day!",
  "What's up?",
  "Hope you're doing well!",
  "Take care!",
  "Enjoy your day!",
  "Stay positive!",
  "Sending you good vibes!",
  "Smile and be happy!",
  "Did I do this right?",
  "I wonder",
  "Hello World",
  "Hey There",
  "Elijah is awesome",
  "arrays are powerful",
  "Javascript is really hard",
  "HTML and CSS are easy"
];

// Function to generate a random index
function getRandomIndex(array) {
  return Math.floor(Math.random() * array.length);
}

// Generate a random message
function generateRandomMessage() {
  const randomIndex = getRandomIndex(messages);
  const randomMessage = messages[randomIndex];
  var newContent = randomMessage;
  var contentHolder = document.getElementById('content-holder');

  contentHolder.innerHTML = newContent;
}

<p id="content-holder">
</p>
<button onclick="generateRandomMessage()">click</button>

如何使用 JavaScript 文件中的变量到我的 HTML 文件？

How do I use a variable from a JavaScript file to my HTML file?

评论

评论

评论