0

Estoy tratando de utilizar el método getElementById.Value() para pasarlo como un parámetro a un método en un controlador de evento. El código que llevo probado es el siguiente:

metodo(document.getElementById('txtTexto').value);

El problema es que no me aparece la propiedad value. Necesito obligatoriamente hacerlo de esta manera. ¿Alguna idea?

Éste es el código que tengo:

<input type="text" id="txtTexto" name="txtTexto" [(ngModel)]="texto">
<table class="table table-bordered table-hover table-inverse">
    <thead>
      <tr>
        <th>Nombre del Archivo</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let archivo of archivos; let i = index" onclick="cargarArchivo(document.getElementById('txtTexto'))">
        <td>{{archivo.NombreImagen}}</td>
        <td><button>Editar</button></td>
        <td><button>Eliminar</button></td>
      </tr>
    </tbody>
  </table>
</div>

3
  • 1
    ¿Y su DOM tiene realmente un elemento con id="txtTexto"? ¿Qué tipo de elemento es, un input, un div un ....? Sería conveniente editar la pregunta para mostrar el contenido HTML sobre el que intenta implementar ese código y el contexto en Javascript en el que funciona metodo, qué evento lo desencadena, etc.
    – A. Cedano
    el 14 may. 2018 a las 21:20
  • metodo(document.getElementById('txtTexto').value); qué sale si pones esto en la consola del navegador? el 14 may. 2018 a las 21:25
  • Pienso que con esto se puede guiar : stackoverflow.com/a/26793040/8933039 el 14 may. 2018 a las 21:33

2 respuestas 2

2

Esto se puede hacer de distintas formas.

  • La más flexible sería obtener el elemento por su id (Forma A) y a continuación el valor del mismo. La ventaja de este método es que obteniendo el elemento por su id, podremos tener acceso a otras propiedades del mismo si fuera necesario y además el código queda independiente del elemento en sí en el DOM.

  • O puedes pasar el valor del elemento como parámetro a la función (Forma B). Esta función hace el código más dependiente, y si quieres otros datos contenidos en el elemento, tendrás que recurrir de todos modos a document.getElementById.

Aquí tienes una prueba de ambas formas, yo optaría por la A.

function cargarArchivo() {
  var elInput = document.getElementById('txtTexto');
  console.log(elInput.value);
}

function cargarArchivoDirecto(valor) {
  console.log(valor);
}
<input type="text" id="txtTexto" name="txtTexto" placeholder="Escribe nombre del archivo" value="Test.txt" />
<table class="table table-bordered table-hover table-inverse">
  <thead>
    <tr>
      <th>Nombre del Archivo</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Archivo</td>
      <td><button onclick="cargarArchivo()">Cargar (Forma A)</button></td>
      <td><button onclick="cargarArchivoDirecto(document.getElementById('txtTexto').value)">Cargar  (Forma B)</button></td>
    </tr>
  </tbody>
</table>

P.D.:

Incluso hay una práctica todavía mejor que es no poner ninguna función dentro de los elementos HTML, creándolas mediante listeners en el mismo Javascript. De este modo, si hay que cambiar algo cambias solamente la función de JS y no tienes que modificar el HTML (esto es particularmente útil en proyectos grandes).

Suponte que tienes que recorrer decenas, cientos o miles de archivos para cambiar la función o los parámetros de elementos creados así: <button onclick="cargarArchivoDirecto(document.getElementById('txtTexto').value)">Cargar (Forma B)</button> o creados así: <button onclick="cargarArchivoDirecto()">Cargar (Forma A)</button>.

El código es más independiente si tú creas el botón así: <button id="btnCargar">Cargar</button> y luego, desde Javascript asignas un listener a ese botón mediante su id.

1

No es necesario utilizar document.getElementById() simplemente pasa el id de tu input y llamas a la variable value de ese objeto. Ejemplo

function MiFuncion(valor){
  console.log("El valor pasado es "+valor);
}
<input type="text" id="MiInput"></input>
<input type="button" value="Pasar valor" onClick="MiFuncion(MiInput.value)"></input>

1
  • Aunque la mayoría de los navegadores lo soportan, acceder a un elemento usando su id en lugar de seleccionándolo con getElementById (u otro método de selección) no es un comportamiento estándar y no es una buena práctica (el resultado puede no ser el esperado).
    – Alvaro Montoro
    el 15 may. 2018 a las 11:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.