Pourquoi ma fonction JavaScript ne s'exécute-t-elle pas?

Question

J'ai terminé un examen pour l'une de mes classes, et l'une des questions nous demandait de créer un document HTML simple. Nous devions inclure un peu de code JavaScript qui copierait le texte de txtA et le mettrait dans txtB, mais lorsque je clique sur le bouton, rien ne se passe.

function CopyAToB() {
  var a = document.form1.txtA.value;
  document.form1.txtB.value = a;
}

div {
  text-align: center;
  color: red;
  font-size: 42px;
}

L'Université d'Akron

Answer 1

Vous utilisez une notation DOM obsolète pour faire référence aux éléments du formulaire qui se concentre sur l'attribut name au lieu de l'ID. Par exemple, votre code fonctionne si vous changez les IDs en attributs name:

function CopyAToB() {
  var a = document.form1.txtA.value;
  document.form1.txtB.value = a;
}

div {
  text-align: center;
  color: red;
  font-size: 42px;
}

L'Université d'Akron

Je vous recommande vivement de ne pas le faire et d'utiliser quelque chose de plus à jour comme:

function CopyAToB() {
  var a = document.getElementById('txtA').value;
  document.getElementById('txtB').value = a;
}

div {
  text-align: center;
  color: red;
  font-size: 42px;
}

L'Université d'Akron

Answer 2

Modifiez votre fonction CopyAToB pour :

function CopyAToB() {
    var txtA = document.getElementById("txtA");
    var a = txtA.value;
    var txtB = document.getElementById("txtB");
    txtB.value = a;
}

div {
  text-align: center;
  color: red;
  font-size: 42px;
}

L'Université d'Akron

Vous devez utiliser la fonction getElementbyId pour trouver les zones de texte; la méthode que vous essayez d'utiliser est obsolète, comme l'a souligné j08691.

Answer 3

Vous devez changer votre javascript pour sélectionner explicitement l'élément par ID car la raison pour laquelle cela ne fonctionne pas est que txtA est indéfini comme l'a dit Jaromanda X, la console de développement est votre amie. Essayez quelque chose comme ceci:

var txtA = document.getElementById("txtA").value;
var txtB = document.getElementById("txtB");
txtB.value = txtA;

Answer 4

function CopierAToB() {
    var a = document.getElementById('txtA');
    var b = document.getElementById('txtB');
    b.value = a.value;
}

Vous pouvez sélectionner l'élément html en utilisant document.getElementById(). w3schools a de super tutoriels pour les débutants en html/javascript. https://www.w3schools.com/jsref/met_document_getelementbyid.asp

Answer 5

Je voudrais attacher un eventListener au bouton à la place,

et avec le JavaScript moderne nous n'avons même pas besoin d'utiliser document.getElement... tant que nous nous assurons que l'ID de l'élément HTML est unique à la fois dans le HTML et le JavaScript (par exemple, pas de var form1_txtA = "quelque chose d'autre";) alors l'ID est tout ce dont nous avons besoin,

form1_txtB.value fera le même travail. Notez que j'ai ajouté un préfixe, form1_, à vos IDs, bien que ce ne soit pas nécessaire, j'aime les IDs clairs qui indiquent ce que c'est et d'où ça vient.

form1_button.addEventListener('click', CopyAToB);

function CopyAToB() {
  form1_txtB.value = form1_txtA.value;
}

div {
  text-align: center;
  color: red;
  font-size: 42px;
}

L'Université de Akron