如何通过HTML按钮调用JavaScript函数并将结果显示到段落中

我发现你的问题大概率是JSFiddle的代码作用域设置导致的——默认情况下，JSFiddle会把你的JavaScript代码包裹在window.onload的回调函数里，这意味着你的WOGen、upperB等函数都是局部变量，全局作用域（比如按钮的内联onclick属性）根本访问不到它们，所以点击按钮时会触发“WOGen is not defined”的错误（你可以打开浏览器控制台F12看看），自然无法更新段落内容。

另外，你的函数里直接把数组和字符串拼接，会显示成逗号紧挨着的列表，体验不太好，建议用join()方法把数组转成更美观的格式。

下面是两种解决思路，都不需要jQuery或外部资源：

思路1：调整JSFiddle的加载设置（简单直接） #

1. 打开JSFiddle左上角的下拉菜单（默认显示“Load Type: onLoad”）
2. 选择No wrap - in 或者 No wrap - in
3. 刷新页面后点击按钮，就能正常显示结果了

同时，你可以优化函数里的数组显示，比如把upperWO改成upperWO.join(', ')，示例：

function upperB() {
  var upperWO = [ 'pullups', 'dips', 'plank', 'incline pushups', 'decline pushups', 'pull downs' ];
  return 'today is Upper Body: ' + upperWO.join(', '); // 用join把数组转成带空格的逗号分隔字符串
}

其他函数（Legs、Abs等）也做同样的修改，这样显示的列表会更易读。

思路2：使用事件监听绑定点击（更符合现代JS规范） #

如果你不想修改JSFiddle的加载设置，可以移除按钮的内联onclick属性，改用JavaScript绑定事件监听，这样即使函数在局部作用域也能正常调用：

修改后的HTML：

<html> 
<head> </head> 
<body> 
  <button id="displayBtn">Display</button> 
  <p id='p1'></p> 
</body> 
</html>

修改后的JavaScript（保留原函数，添加事件监听）：

function upperB() {
  var upperWO = [ 'pullups', 'dips', 'plank', 'incline pushups', 'decline pushups', 'pull downs' ];
  return 'today is Upper Body: ' + upperWO.join(', ');
}

function Legs() {
  var legWO = [ 'regular squats', 'split squats', 'lunges', 'calf raises', 'glut bridges' ];
  return 'today is Leg Day: ' + legWO.join(', ');
}

function Abs() {
  var absWO = [ 'crunches', 'long arm crunches', 'scissors', 'leg ups', 'crunch kicks', 'flutter kicks', 'plank', 'hollow holds', 'star plank', 'sitting punches', 'plank rolls' ];
  return 'today is Ab Day: ' + absWO.join(', ');
}

function Calisthenics() {
  var calith = [ 'bag work', 'pushups', 'crunches', 'squats' ];
  return 'Today is calisthenics Day: ' + calith.join(', ');
}

function WOGen() {
  var NDay = new Date();
  var Day = NDay.getDay();
  if (Day === 0) {
    return '73k and Swim Laps';
  }
  if (Day === 1) {
    return upperB();
  }
  if (Day === 2) {
    return Legs();
  }
  if (Day === 3) {
    return Abs();
  }
  if (Day === 4) {
    return Calisthenics();
  }
  if (Day === 5) {
    return '73k and Swim Laps';
  }
  if (Day === 6) {
    return '73k and Swim Laps';
  }
}

// 添加事件监听
document.addEventListener('DOMContentLoaded', function() {
  const btn = document.getElementById('displayBtn');
  const p1 = document.getElementById('p1');
  btn.addEventListener('click', function() {
    p1.innerHTML = WOGen();
  });
});

这种方式不需要依赖全局作用域，代码更模块化，也避免了内联事件的潜在问题。

两种方法都能解决你的问题，选哪种看你的习惯～

内容的提问来源于stack exchange，提问作者J D