如何在HTML中调用JS变量实现点击按钮生成随机消息？

你的代码存在几个关键问题，我帮你逐一修正：

核心问题分析 #

• 按钮事件绑定错误：你使用了ondblclick（双击触发）而非点击事件onclick，且事件内仅写了变量名newContent，这无法触发任何逻辑，需要绑定一个能生成并更新消息的函数。
• 现有JS代码仅在页面加载时执行一次赋值操作，点击按钮时不会重新生成新消息并更新页面内容。

修正后的完整代码 #

HTML 部分 #

<p id="content-holder"></p>
<button onclick="updateRandomMessage()">点击生成随机消息</button>

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 getRandomIndex(array) {
  return Math.floor(Math.random() * array.length);
}

// 生成随机消息
function generateRandomMessage() {
  const randomIndex = getRandomIndex(messages);
  return messages[randomIndex];
}

// 点击按钮时调用的函数：生成新消息并更新页面
function updateRandomMessage() {
  const randomMessage = generateRandomMessage();
  const contentHolder = document.getElementById('content-holder');
  contentHolder.innerHTML = randomMessage;
  console.log(randomMessage);
}

// 可选：页面加载时先显示一条初始消息
updateRandomMessage();

关键修改说明 #

1. 修正按钮事件：将ondblclick="newContent"改为onclick="updateRandomMessage()"，确保点击按钮时触发更新逻辑。
2. 新增更新函数：创建updateRandomMessage()函数，每次调用都会重新生成随机消息，再找到页面元素并更新内容，保证每次点击都能显示新消息。
3. 初始消息优化（可选）：页面加载时自动调用一次updateRandomMessage()，避免初始状态下内容为空。

修改完成后，点击按钮就能正常生成并显示新的随机消息了。

内容的提问来源于stack exchange，提问作者Jorge Martin Apresa Perez