Visualizzazione dei risultati da 1 a 3 su 3

Discussione: creazione dinamica di n caselle di testo

  1. #1
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    99

    creazione dinamica di n caselle di testo

    Vorrei disegnare, con canvas, un poligono irregolare di n vertici e quindi, per avere l'input, dovrei creare n caselle di testo per le ascisse e n caselle di testo per le ordinate di questi n vertici.
    Desidererei un aiuto per creare dinamicamente queste caselle di testo al variare di n (ottenuto da un input iniziale) con un ciclo for che non riesco a impostare. Grazie

    lanvoel

  2. #2
    Ciao, la funzione createInput genera i campi in base al numero di vertici.
    Spero vada bene.

    codice:
    <!DOCTYPE>
    <html><head>
    
    <style>
    body { font:13px Arial; }
    input { width:80px; padding:6px; margin:2px 8px 8px 0; }
    
    </style>
    <script>
    
    var num;
     _e=function(l){ return document.getElementById(l) }
    isNum=function(n) { return (!isNaN(n) && !isNaN(parseFloat(n))) };
    
    
    createInput=function(){
       var r, n, s="";
    
       num=parseInt(_e("id_n").value)||0;
       if(!num || num<3) { alert("Numero vertici errato!"); return; }
    
       // crea num campi di input
       for(r=0; r<num; r++){
          s+="x"+r+" <input id='id_x"+r+"' /><br>"+
             "y"+r+" <input id='id_y"+r+"' /><br><br>";
       }
    
       s+="<button onclick='drawPoly()'>Disegna poligono</button>";
    
       _e("id_wrap").innerHTML=s;
     },
    
    
    
    drawPoly=function(){
      var r, c, x,y, p=[];
    
      for(r=0; r<num; r++){
        x=_e("id_x"+r).value;
        y=_e("id_y"+r).value;
        if(!isNum(x) || !isNum(y) ){  alert("inserire solo numeri!"); return; }
        p[r*2]=+x;
        p[r*2+1]=+y;
      }
    
      c=_e("id_cnv").getContext("2d");
      c.strokeStyle="#A00";
      c.clearRect(0,0,400,400);
    
      c.beginPath();
      c.moveTo(p[0], p[1]);
    
      for(r=1; r<num; r++) c.lineTo(p[r*2], p[r*2+1]);
    
      c.lineTo(p[0], p[1]);
      c.closePath();
      c.stroke();
    }
    
    </script>
    </head>
    <body>
    
    N. <input id='id_n' value=3 />
    <button onclick='createInput()'>Nuovo poligono</button>
    <br><br>
    <div id='id_wrap' style='width:240px;'></div>
    <canvas id='id_cnv' style='position:absolute;left:200px;top:80px;border:1px solid #AAA;' width='400' height='400'></canvas>
    
    </body>
    </html>

  3. #3
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    99
    Grazie Tonenge per il codice che mi hai regalato e che risolve in modo completo il mio problema. Quindi il codice non va bene, ma benissimo.
    Io, però, sono solo un dilettante e trovo nel tuo programma molte istruzioni che non conosco; in particolare desidererei conoscere la differenza tra il tipo funzione che uso abitualmente:
    function nomeFunzione()
    {
    istruzioni;
    }

    e quello che usi tu:
    nomeFunzione=function()
    {
    istruzioni;
    }
    Perché ho già provato che non dono equivalenti.
    Grazie

    lanvoel

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.