How to trigger a click Event after another with the same Button in JavaScript?

Question

I try to build a browser-based text RPG as a project to improve my JavaScript. It looks like this: Browser based Text RPG.

Now I have one Button with a click EventListener. When the button is clicked, I store the input of the form into a variable called playerName and return the player Name and some text by modifying the innerHTML of an empty paragraph.

JS:

let input = document.querySelector("#input");
let button = document.querySelector("#mainButton");
let textView = document.querySelector("#textView");

let buttonPress = function() {
  button.addEventListener("click", function() {
    if (input.value.length === 0) {
      alert("Please enter a valid Name!");
      //Evaluate Player Name
    } else if (input.value.length >= 1) {
      let playerName = input.value;
      input.value = "";
      textView.innerHTML = `Hi there ${playerName}, your adventure begins shortly! Where do you come from?`;
      input.placeholder = "Origin";
    }
  });
};

buttonPress();

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>A Tale in Space</title>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="app.css" />
  </head>
  <body>
    <div class="container d-flex justify-content-center align-items-center">
      <div class="row justify-content-center align-items-center">
        <div
          class="col-6 flex-column d-flex justify-content-center align-items-center"
        >
          <h1 class="text-center">Welcome to A Tale in Space</h1>
          <input type="text" name="" id="input" placeholder="Enter your name" />
          <button id="mainButton" type="submit" class="btn btn-danger mt-3">
            Submit
          </button>
          <p id="textView" class="text-center mt-5"></p>
        </div>
      </div>
    </div>

    <!-- Optional JavaScript -->
    <script src="app.js"></script>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

I try to figure out what I need to do to basically continue on the same page by pressing the same button. So after the name was returned I would like to change the text, asking the origin of the player by pressing the SAME button. It somehow breaks my brain.

If someone has a better suggestion of displaying my text, I am all ears.

TL;DR: How to use the same button for multiple functions?

hope this helps [configuring same button for multiple events](https://stackoverflow.com/questions/51374767/configuring-same-button-for-multiple-events) — , Sep 20 '19 at 09:01

score 0 · Answer 1 · answered Sep 20 '19 at 09:06

0

Try it to use multiple functions for one button:

button.addEventListener("click", function(){alert("click1")}, false);
button.addEventListener("click", function(){alert("click2")}, false);

answered Sep 20 '19 at 09:06

Roman Panevnyk

313
3
7

This triggers both click alerts with one click. – Stefan Rows Sep 21 '19 at 06:18

score 0 · Answer 2 · answered Sep 20 '19 at 10:15

I hope this works for you:

add name to input name

<input type="text" name="name" id="input" placeholder="Enter your name" />

Js file :

let button = document.querySelector("#mainButton");

let playerName = "";
let playerOrigin = "";

(function() {
  button.addEventListener("click", function() {
    let input = document.querySelector("#input");
    let textView = document.querySelector("#textView");
    if (input.value.length === 0) {
      alert("Please enter a valid Name!");
      //Evaluate Player Name
    } else if (input.value.length >= 1) {
      if (input.name === 'name') {
        playerName = input.value;
        input.value = "";
        textView.innerHTML = `Name : ${playerName}, Origin : ${playerOrigin}`;
        input.placeholder = "Origin";
        input.name = "origin";
      } else if (input.name === 'origin') {
        playerOrigin = input.value;
        input.value = "";
        textView.innerHTML = `Name : ${playerName}, Origin : ${playerOrigin}`;
        input.placeholder = "Enter your name";
        input.name = "name";
      }
    }
  });
})();

How to trigger a click Event after another with the same Button in JavaScript?

2 Answers2