Javascript Element nach ID abrufen und Wert festlegen

Question 1

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

Question 2

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.

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

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

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

Erweitern Sie das Snippet

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

Question 5

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!

Question 6

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>

Question 7

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.

Question 8

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