Javascript Element nach ID abrufen und Wert festlegen

78

Ich habe eine Javascript-Funktion, an die ich einen Parameter übergebe. Der Parameter repräsentiert die ID eines Elements (eines versteckten Feldes) auf meiner Webseite. Ich möchte den Wert dieses Elements ändern.

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

Wenn ich dies tue, erhalte ich die Fehlermeldung, dass der Wert nicht festgelegt werden kann, da das Objekt null ist. Aber ich weiß, dass das Objekt nicht null ist, weil ich es im vom Browser generierten HTML-Code sehe. Wie auch immer, ich habe versucht, den folgenden Code zu debuggen

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

Wenn die Warnmeldung angezeigt wird, sind beide Parameter gleich, aber ich erhalte immer noch den Fehler. Aber alles funktioniert gut, wenn ich es tue

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

Wie kann ich das bitte beheben?

BEARBEITEN

Das Element, für das ich den Wert einstelle, ist ein verstecktes Feld und die ID wird dynamisch erkannt, wenn die Seite geladen wird. Ich habe versucht, dies in die Funktion $ (document) .ready aufzunehmen, aber es hat nicht funktioniert

javascript default-value jpo
quelle
2
Mal sehen, wo Sie die Funktion aufrufen (die nach dem von Ihnen angegebenen Code keinen Namen hat).
Anthony Grist
Was ist variabel? Und wie nennt man die unbenannte Funktion?
Mplungjan
Wenn Sie eine Diagnose durchführen alert()oder console.log()in solchen Fällen, sollten Sie Werte immer mit einigen Markierungszeichen umschließen, damit Sie feststellen können, ob die Zeichenfolgen streunende Leerzeichen enthalten. Also:alert("[" + x + "], [" + y + "]");
Pointy
Bitte zeigen Sie ein Beispiel dafür auf jsfiddle.net - was Sie fragen, macht keinen Sinn.
Dennis

Antworten:

73

Wenn myFunc (Variable) ausgeführt wird, bevor der Textbereich auf die Seite gerendert wird, wird der Null-Ausnahmefehler angezeigt.

<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

Stellen Sie also sicher, dass Ihr Textbereich auf der Seite vorhanden ist, und rufen Sie dann myFunc auf. Sie können die Funktion window.onload oder $ (document) .ready verwenden. Hoffe es ist hilfreich.

Xiaodan Mao
quelle
Ich erstelle das ausgeblendete Feld und erstelle dann die Schaltfläche, die die Funktion ausführt, mit der der Wert des ausgeblendeten Felds festgelegt wird. Die ID wird jedoch dynamisch festgelegt. Ich habe versucht, diese Funktion in die Funktion $ (document) .ready aufzunehmen, aber das gleiche Problem tritt auf.
jpo
@jpo Wenn die ID dynamisch festgelegt wird, sollten Sie auch sicherstellen, dass myFunc aufgerufen wird, nachdem die ID festgelegt wurde. Sie können versuchen, myFunc in der Funktion aufzurufen, mit der die ID festgelegt wird.
Xiaodan Mao
Mein Code sieht folgendermaßen aus @ Html.HiddenFor (m => m.myfield, new {id = "myId"}) <input type = "button" onclick = "javascript: myFunc (myID)" value = "button" /> .
jpo
Die Funktion wird nur aufgerufen, wenn auf die Schaltfläche geklickt wird. Dies geschieht erst, nachdem die Seite geladen wurde. Wie kann ich sonst sicherstellen, dass alles passiert, bevor auf die Schaltfläche geklickt wird?
jpo
@jpo In onclick = "javascript: myFunc (myID)" sollte myID in einfache Anführungszeichen gesetzt werden.
Xiaodan Mao
23

Gegeben

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

dann

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

wird tun was du willst

Gegeben

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

dann

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

wird tun was du willst

Code-Snippet anzeigen

mplungjan
quelle
Genau das, was ich dachte. Aber mein Ausweis und dynamisch eingestellt. Aber ich habe die gleiche Idee verwendet. Aber wenn ich Funktion aufgerufen werde, kann das Dokument das Element mit der angegebenen ID nicht finden
jpo
Wir müssen den HTML- und den Event-Handler sehen (onclick oder was auch immer)
mplungjan
4 
<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>
Dah Moymy
quelle
2

Für jeden Elementtyp können Sie ein bestimmtes Attribut verwenden, um den Wert festzulegen. Z.B:

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

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

Hier können Sie ein Beispiel ausprobieren!

Darlan D.
quelle
1

versuchen Sie es wie unten, es wird funktionieren ...

<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>
Pandian
quelle
1
Inline-Event-Handler sind eine schlechte Praxis.
jbabey
0

Ich denke, das Problem ist die Art und Weise, wie Sie Ihre Javascript-Funktion aufrufen. Ihr Code ist wie folgt:

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

myID sollte in Anführungszeichen gesetzt werden.

KI
quelle
2
Das javascript:Etikett ist völlig unnötig
mplungjan
0

Bei der Beantwortung dieser Frage ergab keine Antwort die Möglichkeit, .setAttribute()zusätzlich zu verwenden.value()

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

Obwohl dies für den ursprünglichen Fragesteller unwahrscheinlich hilfreich ist, ändert dieses Addendum tatsächlich den Inhalt des Werts in der form.reset()Seitenquelle, wodurch der Wert aktualisierungssicher wird.

Ich hoffe das kann anderen helfen.

(Oder ich in einem halben Jahr, wenn ich js Macken vergessen habe ...)

Aiyion.Prime
quelle