仅限 Javascript - 我提交了一个表单但没有任何反应

Question

我是 Javascript 新手。我正在尝试通过练习来学习它。我正在做的这个看起来并不难，但我有一个小问题。

我有一个包含 3 个文本输入和一个提交按钮的表单。通过按下按钮，我获得了字段值并使用这些值创建了一个文本 block 。然后隐藏表单。

当我点击按钮时，表单被隐藏，但文本 block 没有被创建。

如果我将 input type = submit 替换为 input type = button，则会创建文本 block ，但所需属性不起作用。

我预计:我单击第一个按钮，出现表单。我填写表单并单击按钮，创建文本 block ，隐藏表单，然后出现第一个按钮。

结果:我单击第一个按钮，出现表单。我填写表单并单击按钮，表单被隐藏，第一个按钮出现。

function clicBoutonAjouter() {
  // On récupère les valeurs du formulaire
  var formAuteur = document.getElementById("form1").value;
  var formTitre = document.getElementById("form2").value;
  var formUrl = document.getElementById("form3").value;

  // Création élément url
  var formDivTextUrl = document.createElement("span");
  formDivTextUrl.appendChild(document.createTextNode(formUrl));

  // Création élément titre cliquable
  var formDivTextTitre = document.createElement("a");
  formDivTextTitre.classList.add("titre")
  formDivTextTitre.href = ("//" + formUrl); // à corriger : me renvoie en local/google.fr
  formDivTextTitre.appendChild(document.createTextNode(formTitre));

  // Création élément auteur
  var formDivTextAuteur = document.createElement("span");
  formDivTextAuteur.appendChild(document.createTextNode("Ajouté par " + formAuteur));

  // Assemblage ligne un
  var formLigenUn = document.createElement("h4");
  formLigenUn.classList.add("ligneUn");
  formLigenUn.appendChild(formDivTextTitre);
  formLigenUn.appendChild(formDivTextUrl);

  // Assemblage bloc
  var formDiv = document.createElement("div");
  formDiv.classList.add("lien");
  formDiv.appendChild(formLigenUn);
  formDiv.appendChild(formDivTextAuteur);

  // Affichage
  var element = document.getElementById("contFormulaire");
  element.insertAdjacentElement('afterend', formDiv);

  var formulaire1 = document.getElementById("form1");
  formulaire1.classList.replace("visible", "invisible");

  var formulaire2 = document.getElementById("form2");
  formulaire2.classList.replace("visible", "invisible");

  var formulaire3 = document.getElementById("form3");
  formulaire3.classList.replace("visible", "invisible");

  boutonAjout.classList.replace("visible", "invisible");

  document.getElementById("ladiv");
  var ladiv = document.getElementById("ladiv");
  ladiv.classList.replace("invisible", "visible");
}

<h1>Activité 2</h1>
<!-- Les nouveaux éléments sont ajoutés dans cette balise -->
<div id="contenu">
  <form id="contFormulaire">
    <div id="ladiv" class="visible">
      <button id="boutonFormulaire" type="button" onclick="clicBoutonAjoutLien()">Ajouter un lien</button>
    </div>
    <input type="text" class="invisible" id="form1" name="form1" placeholder="Entrer votre nom" required>
    <input type="text" class="invisible" id="form2" name="form2" placeholder="Entrer le titre du lien" required>
    <input type="text" class="invisible" id="form3" name="form3" placeholder="Entrer l'URL du site" required>
    <input type="submit" value="Ajouter" id="boutonAjout" class="invisible" onsubmit="clicBoutonAjouter()">
  </form>
</div>

Answer 1

你需要移动 onsubmit="return clicBoutonAjouter()" 来形成标签

和 在 clicBoutonAjouter 上返回 false 以防止页面重新加载。

function clicBoutonAjouter() {
// On récupère les valeurs du formulaire
var formAuteur = document.getElementById("form1").value;
var formTitre = document.getElementById("form2").value;
var formUrl = document.getElementById("form3").value;

    // Création élément url
var formDivTextUrl = document.createElement("span");
formDivTextUrl.appendChild(document.createTextNode(formUrl));

// Création élément titre cliquable
var formDivTextTitre = document.createElement("a");
formDivTextTitre.classList.add("titre")
formDivTextTitre.href = ("//" + formUrl); // à corriger : me renvoie en local/google.fr
formDivTextTitre.appendChild(document.createTextNode(formTitre));

// Création élément auteur
var formDivTextAuteur = document.createElement("span");
formDivTextAuteur.appendChild(document.createTextNode("Ajouté par " + formAuteur));

// Assemblage ligne un
var formLigenUn = document.createElement("h4");
formLigenUn.classList.add("ligneUn");
formLigenUn.appendChild(formDivTextTitre);
formLigenUn.appendChild(formDivTextUrl);

// Assemblage bloc
var formDiv = document.createElement("div");
formDiv.classList.add("lien");
formDiv.appendChild(formLigenUn);
formDiv.appendChild(formDivTextAuteur);

// Affichage
var element = document.getElementById("contFormulaire");
element.insertAdjacentElement('afterend', formDiv); 

var formulaire1 = document.getElementById("form1");
formulaire1.classList.replace("visible", "invisible");

var formulaire2 = document.getElementById("form2");
formulaire2.classList.replace("visible", "invisible");

var formulaire3 = document.getElementById("form3");   
formulaire3.classList.replace("visible", "invisible");

boutonAjout.classList.replace("visible", "invisible");

document.getElementById("ladiv");
var ladiv = document.getElementById("ladiv");
ladiv.classList.replace("invisible", "visible");
return false;
}

<!-- Les nouveaux éléments sont ajoutés dans cette balise -->
<div id="contenu">

    <form id ="contFormulaire" onsubmit="return clicBoutonAjouter()">
            <div id="ladiv" class="visible">
                <button id="boutonFormulaire" type="button" onclick="clicBoutonAjoutLien()">Ajouter un lien</button>
            </div>
            <input type="text" class="invisible" id="form1" name="form1" placeholder="Entrer votre nom" required>
            <input type="text" class="invisible" id="form2" name="form2" placeholder="Entrer le titre du lien" required>
            <input type="text" class="invisible" id="form3" name="form3" placeholder="Entrer l'URL du site" required>
            <input type="submit" value="Ajouter" id="boutonAjout" class="invisible" >
    </form>

</div>