HTML/Javascript-Formular - Wie erstellt man ein neues div-Element, das sich überlagert?

Ich bin wirklich verwirrt darüber, wie man das macht.HTML/Javascript-Formular - Wie erstellt man ein neues div-Element, das sich überlagert?

Was ich versuche zu tun ist, haben ein Formular in HTML (nicht <form>), nur eine Reihe von <input> Tags mit einer <button>.

Grundsätzlich im javascript Code, gibt es ein Ereignis, das die Zuhörer MakeCard() Methode aktiviert wird, wenn die <button> gedrückt wird.

Die MakeCard() Methode soll dann das Formular (im HTML-Body) durch eine <div> ersetzen, die ihre eigenen zufälligen Zeug hat.

Wie kann ich dieses System arbeiten lassen? Bitte keine JQuery und andere solche Bibliotheken. Ich darf nur DOM verwenden.

Dies ist der Code, den ich bisher habe:

<html> 
<head> 
    <title>Home</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link type="text/css" rel="stylesheet" href="css/style.css"/> 
    <script> 
     window.addEventListener("load", function(){ 

     var nameOfRecipient = document.getElementById("nameOfRecipient"); 
     var colorInfo = document.getElementById("colorInformation"); 
     var fontSize = document.getElementById("fontSize"); 

     var resultNameOfRecipient = document.getElementById("resultNameOfRecipient"); 
     var resultColorInfo = document.getElementById("resultColorInformation"); 
     var resultFontSize = document.getElementById("resultFontSize"); 

     function MakeCard(){ 
      // Make the card 

      // Show the results 
      ShowResults(); 
     } 

     function ShowResults(){ 
      // Show the user choices 
      resultNameOfRecipient.innerHTML = nameOfRecipient.value; 
      resultColorInfo.innerHTML = colorInfo.value; 
      resultFontSize.innerHTML = fontSize.value; 
     } 

     document.getElementById("submitButton").addEventListener("click", MakeCard); 

     }); 

    </script> 
</head> 
<body> 
    <div id="headerContainer"> 
     Welcome to the Card Maker! 
    </div> 
    <div id="formContainer"> 
     <p>Name of recipient<input type="text" id="nameOfRecipient"></p> 
     <p>Color Information<input type="text" id="colorInformation"></p> 
     <p>Font Size<input type="number" id="fontSize"></p> 
     <input type="button" id="submitButton" value="Make Card!"> 
    </div> 
    <div id="resultContainer"> 
     <p id="resultNameOfRecipient"></p> 
     <p id="resultColorInformation"></p> 
     <p id="resultFontSize"></p> 
    </div> 
</body>

Bitte ignorieren Sie den LAST DIV MIT ID="resultContainer" und ignorieren alle Variablen, die die result vor haben. Das Zeug ist ein anderes Extra.

Es wäre erstaunlich, wenn ich nur wissen könnte, wie man ein völlig neues div, das das div mit ID="formContainer" ERSETZT, macht.

Quelle

2016-04-10 katie1245

Mit zufälligen Sachen meinst du wie eine Dankeschön-Nachricht in ihrer einfachsten Form? Wenn das der Fall ist [hier ist eine jsFiddle-Demo] (https://jsfiddle.net/damo_s/dd4x8qdt/), die zeigt, wie Sie 1. ein neues Element in js erstellen und 2. das vorhandene div durch 'id =" formContainer ersetzen würden "mit einem anderen Div mit der gleichen ID. Ich habe den Formularbehälter in einen anderen Container eingepackt, der mangels eines besseren Namens formContainerContainer genannt wird, obwohl das vermieden werden kann. –

Das Wichtigste zuerst: Warum Listener verwenden, wenn Sie onclick-Tags verwenden können? Stellen Sie die Taste so, und ändern Sie den Hörer auf eine bestimmte Funktion:

window.addEventListener("load", function(){

wird

function myfunction() {

und vergessen Sie nicht das Ende des Skripts aus}) zu ändern; zu} ..

Entfernen Sie auch den Listener von der Schaltfläche, die diese Zeile ist.

document.getElementById("submitButton").addEventListener("click", MakeCard);

und ein Onclick-Ereignis auf die Schaltfläche hinzufügen, und es auf eine Schaltfläche Typ ändern, um sicherzustellen, dass es unterwirft sich nicht:

<button type="button" id="submitButton" onclick="myfunction()">Make Card!</button>

Zweitens: Sie Variablen eigentlichen HTML festgelegt haben Elemente, die etwa so aussehen würden: HTML [buttonElement] ... Ich nehme an, was Sie wollen, ist das, was in das Element eingegeben wurde, welches das "value" -Tag ist. Sie würden das erhalten, indem die Variablen dies zu ändern:

var nameOfRecipient = document.getElementById("nameOfRecipient").value; 
     var colorInfo = document.getElementById("colorInformation").value; 
     var fontSize = document.getElementById("fontSize").value; 

     var resultNameOfRecipient = document.getElementById("resultNameOfRecipient").value; 
     var resultColorInfo = document.getElementById("resultColorInformation").value; 
     var resultFontSize = document.getElementById("resultFontSize").value;

So, jetzt haben wir die Syntax und Sachen haben tidy'd, ich möchte zum Teil erhalten, wo Sie sagten, Sie die DIV ersetzen wollte. Hier ist meine Art es zu tun:

Ich würde jedem Element im DIV eine ID geben (anders als der Knopf, wir haben das schon besprochen).

<p id="nameofrecipentp">Name of recipient<input type="text" id="nameOfRecipient"></p> 
     <p id="colorinformationp">Color Information<input type="text" id="colorInformation"></p> 
     <p id="fontsizep">Font Size<input type="number" id="fontSize"></p>

Sie könnten dann eine Funktion aufrufen, wenn die Funktion myfunction() aufgerufen wird.

function myfunction() { 
replacediv()

Und defineiv() definieren, um alle Elemente im Formular zu ersetzen, was auch immer Sie möchten.

function replacediv() { 
document.getElementById("nameofrecipentp").innerHTML = 
"Enter your data here" 
document.getElementById("colorinformationp").innerHTML = 
"Enter your data here, for the color information" 
document.getElementById("fontsizep").innerHTML = 
"enter your data here for font size" 
}

Ich denke, ich habe ziemlich alles abgedeckt. Wenn du noch Hilfe brauchst, sag es mir.

Quelle

2016-04-10 04:57:18 KingK

HTML/Javascript-Formular - Wie erstellt man ein neues div-Element, das sich überlagert?

Antwort

Verwandte Themen