Question

JS新手。

我正在关注教程。

我有一个要求你的名字和打印的功能：

“嗨（”名字“），今天是：”实际日期“”。

如果只是放入js文件，我的功能很有用。

但是超越教程，当在按钮上试验“onclick”时，功能不会被激活。

到目前为止：

1.-功能结构良好 2.- HTML onclick午餐任何“alert（）;”消息，但是一个调用我的函数。只是提示询问你的名字。

我在谷歌和这里搜索过。

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

通常，建议您不要使用内联onclick属性将事件附加到元素。相反，使用eventListener来处理事件

//This works when your button is first in the DOM tree
var button = document.getElementsByTagName("button")[0];
button.addEventListener("click", function(){
    alert(messageParts.join(""));
});

修改

这是javascript，因此它会以.js扩展名进入文件。如果我是你，我会为你的按钮添加一个id属性，当然也会删除onclick属性，如下所示：

<button id="click">Click to enter your name!</button>

然后使用querySelector而不是我之前的代码，如下所示：

var button = document.querySelector("#click"); button.addEventListener("click", function(){ alert(messageParts.join("")); });

Answer 2

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

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

不要使用on...属性。使用JavaScript绑定您的事件处理程序（例如addEventListener方法）。

＆＃13;

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);

＆＃13;

<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>

＆＃13;

Answer 3

onclick="alert(messageParts.join(""));" onclick没有获取消息部分，因此在onclick我刚刚调用了一个函数，该函数正在执行所需的相同工作。

＆＃13;

function joinMsg() {
  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()

  ];
  alert(messageParts.join(""));
}

＆＃13;

<section>
  <button onclick="joinMsg();">Click to enter your name!</button>
</section>

＆＃13;

Javascript：函数不会激活onClick

3 个答案: