将JavaScript变量传递至HTML并存储变量以供跨函数调用的问题

我完全理解你现在在这两个JavaScript相关的问题上卡壳了——把变量传递到HTML页面，还有把函数执行结果存成变量，这俩确实是新手常遇到的坎儿。咱们结合你的代码场景，一步步来拆解解决。

一、把JavaScript变量传递到HTML页面 #

这里给你几种最常用的实现方式，直接对应你的HTML结构来举例：

1. 用textContent/innerHTML更新元素内容 #

这是最直接的方式：先通过DOM选择器拿到页面上的元素，再把变量内容赋值给它。比如你的HTML里有.title的div，咱们可以这么做：

// 这部分写在你的japanese.js文件里
const pageTitle = "日语学习助手";
// 选中页面上的.title元素
const titleElement = document.querySelector('.title');
// 把变量内容设置到元素里
titleElement.textContent = pageTitle;

如果你的变量里包含HTML标签（比如<em>、<strong>），就换成innerHTML来渲染标签：

const styledTitle = "<strong>进阶日语学习</strong>";
titleElement.innerHTML = styledTitle;

2. 给按钮绑定事件时传递变量 #

你提到了按钮，假设你想点击按钮时把变量内容显示到页面上，咱们可以这么写：

const greeting = "こんにちは！";
// 假设按钮有个id叫greetBtn，先选中它
const greetButton = document.getElementById('greetBtn');
// 绑定点击事件，点击时把变量内容插入到页面
greetButton.addEventListener('click', () => {
  const messageDiv = document.createElement('div');
  messageDiv.textContent = greeting;
  document.body.appendChild(messageDiv);
});

3. 用自定义data属性存储变量 #

如果需要把变量临时存在元素上供后续使用，可以用HTML的data-*自定义属性：

const level = "N2";
const titleElement = document.querySelector('.title');
// 把变量存在元素的data-level属性里
titleElement.dataset.level = level;
// 后续需要时可以通过titleElement.dataset.level拿到这个值

二、把JavaScript函数的执行结果存储为变量 #

这个核心是确保你的函数有return语句，之后直接把函数调用赋值给变量就行，非常直观：

1. 基础示例：带返回值的函数 #

// 定义一个根据时间返回日语问候的函数
function getJapaneseGreeting() {
  const hour = new Date().getHours();
  if (hour < 12) {
    return "おはようございます！";
  } else if (hour < 18) {
    return "こんにちは！";
  } else {
    return "こんばんは！";
  }
}

// 调用函数，把结果存储到变量里
const currentGreeting = getJapaneseGreeting();
// 现在currentGreeting就存着函数返回的问候语了，可以直接用它做后续操作
console.log(currentGreeting); // 会输出对应时间的问候语

2. 避坑提醒：函数必须有return #

如果你的函数没有return语句，那赋值后的变量会是undefined，比如：

function badFunction() {
  const text = "こんにちは";
  // 没有写return返回内容
}
const result = badFunction();
console.log(result); // 输出undefined

所以一定要记得在函数里用return返回你需要的结果。

结合你的完整代码示例 #

假设你的HTML补全后是这样：

<html>
  <title> Japanese </title>
  <head>
    <script src="japanese.js" type="text/javascript"> </script>
    <link rel="stylesheet" type="text/css" href="japanese.css">
  </head>
  <body>
    <div class="title"> Japanese </div>
    <button id="greetBtn">点击获取问候语</button>
    <div id="greetingDisplay"></div>
  </body>
</html>

那你的japanese.js可以这么写，同时解决两个问题：

// 1. 把变量传递到HTML的.title元素
const newTitle = "日语学习助手";
const titleElement = document.querySelector('.title');
titleElement.textContent = newTitle;

// 2. 定义函数并把结果存储到变量
function getGreeting() {
  const hour = new Date().getHours();
  if (hour < 12) {
    return "おはようございます！";
  } else if (hour < 18) {
    return "こんにちは！";
  } else {
    return "こんばんは！";
  }
}
const currentGreeting = getGreeting();

// 3. 点击按钮时把存储的变量内容显示到页面
const greetBtn = document.getElementById('greetBtn');
const displayDiv = document.getElementById('greetingDisplay');

greetBtn.addEventListener('click', () => {
  displayDiv.textContent = currentGreeting;
});

内容的提问来源于stack exchange，提问作者Alexander Jephtha