CODEWITHSUNDEEP
javascripthtml
user9549194
user9549194

Reputation:

Function result shows up in the console but not in the webpage

I want to add an event listener to a form to display the form’s fields in a paragraph, without jQuery.

The text should show up in the paragraph demoJS but it doesn’t. However, when I use console.log, the excepted resuslts appear in the console.

Here’s my code:

function afficher_etudiant() {
  document.getElementById("demoJS").innerHTML +=
    document.getElementById("nom").value + "<br>" +
    document.getElementById("prenom").value + "<br>" +
    document.getElementById("num_etu").value + "<br>" +
    document.getElementById("cursus").value + "<br>";
  console.log(document.getElementById("demoJS").innerHTML);
}


var bouton = document.getElementById("formulaireJS");
bouton.addEventListener("onclick", afficher_etudiant);
bouton.addEventListener("onsubmit", afficher_etudiant);
bouton.addEventListener("submit", afficher_etudiant);
<p id="demoJS"> </p>
<form id="formulaireJS">
  Nom:<br>
  <input type="text" name="nom" id="nom" required>
  <br> Prénom:
  <br>
  <input type="text" name="prenom" id="prenom" required>
  <br> Numero étudiant:<br>
  <input type="text" name="num_etu" id="num_etu" required>
  <br>
  <select name="cursus" id="cursus" form="formulaireJS">
    <option value="math">math</option>
    <option value="info">info</option>
    <option value="cmi">CMI</option>
  </select>
  <br>
  <br>
  <br>
  <br>
  <input type="submit" value="Ajouter" class="boutonSoumission">
</form>

Upvotes: 0

Views: 930

Answers (2)

Ayushi Jain
Ayushi Jain

Reputation: 928

You can fix the code in 2 ways:

  1. directly calling the function and remove event listeners

    <input type="button" onclick="afficher_etudiant()" value="Ajouter" class="boutonSoumission" >

    • Change the type to "button" instead of submit because that will refresh a page.
    • directly call the function using onclick and remove the code for event listeners in the script

  2. In case you want to use event listeners then :

        <input type="button"  value="Ajouter"  class="boutonSoumission" id="myButton" > // for the button code

    var bouton = document.getElementById("myButton") ;  // In Script
    bouton.addEventListener("click",afficher_etudiant);

    • Add type as "button" and add an ID for the button

    • just keep 'click' event listener and remove others. Also get the ID of button instead of form.

Upvotes: 1

Daniel Beck
Daniel Beck

Reputation: 21485

Several problems here.

  • Event handlers don't have the "on" in their names -- you want "click" not "onclick" for example.
  • Appending to the demoJS innerHTML every time means you'll wind up with a lot of repeated information.
  • "Submitting" a form typically involves refreshing the page, which isn't what you want here. It's possible to prevent that refresh by returning false from the submit handler, but that can be a bit fragile; better to use a plain button instead of a "submit" button in this case.
  • Make sure you're putting handlers on the right elements -- you were attaching all of the handlers to the form itself. The "click" event probably belongs on the button instead, for example.
  • Try to reduce the number of event handlers if possible; here the form's "change" events is probably sufficient, as by itself it covers all the situations the others would have handled. (By the time the user goes to the button, the form's change handler has already done what it will do.) 
    function afficher_etudiant() {
  document.getElementById("demoJS").innerHTML =
    document.getElementById("nom").value + "<br>" +
    document.getElementById("prenom").value + "<br>" +
    document.getElementById("num_etu").value + "<br>" +
    document.getElementById("cursus").value + "<br>";
}

var theForm = document.getElementById("formulaireJS");
theForm.addEventListener("change", afficher_etudiant);

// this is redundant, but I'll include it for completeness:
var bouton = document.getElementsByClassName("boutonSoumission")[0];
bouton.addEventListener("click", afficher_etudiant);
    <p id="demoJS"> </p>

<form id="formulaireJS">
  Nom:<br>
  <input type="text" name="nom" id="nom" required>
  <br> Prénom:
  <br>
  <input type="text" name="prenom" id="prenom" required>
  <br> Numero étudiant:<br>
  <input type="text" name="num_etu" id="num_etu" required>
  <br>

  <select name="cursus" id="cursus" form="formulaireJS">
      <option value="math">math</option>
      <option value="info">info</option>
      <option value="cmi">CMI</option>
  </select>
  <br>
  <input type="button" value="Ajouter" class="boutonSoumission">
</form>

Upvotes: 1

Related Questions