Javascript ID로 요소 가져 오기 및 값 설정

Question 1

매개 변수를 전달하는 자바 스크립트 함수가 있습니다. 매개 변수는 내 웹 페이지에있는 요소 (숨겨진 필드)의 ID를 나타냅니다. 이 요소의 값을 변경하고 싶습니다.

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

이렇게하면 개체가 null이기 때문에 값을 설정할 수 없다는 오류가 발생합니다. 그러나 브라우저에서 생성 된 html 코드에서 개체가 표시되기 때문에 개체가 null이 아니라는 것을 알고 있습니다. 어쨌든 다음 코드를 디버깅하여 시도했습니다.

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

경고 메시지가 표시되면 두 매개 변수가 동일하지만 여전히 오류가 발생합니다. 하지만 내가 할 때 모든 것이 잘 작동합니다.

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

이 문제를 어떻게 해결할 수 있습니까?

편집하다

값을 설정하는 요소는 숨겨진 필드이고 ID는 페이지가로드 될 때 동적으로 det입니다. $ (document) .ready 함수에 이것을 추가하려고 시도했지만 작동하지 않았습니다.

Question 2

textarea가 페이지에 렌더링되기 전에 myFunc (variable)이 실행되면 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

따라서 텍스트 영역이 페이지에 있는지 확인한 다음 myFunc를 호출하면 window.onload 또는 $ (document) .ready 함수를 사용할 수 있습니다. 도움이 되었기를 바랍니다.

Question 3

주어진

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

그때

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

당신이 원하는 것을 할 것입니다

주어진

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

그때

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

당신이 원하는 것을 할 것입니다

코드 스 니펫 표시

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

Expand 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

각 요소 유형에 대해 특정 속성을 사용하여 값을 설정할 수 있습니다. 예 :

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

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

여기에서 예제를 시도 할 수 있습니다!

Question 6

아래처럼 시도해보십시오.

<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

문제는 자바 스크립트 함수를 호출하는 방식이라고 생각합니다. 귀하의 코드는 다음과 같습니다.

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

myID는 따옴표로 묶어야합니다.

Question 8

이 질문에 대한 대답은 .setAttribute()추가로 사용할 가능성을 제기하지 않았습니다..value()

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

원래 질문자에게는 도움이되지 않을 것 같지만이 부록은 실제로 페이지 소스의 값 내용을 변경하여 값 업데이트를 form.reset()증명합니다.

다른 사람들에게 도움이되기를 바랍니다.

(또는 js quirks를 잊은 반년 만에 ...)