Je suis tout nouveau en JavaScript et j'ai honte de dire que je n'arrive pas à comprendre cela. J'essaie de créer un site Web qui analyse les noms et prénoms pour générer des adresses e-mail. J'ai déplacé la fonction onclick () en dehors de onload () et cela n'a fait que créer plus de problèmes. Toute aide serait grandement appréciée. Je m'excuse pour mon ignorance.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Email Address Title</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
  <header>
    <h3>Enter your first and last name and then click the button below to get your Email Account info.</h3>
  </header>

  <main>
    <section class="inputarea">
      <p>First Name: <input type="text" id="fname"></p>
      <p>Last Name: <input type="text" id="lname"></p>
      <button id="genemail">Generate Email</button></section>
    <section class="outputArea"></section>
  </main>
  <br><hr>
  <footer id="by-line">CIS 425 - JavaScript Practice</footer>
  <script src="script.js"></script>
  </body>
</html>

JavaScript:

window.onload = function() {
  //alert("Just finished loading the webpage in the window.");

  
  
}

document.getElementById("genemail").onclick = processForm(){
 // alert("Just finished loading the webpage in the window.");
  var firstname = document.getElementById("fname").value;
  var lastname = document.getElementById("lname").value;

  console.log(firstname + " " + lastname);

  var label = document.getElementsByClassName("outputArea");

  label[0].innerHTML = "Your Email Address: " + firstname + "." + lastname + "@gmail.com";
  
  document.getElementById("by-line").innerHTML = document.getElementById("by-line").innerHTML + " / Created By: Tony Vance";
}
0
TonyVance 30 oct. 2020 à 10:25

3 réponses

Meilleure réponse

La ligne document.getElementById("genemail").onclick = processForm(){ est le problème, vous ne pouvez pas nommer la fonction processForm ici. Si vous le remplacez par le mot clé function cela fonctionne très bien, voyez ce violon: https: // jsfiddle. net / jsk0byvu /

0
MarcelKohlmeyer 30 oct. 2020 à 07:40

Vous pouvez essayer le code ci-dessous en JavaScript:

document.getElementById("genemail").addEventListener("click", processForm, false);
function processForm(){
 alert("Just finished loading the webpage in the window.");
   var firstname = document.getElementById("fname").value;
  var lastname = document.getElementById("lname").value;

  console.log(firstname + " " + lastname);

  var label = document.getElementsByClassName("outputArea");

  label[0].innerHTML = "Your Email Address: " + firstname + "." + lastname + "@gmail.com";
  
  document.getElementById("by-line").innerHTML = document.getElementById("by-line").innerHTML + " / Created By: Tony Vance";
}
0
Maheshvirus 30 oct. 2020 à 07:33

Si vous voulez attribuer une fonction directement à l'événement onclick, vous devez utiliser une fonction anonyme:

document.getElementById("genemail").onclick = function(){
 // alert("Just finished loading the webpage in the window.");
  var firstname = document.getElementById("fname").value;
  var lastname = document.getElementById("lname").value;

  console.log(firstname + " " + lastname);

  var label = document.getElementsByClassName("outputArea");

  label[0].innerHTML = "Your Email Address: " + firstname + "." + lastname + "@gmail.com";
  
  document.getElementById("by-line").innerHTML = document.getElementById("by-line").innerHTML + " / Created By: Tony Vance";
}

Si vous ne souhaitez pas utiliser une fonction anonyme et que votre fonction est sans paramètre, définissez votre fonction séparément et attribuez-la:

function processForm(){
 // alert("Just finished loading the webpage in the window.");
  var firstname = document.getElementById("fname").value;
  var lastname = document.getElementById("lname").value;

  console.log(firstname + " " + lastname);

  var label = document.getElementsByClassName("outputArea");

  label[0].innerHTML = "Your Email Address: " + firstname + "." + lastname + "@gmail.com";
  
  document.getElementById("by-line").innerHTML = document.getElementById("by-line").innerHTML + " / Created By: Tony Vance";
}

document.getElementById("genemail").onclick = processForm; 
1
1_bug 30 oct. 2020 à 07:42