Zeigen Sie Zeilen im laufenden Betrieb mit JS vor dem Senden des Formulars: nichts wird gedruckt

Question

Ich versuche, eine Liste von HTML-Zeilen dynamisch nach der Anzahl innen eingegeben und Eingabe Text eines Formulars zu zeigen. Die Form wird nachgereicht und die Informationen in eine mySQL-Datenbank gespeichert PHP, aber ich will (davor), eine Liste der Elemente on the fly mit Javascript zeigt eine andere Taste und die nicht einen einreichen.

Aber es wird nicht funktionieren (hier ist die fiddle).

Das ist mein HTML-Formular:

<form name="configurarCursoForm" method="POST" action="guardarConfigCurso.php"> 
    <div class="form-group"> 
    <label for="sumarioCurso">Cuántas clases para el Cronograma?</label> 
    <input type="text" name="cantClases"> 
    <input id='generarCronograma' type='button' onclick='return generarCronograma()' value='Generar Cronograma'> 
    </div>      
<div id="output"></div> 

Und hier ist meine Javascript-Funktion:

function generarCronograma() { 
    var cant = document.forms["configurarCursoForm"]["cantClases"].value; 
    if (cant && !isNaN(cant)) { 
    for ($i=0; $i<cant; $i++) { 
     var e = 0; 
     var fecha = " Fecha <input style='width:20%;' type='text' name='fecha"+($i+1)+"'> "; 
     var bolilla = " Bolilla <input style='width:20%;' type='text' name='bolilla"+($i+1)+"'> "; 
     var docente = " Docente <input style='width:20%;' type='text' name='docente"+($i+1)+"'> "; 
     var link = " Link <input style='width:20%;' type='text' name='link"+($i+1)+"'> <br>"; 
     $('#output').append(fecha, bolilla, docente, link); //agregamos las celdas necesarias 
    } 
    } 
} 

Ich bin sicher, es gibt einige offensichtliche Fehler hier, aber kann es nicht finden.

Answer 1

Es gibt drei Gründe, warum der Code in der Geige nicht funktioniert:

1. Die JS hat die Standard-Geige Option in einem onload-Handler eingewickelt werden, was bedeutet, dass Ihre Funktion nicht global ist und Auf ein Inline-Attribut onclick= kann nicht zugegriffen werden. Klicken Sie auf die Schaltfläche JavaScript-Optionen in der oberen rechten Ecke des JS Fenster und ändern Sie die „Load Typ“ Option „onLoad“ auf „No wrap - in Kopf“.

2. Sie versuchen, eine jQuery-Funktion zu verwenden, aber nicht jQuery in der Geige enthalten. Wählen Sie in den JS-Optionen Ihre bevorzugte Version von jQuery aus.

3. Ihr Eingangselement hat id='generarCronograma', die den gleichen Namen wie die Funktion ist. Auf Element-IDs kann auch als globale Variable zugegriffen werden, sodass die Verwendung des gleichen Namens die Dinge verwirrt. Sie würden dies als Fehler sehen in der Konsole Ihres Browsers „Uncaught Typeerror: generarCronograma ist keine Funktion“. Ändern Sie die ID (oder entfernen Sie sie, da Sie sie scheinbar nicht verwenden).

Mit diesen drei Änderungen funktioniert es: https://jsfiddle.net/Lb1prL4k/4/