Javascript:函数不激活 onClick

Question

JS 的新功能。

我正在学习教程。

我有一个函数可以询问你的名字并打印:

“嗨(“姓名”)，今天是:“实际日期”。

如果只是放入 js 文件中，我的函数就可以很好地工作。

但是除了教程之外，当在按钮上尝试“onclick”时，这些功能并没有启动。

到目前为止:

1.- 功能结构良好。
2.- HTML onclick 启动任何“alert();”消息，但是调用我的函数的人。只需询问您的姓名即可享用午餐。

我已经在 Google 和此处进行了搜索。

Javascript function will not activate onClick 1 (但这不是我的情况，因为我的函数确实有效)。

JSFIDDLE:

jsfiddle

这是我的代码:

HTML:

<section>     
     <button onclick="alert(messageParts.join(''));">Click to enter your name!</button>
</section>

JS:

function getMonthName(index) {
var months = ["January", "February", "March",
             "April", "May", "June", "July", "August",
             "September", "October", "November", "December"];

return months[index];

}



function abbrName(text) {
    return text.substr(0,3);
}



var date = new Date();


var messageParts = [
    "Hello, ",
    prompt("Please, enter your name","Please, enter your name"),
    ". Today is ",
    date.getDate(),
    " ",
    abbrName(getMonthName(date.getMonth())),
    " ",
    ", ",
    date.getFullYear()

];

更新1:

1.- 我认为在调用外部带有“”的函数时必须使用“comillas simples”。现在我的函数可以工作，但不是 100% 如愿:

1.1.- 提示在页面加载时启动，而应在单击按钮时启动。

1.2.-启动提示时您必须输入名称，因为它不再启动。

Answer 1

messageParts 是您在 onload 函数范围内声明的变量(该函数在您的问题中不可见，因为您在 JSFiddle 配置中定义了它):

您的 onclick 属性只能访问全局变量，而 messageParts 则不能。

不要使用on... 属性。请使用 JavaScript 绑定(bind)事件处理程序(例如 addEventListener 方法)。

function getMonthName(index) {
  var months = ["January", "February", "March",
    "April", "May", "June", "July", "August",
    "September", "October", "November", "December"
  ];
  return months[index];
}


function abbrName(text) {
  return text.substr(0, 3);
}

var date = new Date();

var messageParts = [
  "Hello, ",
  prompt("Please, enter your name", "Please, enter your name"),
  ". Today is ",
  date.getDate(),
  " ",
  abbrName(getMonthName(date.getMonth())),
  " ",
  ", ",
  date.getFullYear()
];

function clickHandler(event) {
  alert(messageParts.join(""));
}

document.querySelector('button').addEventListener('click', clickHandler);

<article>
  <h1>Función User's name and date</h1>
  <p>Nombre y fecha del día</p>
  <section>
    <button type="button">Click to enter your name !</button>
  </section>
</article>