web-dev-qa-db-fra.com

Javascript Obtenir élément par ID et définir la valeur

J'ai une fonction javascript à laquelle je passe un paramètre. Le paramètre représente l'identifiant 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 le fais, j'obtiens une erreur indiquant que la valeur ne peut pas être définie car l'objet est null. Mais je sais que l'objet n'est pas nul parce que je le vois dans le code html généré par le navigateur. Quoi qu'il en soit, j'ai essayé le code suivant pour déboguer

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 identiques, mais l'erreur persiste. Mais tout fonctionne bien quand je le fais

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

Comment puis-je résoudre ce problème s'il vous plaît

MODIFIER

L'élément pour lequel je règle la valeur est un champ masqué et l'id est détecté dynamiquement, au fur et à mesure du chargement de la page. J'ai essayé d'ajouter ceci dans la fonction $ (document) .ready mais je n'ai pas fonctionné

javascriptdefault-value
65
jpo

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

<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 zone de texte existe dans la page, puis appelez myFunc, vous pouvez utiliser la fonction window.onload ou $ (document) .ready. J'espère que c'est utile.

61
Xiaodan Mao

Donné

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

ensuite

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

Donné

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

ensuite

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

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="">
22
mplungjan
<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>
4
Dah Moymy

essayez comme ci-dessous ça va marcher ...

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

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 exemple ici!

1
Darlan Dieterich

Je pense que le problème est la façon dont vous appelez votre fonction javascript. Votre code est comme suit:

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

myID doit être placé entre guillemets.

0
K.I