如何制作一个多步表单，其中选项基于先前的响应？

Question

I have recently began working with JavaScript. I was wondering how I could make a multi-step form that gives options based on the previous steps replies. More specifically I am trying to make a game and in the first step the number of players is entered and in the second step I want text boxes for player names based on the number of players specified. How would I do this? I was thinking I could use innerHTML? What would be best to use for this? Any help is appreciated.

Answer 1

It sounds as though you have a long learning curve ahead of you, so I'd recommend using something like Vue.js (which is still Javascript based) to abstract out your coding requirements. Your question then becomes quite simple: https://codepen.io/MSCAU/pen/QWOLbBN?editors=1111

Of course, you'd need to learn Vue, but you might find it an easier path than hand-coding fairly granular functions in JS. It depends if you're doing this as a project to learn Javascript fully - in which case don't go down this road - or to produce a game which works within a reasonable amount of time.

JS

const app = new Vue({
  el: '#app',
  data: {
    num_players: 1,
    player_names: []
  }
});

HTML

<div id="app">
  <h3>Number of players</h3>
  <input type="number" v-model.number="num_players"/>
  <hr/>
  <h3>Player names</h3>
  <table>
    <tr v-for="n in num_players">
      <td>Player {{n}}</td>
      <td><input type="text" v-model="player_names[n-1]"/></td>
    </tr>
  </table>
  <hr/>
  <h3>Output</h3>
  {{ player_names }}
</div>