Acabo de terminar un examen para una de mis clases, y una de las preguntas nos obligó a hacer un documento HTML simple. Se suponía que debíamos incluir un código JavaScript que copiara el texto de txtA y lo pusiera en txtB, pero cuando hago clic en el botón, no sucede nada.

function CopyAToB() {
  var a = document.form1.txtA.value;
  document.form1.txtB.value = a;
}
div {
  text-align: center;
  color: red;
  font-size: 42px;
}
<div>The University of Akron</div>
<form id="form1">
  <input type="text" id="txtA" />
  <input type="text" id="txtB" />
  <input type="button" value="Copy" onclick="CopyAToB();" />
</form>
2
R. Zwahlen 17 feb. 2017 a las 04:14

6 respuestas

La mejor respuesta

Está utilizando la notación DOM obsoleta para referirse a los elementos del formulario que se centran en el atributo de nombre en lugar de la ID. Por ejemplo, su código funciona si cambia las ID para nombrar atributos:

function CopyAToB() {
  var a = document.form1.txtA.value;
  document.form1.txtB.value = a;
}
div {
  text-align: center;
  color: red;
  font-size: 42px;
}
<div>The University of Akron</div>
<form name="form1">
  <input type="text" name="txtA" />
  <input type="text" name="txtB" />
  <input type="button" value="Copy" onclick="CopyAToB();" />
</form>

recomiendo encarecidamente que no haga eso y use algo más actualizado como:

function CopyAToB() {
  var a = document.getElementById('txtA').value;
  document.getElementById('txtB').value = a;
}
div {
  text-align: center;
  color: red;
  font-size: 42px;
}
<div>The University of Akron</div>
<form id="form1">
  <input type="text" id="txtA" />
  <input type="text" id="txtB" />
  <input type="button" value="Copy" onclick="CopyAToB();" />
</form>
5
j08691 17 feb. 2017 a las 01:22

Cambie su función CopyAToB a:

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;
}
<div>The University of Akron</div>
<form id="form1">
  <input type="text" id="txtA" />
  <input type="text" id="txtB" />
  <input type="button" value="Copy" onclick="CopyAToB();" />
</form>

Debe usar el getElementbyId función para encontrar los cuadros de texto; la forma en que intenta hacerlo es heredada, como señaló j08691.

2
bejado 17 feb. 2017 a las 01:25

En su lugar, adjuntaría un eventListener al botón,

Y con javascript moderno ni siquiera necesitamos usar document.getElement ... siempre y cuando nos aseguremos de que el ID del elemento HTML sea único tanto en html como en javascript (por ejemplo, no var form1_txtA = "algo no relacionado";) luego el ID es todo lo que necesitamos

Form1_txtB.value hará el mismo trabajo. tenga en cuenta que agregué un prefijo, form1_, a su identificación, aunque no es necesario, me gusta la identificación clara que dice de qué y de dónde es.

form1_button.addEventListener('click', CopyAToB);

function CopyAToB() {
  form1_txtB.value = form1_txtA.value;
}
div {
  text-align: center;
  color: red;
  font-size: 42px;
}
<div>The University of Akron</div>
<form id="form1">
  <input type="text" id="form1_txtA" />
  <input type="text" id="form1_txtB" />
  <input type="button" id="form1_button" value="Copy"/>
</form>
0
user2267175 17 feb. 2017 a las 01:44
function CopyAToB() {
    var a = document.getElementById('txtA');
    var b = document.getElementById('txtB');
    b.value = a.value;
}

Puede seleccionar el elemento html usando document.getElementById (). w3schools tiene algunos excelentes tutoriales para principiantes html / javascript. https://www.w3schools.com/jsref/met_document_getelementbyid.asp

0
Huiquan LU 17 feb. 2017 a las 01:35

Debe colocar su script en otro archivo e incluir su script solo necesita hacer lo siguiente

<script src="nameofscript.js"></script>

Fuente https://www.w3schools.com/tags/att_script_src.asp

-3
CodeManny 17 feb. 2017 a las 01:22

Debe cambiar su javascript para seleccionar el elemento por ID explícitamente porque la razón por la que no funciona es porque txtA no está definido como dijo Jaromanda X, la consola de desarrollo es su amigo. Intenta algo como esto:

var txtA = document.getElementById("txtA").value;
var txtB = document.getElementById("txtB");
txtB.value = txtA;
0
alphadmon 17 feb. 2017 a las 04:26