html5 canvas javascript wait for user input -


i new javascript. working webgame. trying use loop let players enter names , select gamepiece clicking. i'm struggling make code wait user input (click on game piece image) before moving on next player.

function getplayernames(){   (var i=1; i<=numberplayers; i++) {      ctxplayers.fillstyle =  "blue";     ctxplayers.textalign = "center";     var playername = prompt("name");     ctxplayers.filltext (playername + " select game piece", cnvplayers.width/2,cnvplayers.height* (1/6));      // here want wait player click on game piece image    }; }; 

in vb.net version used while loop application.doevents. it's understanidng javascript doesn't have equivalent, hope rather simple solution allow accomplish same.

thanks in advance.

the problem you're using prompt, stops execution of script, , need wait click, there's no way stop execution can prompt.

a better approach check values of player names , images each time there change in name or image clicked.

will not give code that, learn how you'd it, should enough started. please don't use prompt combined click listeners, create input field.

here's super simple example:

// keeping our input elements in variable  var inputs = document.getelementsbytagname('input');    // loop on them attach them keyup listener  for(var = 0; < inputs.length; i++) {    inputs[i].addeventlistener('keyup', checknames);  }    // function called on each keyup event (and once in beginning)  function checknames() {    var playersready = 0;    for(var = 0; < inputs.length; i++) {      if (inputs[i].value != "") {        playersready++; // increment value if input not empty      }    }      // output message    document.getelementbyid('status').textcontent = "waiting " +      (inputs.length - playersready) + " more player" +       (inputs.length - playersready == 1 ? "" : "s") + // line pluralizing      "..." +       (inputs.length - playersready == 0 ? "the game can start now!" : "");  }    // initial call, first status message  // without needing keyup event first  checknames();
<input type="text" placeholder="player1 name" />  <input type="text" placeholder="player2 name" />  <input type="text" placeholder="player3 name" />  <p id="status"></p>

you can expand example adding images, , keeping track of how many of them selected, how keep track of non-empty player names.

once comfortable that, bit more advanced task try creating boxes player names directly on canvas , listening focus , keyboard inputs on them, that's whole question...