Javascript: function does not activate onClick

Question

New on JS.

I'm following a tutorial.

I've a function that ask for your name and prints:

"Hi ("name"), today is: "actual date"".

My function works great if just put in the js file.

But going beyond the tutorial, when experimenting with "onclick" on a button, the functions is not lunched.

So far:

1.- The functions is well structurated.
2.- HTML onclick lunches any "alert();" message, but the one calling my function. Just a prompt asking for your name is lunched.

I've searched Google and here.

Javascript function will not activate onClick 1 (but this is not my case, since my function do work).

JSFIDDLE:

jsfiddle

Here is my code:

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

];

UPDATE 1:

1.- I think i have to use 'comillas simples' when calling a functions with "" in the outside. Now my function works, but not 100% as wished:

1.1.- The prompt is launched when page loads, when it should be launched when clicking the button.

1.2.-You have to enter a name when the prompt is launched, because it's not launched anymore.

You are mixing quotes all the time, when you use ", you cant use " once more inside - you need to change it to ' example: you cant use "Hi ("name")", you should use "Hi ('name')" — areim
– areim, Commented Aug 11, 2015 at 10:11
Please load the javascript before the html is loaded like this jsfiddle.net/OmarGon/mxe6ke1j — h0lyalg0rithm
– h0lyalg0rithm, Commented Aug 11, 2015 at 10:11

Quentin · Accepted Answer · 2015-08-11 10:11:43Z

2

messageParts is a variable that you declare in the scope of your onload function (the function is not visible in you question because you defined it in your JSFiddle configuration):

Your onclick attribute can only access global variables, which messageParts is not.

Don't use on... attributes. Bind your event handlers with JavaScript instead (e.g. the addEventListener method).

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>

answered Aug 11, 2015 at 10:11

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Omar Gonzales Over a year ago

i see the code works on jsfiddle. But not in my local preview. Should i add something, somewhere? What should i look for? *the prompt lunches, but clicking on "button" has not effect.

Quentin Over a year ago

@OmarGonzales — I explained what you have to do in this answer. I even gave a complete code example.

jonny · Accepted Answer · 2015-08-11 10:34:23Z

2

Generally you're advised not to use the inline onclick attribute for attaching events to your elements. Instead, use an eventListener to handle the event

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

EDIT

This is javascript so it will go in the file with the .js extension. If I were you, I would add an id attribute to your button, and of course remove the onclick attribute, like so:

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

And then instead of my previous code, use a querySelector, like so:

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

edited Aug 11, 2015 at 10:34

answered Aug 11, 2015 at 10:09

jonny

3,1291 gold badge21 silver badges34 bronze badges

2 Comments

Omar Gonzales Over a year ago

yes the button is first in the DOM. This code goes in the "js" file, right? How should i change the HTML (do i have to?)? I need the prompt to be launched when click the button not when loading the page. thanks.

jonny Over a year ago

@OmarGonzales see my EDIT

Dimag Kharab · Accepted Answer · 2015-08-11 10:27:22Z

0

onclick="alert(messageParts.join(""));" onclick wasn't getting the message part, so in onclick I have just called a function which is doing the same job as desired.

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(""));
}

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

edited Aug 11, 2015 at 10:27

answered Aug 11, 2015 at 10:09

Dimag Kharab

4,5391 gold badge27 silver badges47 bronze badges

1 Comment

Omar Gonzales Over a year ago

Thanks noise. Tried this, is good. But the prompt for your name should be load just when clicking the button. With my code, and this code, it loads when the page is openened.

Collectives™ on Stack Overflow

Javascript: function does not activate onClick

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related