Holen Sie sich Element nach ID und legen Sie den Wert in JavaScript fest

Question 1

Ich habe eine JavaScript-Funktion, an die ich einen Parameter übergebe. Der Parameter stellt die ID eines Elements (ein verstecktes Feld) auf meiner Webseite dar. Ich möchte den Wert dieses Elements ändern.

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

Wenn ich das mache, 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 zum Debuggen zu verwenden

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, ich erhalte jedoch weiterhin die Fehlermeldung. Aber wenn ich das tue, funktioniert alles gut

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

Wie kann ich das beheben?

Das Element, für das ich den Wert festlege, ist ein ausgeblendetes Feld und die ID wird beim Laden der Seite dynamisch festgelegt. Ich habe versucht, dies im hinzuzufügen $(Dokument).bereit Funktion, aber es hat nicht funktioniert.

Question 2

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

<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 auf myFunc. Du kannst den … benutzen window.onload oder $(Dokument).bereit Funktion.

Question 3

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

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

werde tun, was du willst

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

Keine Antwort brachte die Möglichkeit der Verwendung zum Ausdruck .setAttribute() zusätzlich zu .value():

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

Dieser Nachtrag ändert tatsächlich den Inhalt des Werts in der Seitenquelle, was wiederum zu einer Aktualisierung des Werts führt form.reset()-nachweisen.

Question 5

Verwenden:

<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

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

Sie können das Beispiel hier ausprobieren!

Question 7

Probieren Sie es wie folgt aus. Es wird klappen…

<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

Ich denke, das Problem liegt in der Art und Weise, wie Sie Ihre JavaScript-Funktion aufrufen.

Ihr Code sieht so aus:

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

meine ID sollte in Anführungszeichen gesetzt werden.