Obtener Elemento por Id y establecer el valor en JavaScript

Question 1

Tengo una función de JavaScript a la que le paso un parámetro. El parámetro representa la identificación de un elemento (un campo oculto) en mi página web. Quiero cambiar el valor de este elemento.

function myFunc(variable) {
  var s = document.getElementById(variable);
  s.value="New value"
}

Cuando hago esto, aparece un error que indica que el valor no se puede establecer porque el objeto es nulo. Pero sé que el objeto no es nulo porque lo veo en el código HTML generado por el navegador.

De todos modos, probé el siguiente código para depurar

function myFunc(variable) {
  var x = variable;
  var y = 'This-is-the-real-id'
  alert(x + ', ' + y)
  var s = document.getElementById(x);
  s.value="New value"
}

Cuando aparece el mensaje de alerta, ambos parámetros son iguales, pero sigo recibiendo el error. Pero todo funciona bien cuando lo hago.

  var s = document.getElementById('This-is-the-real-id');
  s.value="New value"

¿Cómo puedo arreglar esto?

El elemento para el que estoy configurando el valor es un campo oculto y la identificación se establece dinámicamente, a medida que se carga la página. He intentado agregar esto en el $(documento).listo función, pero no funcionó.

Question 2

Si miFunc(variable) se ejecuta antes de que el área de texto se represente en la página, obtendrá el error de excepción nula.

<html>
    <head>
        <title>index</title>
        <script type="text/javascript">
            function myFunc(variable) {
                var s = document.getElementById(variable);
                s.value = "new value";
            }
            myFunc("id1");
        </script>
    </head>

<body>
    <textarea id="id1"></textarea>
</body>

</html>
<!-- Error message: Cannot set property 'value' of null -->

Por lo tanto, asegúrese de que su área de texto exista en la página y luego llame miFunc. Puedes usar el ventana.onload o $(documento).listo función.

Question 3

Dado

<div id="This-is-the-real-id"></div>

entonces

function setText(id, newvalue) {
  var s = document.getElementById(id);
  s.innerHTML = newvalue;
}

window.onload = function() { // Or window.addEventListener("load", function() {
  setText("This-is-the-real-id", "Hello there");
}

hará lo que quieras

Dado

<input id="This-is-the-real-id" type="text" value="">

entonces

function setValue(id, newvalue) {
  var s = document.getElementById(id);
  s.value = newvalue;
}

window.onload = function() {
  setValue("This-is-the-real-id", "Hello there");
}

hará lo que quieras

function setContent(id, newvalue) {
  var s = document.getElementById(id);
  if (s.tagName.toUpperCase() === "INPUT") 
    s.value = newvalue;
  else 
    s.innerHTML = newvalue;
}

window.addEventListener("load", function() {
  setContent("This-is-the-real-id-div", "Hello there");
  setContent("This-is-the-real-id-input", "Hello there");
})

<div id="This-is-the-real-id-div"></div>
<input id="This-is-the-real-id-input" type="text" value="">

Question 4

Ninguna respuesta planteó la posibilidad de utilizar .setAttribute() además de .value():

document.getElementById('some-input').value="1337";
document.getElementById('some-input').setAttribute("value", "1337");

Este apéndice en realidad cambia el contenido del valor en la fuente de las páginas, lo que a su vez hace que el valor se actualice. form.reset()-prueba.

Question 5

Usar:

<html>

<head>
    <script>
        function updateTextarea(element)
        {
            document.getElementById(element).innerText = document.getElementById("ment").value;
        }
    </script>
</head>

<body>
    <input type="text"
           value="Enter your text here."
           id = "ment"
           style = " border: 1px solid grey; margin-bottom: 4px;"
           onKeyUp="updateTextarea('myDiv')" />
    <br>

    <textarea id="myDiv" ></textarea>
</body>

</html>

Question 6

Para cada tipo de elemento, puede usar un atributo específico para establecer el valor.

P.ej:

<div id="theValue1"></div>
window.document.getElementById("theValue1").innerText = "value div";

<input id="theValue2"></input>
window.document.getElementById("theValue2").value = "value input";

¡Puedes probar el ejemplo aquí!

Question 7

Pruébalo como a continuación. Funcionará…

<html>

<head>
    <script>
        function displayResult(element)
        {
            document.getElementById(element).value="hi";
        }
    </script>
</head>

<body>
    <textarea id="myTextarea" cols="20">
        BYE
    </textarea>
    <br>

    <button type="button" onclick="displayResult('myTextarea')">Change</button>
</body>

</html>

Question 8

Creo que el problema es la forma en que llamas a tu función de JavaScript.

Tu código es así:

<input type="button" onclick="javascript: myFunc(myID)" value="button"/>

mi identificación debe estar entre comillas.

¿Ha sido útil esta solución?