Javascript Obtenir l'élément par Id et définir la valeur

Question

Javascript Obtenir l'élément par Id et définir la valeur

Demandé el 1 de Février, 2013: Quand la question a-t-elle été
538706 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai une fonction javascript à laquelle je passe un paramètre. Le paramètre représente l'id d'un élément (un champ caché) dans ma page web. Je veux changer la valeur de cet élément.

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

Lorsque je fais cela, je reçois un message d'erreur indiquant que la valeur ne peut être définie car l'objet est nul. Mais je sais que l'objet n'est pas nul car je le vois dans le code html généré par le navigateur. Quoi qu'il en soit, j'ai essayé de déboguer avec le code suivant

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'
}

Lorsque le message d'alerte s'affiche, les deux paramètres sont les mêmes, mais j'obtiens toujours l'erreur. Mais tout fonctionne bien lorsque je fais

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

Comment puis-je réparer cela, s'il vous plaît ?

EDIT

L'élément pour lequel je fixe la valeur est un champ caché et l'id est déterminé dynamiquement, lors du chargement de la page. J'ai essayé d'ajouter ceci dans la fonction $(document).ready mais cela n'a pas fonctionné.

Demandé el 1 de Février, 2013 par jpo

Answer 1

5 Réponses

Answer 2

92voto

Xiaodan Mao Points 455

Si myFunc(variable) est exécuté avant que le textarea ne soit rendu à la page, vous obtiendrez l'erreur null exception.

<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

Donc, assurez-vous que votre textarea existe bien dans la page, puis appelez myFunc, vous pouvez utiliser window.onload ou la fonction $(document).ready. J'espère que c'est utile.

Répondu el 1 de Février, 2013 par Xiaodan Mao (455 Points )

Answer 3

29voto

mplungjan Points 36458

Étant donné que

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

puis

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");
}

fera ce que vous voulez

Étant donné que

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

puis

function setValue(id,newvalue) {
  var s= document.getElementById(id);
  s.value = newvalue;
}    
window.onload=function() {
  setValue("This-is-the-real-id","Hello there");
}

fera ce que vous voulez

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="">

Répondu el 1 de Février, 2013 par mplungjan (36458 Points )

Answer 4

8voto

Aiyion.Prime Points 689

Je suis tombé sur cette question, aucune réponse n'a évoqué la possibilité d'utiliser .setAttribute() en plus de .value()

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

Bien qu'il soit peu probable qu'il soit utile à l'auteur de la question initiale, cet addendum change en fait le contenu de la valeur dans la source des pages, ce qui a pour effet de mettre à jour la valeur form.reset() -résistant.

J'espère que cela pourra aider d'autres personnes.

(Ou moi dans six mois, quand j'aurai oublié les bizarreries...)

Répondu el 4 de Février, 2020 par Aiyion.Prime (689 Points )

Answer 5

4voto

Dah Moymy Points 41

<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>

Répondu el 5 de Juin, 2014 par Dah Moymy (41 Points )

Answer 6

3voto

Darlan Dieterich Points 168

Pour chaque type d'élément, vous pouvez utiliser un attribut spécifique pour définir la valeur. Par exemple :

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

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

Vous pouvez essayer l'exemple ici !

Répondu el 2 de Avril, 2019 par Darlan Dieterich (168 Points )

Javascript Obtenir l'élément par Id et définir la valeur

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Javascript Obtenir l'élément par Id et définir la valeur

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: