If I have a simple button in my html:

<button id="bgnBtn">Start Game</button>

and I want a prompt in my JS:

var userAdjective = prompt("Please provide an Adjective");

to initiate only after the button is clicked, how would I write this?

Can't seem to find this concept out there, at least for one so boiled down to basics like this.

Thanks,

If I have a simple button in my html:

<button id="bgnBtn">Start Game</button>

and I want a prompt in my JS:

var userAdjective = prompt("Please provide an Adjective");

to initiate only after the button is clicked, how would I write this?

Can't seem to find this concept out there, at least for one so boiled down to basics like this.

Thanks,

• javascript
• button
• prompt

Share Improve this question Follow asked May 17, 2016 at 22:15 jonah butlerjonah butler 7811 gold badge22 silver badges88 bronze badges 3

• 1 Possible duplicate of addEventListener vs onclick – Mike Cluck Commented May 17, 2016 at 22:19
• There's a lot of questions on this but basically you need to add an event handler. – Mike Cluck Commented May 17, 2016 at 22:20
• If you making s game, you could have an HTML input with display:none; and when click on the start game button you can change visibility and get the user input. Why use this instead of prompt, so you can match the design of the input colour borders etc. if you want this solution am sure the answer is already here in stack. – T04435 Commented May 19, 2016 at 3:23

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

Set an onclick handler for the button and then have it trigger a javascript function - note the use of the alert - just to show the functioning of the function:

function promptMe(){
    var userAdjective = prompt("Please provide an Adjective");
    alert (userAdjective);
}

<button id="bgnBtn" onclick="promptMe()">Start Game</button>

I would remend attaching an event listener to the button in your JS code.

document.querySelector('#bgnBtn').addEventListener('click', function() {
    var userAdjective = prompt("Please provide an Adjective");
    alert (userAdjective);
}

This example uses an anonymous function for handling the click event. You could also do the following:

document.querySelector('#bgnBtn').addEventListener('click', promptMe);

function promptMe() {
    var userAdjective = prompt("Please provide an Adjective");
    alert (userAdjective);
}

If you use an alert box it would look like this: Alert me

<script>
function myFunction() {
  alert("I am an alert box!");
}
</script>